Make Placeholder component "element-query-like" responsive. (#18745)

Props @jameslnewell.
WordPress · Dec 19, 2019 · 8b1f05b · 8b1f05b
1 parent 9c660bf
commit 8b1f05b
Show file tree

Hide file tree

Showing 18 changed files with 106 additions and 71 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/src/components/block-pattern-picker/style.scss b/packages/block-editor/src/components/block-pattern-picker/style.scss
@@ -19,16 +19,17 @@
 
 .block-editor-block-pattern-picker__patterns.block-editor-block-pattern-picker__patterns {
 	display: flex;
-	justify-content: center;
+	justify-content: flex-start;
 	flex-direction: row;
 	flex-wrap: wrap;
 	width: 100%;
-	margin: $grid-size-small 0;
+	margin: $grid-size-large 0;
+	padding: 0;
 	list-style: none;
 
 	> li {
 		list-style: none;
-		margin: $grid-size;
+		margin: 0 $grid-size 0 0;
 		flex-shrink: 1;
 		max-width: 100px;
 	}

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -339,16 +339,15 @@ export class MediaPlaceholder extends Component {
 						render={ ( { openFileDialog } ) => {
 							const content = (
 								<>
-									<IconButton
+									<Button
 										isSecondary
 										className={ classnames(
 											'block-editor-media-placeholder__button',
 											'block-editor-media-placeholder__upload-button'
 										) }
-										icon="upload"
 									>
 										{ __( 'Upload' ) }
-									</IconButton>
+									</Button>
 									{ mediaLibraryButton }
 									{ this.renderUrlSelectionUI() }
 									{ this.renderCancelLink() }

diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/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;

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
@@ -13,9 +13,9 @@
 		color: $light-gray-100;
 	}
 
-	// wp-block-cover class is used just to increase selector specificity
+	// The .wp-block-cover class is used just to increase selector specificity.
 	.wp-block-cover__inner-container {
-		// avoid text align inherit from cover image align.
+		// Avoid text align inherit from cover image align.
 		text-align: left;
 	}
 
@@ -24,24 +24,12 @@
 		margin-right: 0;
 	}
 
-	&.components-placeholder {
-		// use opacity to work in various editor styles
-		background: $dark-opacity-light-200;
-		min-height: 200px;
-
-		.is-dark-theme & {
-			background: $light-opacity-light-200;
-		}
-	}
-
 	.wp-block-cover__placeholder-background-options {
-		// wraps about 6 color swatches
-		max-width: 260px;
 		margin-top: 1em;
 		width: 100%;
 	}
 
-	// Apply max-width to floated items that have no intrinsic width
+	// Apply max-width to floated items that have no intrinsic width.
 	[data-align="left"] &,
 	[data-align="right"] & {
 		max-width: $content-width / 2;

diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap
@@ -2,8 +2,16 @@
 
 exports[`core/embed block edit matches snapshot 1`] = `
 <div
-  class="components-placeholder wp-block-embed"
+  class="components-placeholder is-small wp-block-embed"
 >
+  <iframe
+    aria-hidden="true"
+    aria-label="resize-listener"
+    frameborder="0"
+    src="about:blank"
+    style="display:block;opacity:0;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1"
+    tabindex="-1"
+  />
   <div
     class="components-placeholder__label"
   >

diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js
@@ -502,7 +502,6 @@ export class TableEdit extends Component {
 					label={ __( 'Table' ) }
 					icon={ <BlockIcon icon={ icon } showColors /> }
 					instructions={ __( 'Insert a table for sharing data.' ) }
-					isColumnLayout
 				>
 					<form className="wp-block-table__placeholder-form" onSubmit={ this.onCreateTable }>
 						<TextControl

diff --git a/packages/block-library/src/table/editor.scss b/packages/block-library/src/table/editor.scss
@@ -46,22 +46,25 @@
 		border-style: double;
 	}
 
-	// Extra specificity to override default Placeholder styles.
-	&__placeholder-form.wp-block-table__placeholder-form {
-		text-align: left;
-		align-items: center;
+	figcaption {
+		@include caption-style-theme();
 	}
+}
 
-	&__placeholder-input {
-		width: 100px;
-	}
+// Extra specificity to override default Placeholder styles.
+.wp-block-table__placeholder-form.wp-block-table__placeholder-form {
+	.wp-block-table__placeholder-input {
+		width: $grid-size * 14;
+		margin-right: $grid-size;
+		margin-bottom: 0;
 
-	&__placeholder-button {
-		min-width: 100px;
-		justify-content: center;
+		input {
+			height: $icon-button-size;
+		}
 	}
 
-	figcaption {
-		@include caption-style-theme();
+	.wp-block-table__placeholder-button {
+		margin-top: auto;
+		margin-right: auto;
 	}
 }
diff --git a/packages/components/package.json b/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",

diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
@@ -9,7 +9,7 @@
 	background: none;
 	transition: box-shadow 0.1s linear;
 	@include reduce-motion("transition");
-	height: 36px;
+	height: $icon-button-size;
 	align-items: center;
 	box-sizing: border-box;
 	padding: 0 8px;

diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
@@ -32,10 +32,6 @@ $color-palette-circle-spacing: 12px;
 		height: 100%;
 		width: 100%;
 	}
-
-	&:nth-child(6n+6) {
-		margin-right: 0;
-	}
 }
 
 .components-circular-option-picker__option-wrapper::before {

diff --git a/packages/components/src/form-file-upload/index.js b/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">

diff --git a/packages/components/src/form-file-upload/style.scss b/packages/components/src/form-file-upload/style.scss
diff --git a/packages/components/src/form-file-upload/test/index.js b/packages/components/src/form-file-upload/test/index.js
@@ -9,7 +9,7 @@ import { noop } from 'lodash';
  */
 import FormFileUpload from '../';
 
-describe( 'InserterMenu', () => {
+describe( 'FormFileUpload', () => {
 	it( 'should show an Icon Button and a hidden input', () => {
 		const wrapper = shallow(
 			<FormFileUpload
@@ -22,9 +22,9 @@ describe( 'InserterMenu', () => {
 			</FormFileUpload>
 		);
 
-		const iconButton = wrapper.find( 'ForwardRef(IconButton)' );
+		const button = wrapper.find( 'ForwardRef(Button)' );
 		const input = wrapper.find( 'input' );
-		expect( iconButton.prop( 'children' ) ).toBe( 'My Upload Button' );
+		expect( button.prop( 'children' ) ).toBe( 'My Upload Button' );
 		expect( input.prop( 'style' ).display ).toBe( 'none' );
 	} );
 } );
diff --git a/packages/components/src/placeholder/index.js b/packages/components/src/placeholder/index.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import useResizeAware from 'react-resize-aware';
 
 /**
  * Internal dependencies
@@ -15,10 +16,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 ? 'is-large' : '' ),
+		( width >= 160 && width < 320 ? 'is-medium' : '' ),
+		( width < 160 ? 'is-small' : '' ),
+		className
+	);
 	const fieldsetClasses = classnames( 'components-placeholder__fieldset', { 'is-column-layout': isColumnLayout } );
 	return (
 		<div { ...additionalProps } className={ classes }>
+			{ resizeListener }
 			{ notices }
 			{ preview &&
 				<div className="components-placeholder__preview">