diff --git a/assets/src/block-editor/helpers/index.js b/assets/src/block-editor/helpers/index.js index 13286b59676..f20a0efaab0 100644 --- 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,13 +372,19 @@ 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 ) { @@ -386,17 +392,32 @@ const AmpLayoutControl = ( props ) => { } return ( - { - setAttributes( { ampLayout: value } ); - if ( 'core/image' === props.name ) { - setImageBlockLayoutAttributes( props, value ); - } - } } - /> + <> + + report if you need it.', 'amp' ), + 'https://wordpress.org/support/plugin/amp/#new-topic-0', + ), + } } /> + + + { + 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 new file mode 100644 index 00000000000..28c6aa27a7f --- /dev/null +++ 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( {} } attributes={ {} } />, container ); + } ); + + const selectControl = container.querySelector( 'select' ); + expect( selectControl ).toBeNull(); + } ); + + it( 'should render if ampLayout is defined', function() { + act( () => { + render( {} } attributes={ { ampLayout: '' } } />, container ); + } ); + + const selectControl = container.querySelector( 'select' ); + expect( selectControl ).not.toBeNull(); + } ); +} );