Merge pull request #5573 from ampproject/enhancement/4554-deprecate-a…

…mp-layout-settings Hide AMP Layout control if block does not have specified setting
ampproject · Dec 13, 2020 · f6ea716 · f6ea716
2 parents d7720f1 + 4ce49d8
commit f6ea716
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 13 deletions.
diff --git a/assets/src/block-editor/helpers/index.js b/assets/src/block-editor/helpers/index.js
@@ -7,7 +7,7 @@ import { ReactElement } from 'react';
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { cloneElement } from '@wordpress/element';
 import { TextControl, SelectControl, ToggleControl, Notice, PanelBody, FontSizePicker } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -372,31 +372,52 @@ setUpInspectorControls.propTypes = {
 /**
  * Get AMP Layout select control.
  *
+ * @deprecated As of v2.1. Blocks with the `ampLayout` attribute will still be able to use the control.
+ *
  * @param {Object} props Props.
  *
  * @return {ReactElement} Element.
  */
-const AmpLayoutControl = ( props ) => {
+export const AmpLayoutControl = ( props ) => {
 	const { name, attributes: { ampLayout }, setAttributes } = props;
 
+	if ( undefined === ampLayout ) {
+		return null;
+	}
+
 	let label = __( 'AMP Layout', 'amp' );
 
 	if ( 'core/image' === name ) {
 		label = __( 'AMP Layout (modifies width/height)', 'amp' );
 	}
 
 	return (
-		<SelectControl
-			label={ label }
-			value={ ampLayout }
-			options={ getLayoutOptions( name ) }
-			onChange={ ( value ) => {
-				setAttributes( { ampLayout: value } );
-				if ( 'core/image' === props.name ) {
-					setImageBlockLayoutAttributes( props, value );
-				}
-			} }
-		/>
+		<>
+			<Notice
+				status="warning"
+				isDismissible={ false }
+			>
+				<span dangerouslySetInnerHTML={ {
+					__html: sprintf(
+						/* translators: placeholder is link to support forum. */
+						__( 'The AMP Layout 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>
+
+			<SelectControl
+				label={ label }
+				value={ ampLayout }
+				options={ getLayoutOptions( name ) }
+				onChange={ ( value ) => {
+					setAttributes( { ampLayout: value } );
+					if ( 'core/image' === props.name ) {
+						setImageBlockLayoutAttributes( props, value );
+					}
+				} }
+			/>
+		</>
 	);
 };
 

diff --git a/assets/src/block-editor/helpers/test/AmpLayoutControl.js b/assets/src/block-editor/helpers/test/AmpLayoutControl.js
@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { act } from 'react-dom/test-utils';
+
+/**
+ * WordPress dependencies
+ */
+import { render } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AmpLayoutControl } from '../';
+
+let container;
+
+describe( 'AmpLayoutControl', () => {
+	beforeEach( () => {
+		container = document.createElement( 'div' );
+		document.body.appendChild( container );
+	} );
+
+	afterEach( () => {
+		document.body.removeChild( container );
+		container = null;
+	} );
+
+	it( 'should not render if ampLayout is undefined', function() {
+		act( () => {
+			render( <AmpLayoutControl setAttributes={ () => {} } attributes={ {} } />, container );
+		} );
+
+		const selectControl = container.querySelector( 'select' );
+		expect( selectControl ).toBeNull();
+	} );
+
+	it( 'should render if ampLayout is defined', function() {
+		act( () => {
+			render( <AmpLayoutControl setAttributes={ () => {} } attributes={ { ampLayout: '' } } />, container );
+		} );
+
+		const selectControl = container.querySelector( 'select' );
+		expect( selectControl ).not.toBeNull();
+	} );
+} );