Hide Placeholder instructions when smaller than 320px

packages/block-editor/src/components/media-placeholder/index.js

@@ -345,7 +345,6 @@ export class MediaPlaceholder extends Component {
 											'block-editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
 										) }
-										icon="upload"
 									>
 										{ __( 'Upload' ) }
 									</IconButton>

packages/block-editor/src/components/media-placeholder/style.scss

@@ -1,6 +1,4 @@
 .block-editor-media-placeholder__url-input-container {
-	width: 100%;
-
 	// Reset the margin to ensure the url popover is adjacent to the button.
 	.block-editor-media-placeholder__button {
 		margin-bottom: 0;
@@ -47,10 +45,6 @@
 	display: block;
 }
 
-.components-form-file-upload .block-editor-media-placeholder__button {
-	margin-right: $grid-size-small;
-}
-
 .block-editor-media-placeholder.is-appender {
 	min-height: 100px;
 	outline: $border-width dashed $dark-gray-150;

packages/components/package.json

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

packages/components/src/form-file-upload/index.js

@@ -6,7 +6,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import IconButton from '../icon-button';
+import Button from '../button';
 
 class FormFileUpload extends Component {
 	constructor() {
@@ -27,7 +27,6 @@ class FormFileUpload extends Component {
 		const {
 			accept,
 			children,
-			icon = 'upload',
 			multiple = false,
 			onChange,
 			render,
@@ -36,13 +35,12 @@ class FormFileUpload extends Component {
 
 		const ui = render ?
 			render( { openFileDialog: this.openFileDialog } ) : (
-				<IconButton
-					icon={ icon }
+				<Button
 					onClick={ this.openFileDialog }
 					{ ...props }
 				>
 					{ children }
-				</IconButton>
+				</Button>
 			);
 		return (
 			<div className="components-form-file-upload">

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,18 @@ import Icon from '../icon';
  * @return {Object}       The rendered placeholder.
  */
 function Placeholder( { icon, children, label, instructions, className, notices, preview, isColumnLayout, ...additionalProps } ) {
-	const classes = classnames( 'components-placeholder', className );
+	const [ resizeListener, { width } ] = useResizeAware();
+	const classes = classnames(
+		'components-placeholder',
+		( width >= 320 ? 'size-lg' : '' ),
+		( width >= 160 && width < 320 ? 'size-md' : '' ),
+		( width < 160 ? 'size-sm' : '' ),
+		className
+	);
 	const fieldsetClasses = classnames( 'components-placeholder__fieldset', { 'is-column-layout': isColumnLayout } );
 	return (
 		<div { ...additionalProps } className={ classes }>
+			{ resizeListener }
 			{ notices }
 			{ preview &&
 				<div className="components-placeholder__preview">

packages/components/src/placeholder/style.scss

@@ -1,15 +1,15 @@
 .components-placeholder {
+	position: relative;
 	margin-bottom: $default-block-margin;
 	padding: 1em;
 	min-height: 200px;
 	width: 100%;
-	text-align: center;
+	text-align: left;
 
 	// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
 	@supports (position: sticky) {
 		display: flex;
 		flex-direction: column;
-		align-items: center;
 		justify-content: center;
 	}
 
@@ -30,8 +30,6 @@
 
 .components-placeholder__label {
 	display: flex;
-	align-items: center;
-	justify-content: center;
 	font-weight: 600;
 	margin-bottom: 1em;
 
@@ -46,9 +44,7 @@
 .components-placeholder__fieldset form {
 	display: flex;
 	flex-direction: row;
-	justify-content: center;
 	width: 100%;
-	max-width: 400px;
 	flex-wrap: wrap;
 	z-index: z-index(".components-placeholder__fieldset");
 
@@ -79,7 +75,8 @@
 }
 
 .components-placeholder__fieldset .components-button {
-	margin-right: 4px;
+	margin-right: $grid-size;
+	margin-bottom: $grid-size; // If buttons wrap we need vertical space between.
 
 	&:last-child {
 		margin-right: 0;
@@ -98,3 +95,35 @@
 		margin-right: 0;
 	}
 }
+
+// Element queries to show different layouts at various sizes.
+.components-placeholder {
+
+	// Medium and small sizes.
+	&.size-md,
+	&.size-sm {
+		.components-placeholder__instructions {
+			display: none;
+		}
+
+		.components-placeholder__fieldset,
+		.components-placeholder__fieldset form {
+			flex-direction: column;
+		}
+
+		.components-placeholder__fieldset .components-button {
+			margin-right: auto;
+		}
+	}
+
+	// Small sizes.
+	&.size-sm {
+		.block-editor-block-icon {
+			display: none;
+		}
+
+		.components-button {
+			padding: 0 $grid-size 2px;
+		}
+	}
+}

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 } /> );

packages/components/src/style.scss

@@ -20,7 +20,6 @@
 @import "./external-link/style.scss";
 @import "./focal-point-picker/style.scss";
 @import "./font-size-picker/style.scss";
-@import "./form-file-upload/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";
 @import "./guide/style.scss";