Hide AMP Noloading toggle if block does not have specified setting

assets/src/block-editor/helpers/index.js

@@ -432,21 +432,42 @@ AmpLayoutControl.propTypes = {
 /**
  * Get AMP Noloading toggle control.
  *
+ * @deprecated As of v2.1. Blocks with the `ampNoLoading` attribute will still be able to use the control.
+ *
  * @param {Object} props Props.
  *
  * @return {ReactElement} Element.
  */
-const AmpNoloadingToggle = ( props ) => {
+export const AmpNoloadingToggle = ( props ) => {
 	const { attributes: { ampNoLoading }, setAttributes } = props;
 
+	if ( undefined === ampNoLoading ) {
+		return null;
+	}
+
 	const label = __( 'AMP Noloading', 'amp' );
 
 	return (
-		<ToggleControl
-			label={ label }
-			checked={ ampNoLoading }
-			onChange={ () => setAttributes( { ampNoLoading: ! ampNoLoading } ) }
-		/>
+		<>
+			<Notice
+				status="warning"
+				isDismissible={ false }
+			>
+				<span dangerouslySetInnerHTML={ {
+					__html: sprintf(
+						/* translators: placeholder is link to support forum. */
+						__( 'The AMP Noloading setting is deprecated and is slated for removal. Please <a href="%s" target="_blank" rel="noreferrer">report</a> if you need it.', 'amp' ),
+						'https://wordpress.org/support/plugin/amp/#new-topic-0',
+					),
+				} } />
+			</Notice>
+
+			<ToggleControl
+				label={ label }
+				checked={ ampNoLoading }
+				onChange={ () => setAttributes( { ampNoLoading: ! ampNoLoading } ) }
+			/>
+		</>
 	);
 };
 

assets/src/block-editor/helpers/test/AmpNoloadingToggle.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AmpNoloadingToggle } from '../';
+
+let container;
+
+describe( 'AmpNoloadingToggle', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'should not render if ampNoLoading is undefined', function() {
+		act( () => {
+			render( <AmpNoloadingToggle setAttributes={ () => {} } attributes={ {} } />, container );
+		} );
+
+		const selectControl = container.querySelector( 'input' );
+		expect( selectControl ).toBeNull();
+	} );
+
+	it( 'should render if ampNoLoading is defined', function() {
+		act( () => {
+			render( <AmpNoloadingToggle setAttributes={ () => {} } attributes={ { ampNoLoading: true } } />, container );
+		} );
+
+		const selectControl = container.querySelector( 'input' );
+		expect( selectControl ).not.toBeNull();
+	} );
+} );