Move to CSS classes.

Whether this is better or not is open for discussion. As a separate commit we can always take it out if we regret it.

I think it might help expand this to more block UI in a standardized way.

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

@@ -344,17 +344,16 @@ export class MediaPlaceholder extends Component {
 						render={ ( { openFileDialog } ) => {
 							const content = (
 								<>
-									<IconButton
+									<Button
 										isLarge
 										className={ classnames(
 											'block-editor-media-placeholder__button',
 											'editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
 										) }
-										icon="upload"
 									>
 										{ __( 'Upload' ) }
-									</IconButton>
+									</Button>
 									{ mediaLibraryButton }
 									{ this.renderUrlSelectionUI() }
 									{ this.renderCancelLink() }

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/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

@@ -18,7 +18,13 @@ import Icon from '../icon';
  */
 function Placeholder( { icon, children, label, instructions, className, notices, preview, isColumnLayout, ...additionalProps } ) {
 	const [ resizeListener, { width } ] = useResizeAware();
-	const classes = classnames( 'components-placeholder', className );
+	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 }>
@@ -33,7 +39,7 @@ function Placeholder( { icon, children, label, instructions, className, notices,
 				<Icon icon={ icon } />
 				{ label }
 			</div>
-			{ !! instructions && ( width === null || width >= 320 ) && <div className="components-placeholder__instructions">{ instructions }</div> }
+			{ !! instructions && <div className="components-placeholder__instructions">{ instructions }</div> }
 			<div className={ fieldsetClasses }>
 				{ children }
 			</div>

packages/components/src/placeholder/style.scss

@@ -4,13 +4,12 @@
 	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;
 	}
 
@@ -31,8 +30,6 @@
 
 .components-placeholder__label {
 	display: flex;
-	align-items: center;
-	justify-content: center;
 	font-weight: 600;
 	margin-bottom: 1em;
 
@@ -47,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");
 
@@ -80,8 +75,8 @@
 }
 
 .components-placeholder__fieldset .components-button {
-	margin-right: 4px;
-	margin-bottom: 10px; // if buttons wrap we need vertical space between
+	margin-right: $grid-size;
+	margin-bottom: $grid-size; // if buttons wrap we need vertical space between
 
 	&:last-child {
 		margin-right: 0;
@@ -100,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/style.scss

@@ -19,7 +19,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";