hide instructions when smaller than 320px

packages/components/package.json

@@ -44,6 +44,7 @@
 		"mousetrap": "^1.6.2",
 		"re-resizable": "^6.0.0",
 		"react-dates": "^17.1.1",
+		"react-resize-aware": "^3.0.0-beta.7",
 		"react-spring": "^8.0.20",
 		"reakit": "^1.0.0-beta.12",
 		"rememo": "^3.0.0",

packages/components/src/placeholder/index.js

@@ -2,6 +2,8 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { isString } from 'lodash';
+import useResizeAware from 'react-resize-aware';
 
 /**
  * Internal dependencies
@@ -15,10 +17,12 @@ import Icon from '../icon';
  * @return {Object}       The rendered placeholder.
  */
 function Placeholder( { icon, children, label, instructions, className, notices, preview, isColumnLayout, ...additionalProps } ) {
+	const [ resizeListener, { width } ] = useResizeAware();
 	const classes = classnames( 'components-placeholder', className );
 	const fieldsetClasses = classnames( 'components-placeholder__fieldset', { 'is-column-layout': isColumnLayout } );
 	return (
 		<div { ...additionalProps } className={ classes }>
+			{ resizeListener }
 			{ notices }
 			{ preview &&
 				<div className="components-placeholder__preview">
@@ -29,7 +33,7 @@ function Placeholder( { icon, children, label, instructions, className, notices,
 				<Icon icon={ icon } />
 				{ label }
 			</div>
-			{ !! instructions && <div className="components-placeholder__instructions">{ instructions }</div> }
+			{ !! instructions && ( width === null || width >= 320 ) && <div className="components-placeholder__instructions">{ instructions }</div> }
 			<div className={ fieldsetClasses }>
 				{ children }
 			</div>

packages/components/src/placeholder/style.scss

@@ -1,4 +1,5 @@
 .components-placeholder {
+	position: relative;
 	margin-bottom: $default-block-margin;
 	padding: 1em;
 	min-height: 200px;

packages/components/src/placeholder/test/index.js

@@ -1,14 +1,18 @@
+jest.mock( 'react-resize-aware' );
 /**
  * External dependencies
  */
 import { shallow } from 'enzyme';
+import useResizeAware from 'react-resize-aware';
 
 /**
  * Internal dependencies
  */
 import Placeholder from '../';
 
 describe( 'Placeholder', () => {
+	useResizeAware.mockReturnValue( [ <div key="1" />, { width: 320 } ] );
+
 	describe( 'basic rendering', () => {
 		it( 'should by default render label section and fieldset.', () => {
 			const placeholder = shallow( <Placeholder /> );
@@ -53,6 +57,16 @@ describe( 'Placeholder', () => {
 			expect( child.matchesElement( element ) ).toBe( true );
 		} );
 
+		it( 'should not display an instructions element when smaller than 320px', () => {
+			useResizeAware.mockReturnValue( [ <div key="1" />, { width: 319 } ] );
+			const element = <div>Instructions</div>;
+			const placeholder = shallow(
+				<Placeholder instructions={ element } />
+			);
+			const placeholderInstructions = placeholder.find( '.components-placeholder__instructions' );
+			expect( placeholderInstructions.exists() ).toBe( false );
+		} );
+
 		it( 'should display a fieldset from the children property', () => {
 			const element = <div>Fieldset</div>;
 			const placeholder = shallow( <Placeholder children={ element } /> );