React Resize Aware.

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

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

@@ -339,15 +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'
 										) }
 									>
 										{ __( 'Upload' ) }
-									</IconButton>
+									</Button>
 									{ mediaLibraryButton }
 									{ this.renderUrlSelectionUI() }
 									{ this.renderCancelLink() }

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;

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

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

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;

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 {

packages/components/src/placeholder/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString } from 'lodash';
 import useResizeAware from 'react-resize-aware';
 
 /**
@@ -20,9 +19,9 @@ function Placeholder( { icon, children, label, instructions, className, notices,
 	const [ resizeListener, { width } ] = useResizeAware();
 	const classes = classnames(
 		'components-placeholder',
-		( width >= 320 ? 'size-lg' : '' ),
-		( width >= 160 && width < 320 ? 'size-md' : '' ),
-		( width < 160 ? 'size-sm' : '' ),
+		( 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 } );

packages/components/src/placeholder/style.scss

@@ -1,4 +1,4 @@
-.components-placeholder {
+.components-placeholder.components-placeholder { // This needs specificity to override individual block styles.
 	position: relative;
 	margin-bottom: $default-block-margin;
 	padding: 1em;
@@ -11,6 +11,7 @@
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
+		align-items: flex-start;
 	}
 
 	// Use opacity to work in various editor styles.
@@ -19,6 +20,10 @@
 	.is-dark-theme & {
 		background: $light-opacity-light-200;
 	}
+
+	.components-base-control__label {
+		font-size: $default-font-size;
+	}
 }
 
 .components-placeholder__instructions,
@@ -33,6 +38,7 @@
 	font-weight: 600;
 	margin-bottom: 1em;
 
+	> svg,
 	.dashicon,
 	.block-editor-block-icon {
 		fill: currentColor;
@@ -100,8 +106,8 @@
 .components-placeholder {
 
 	// Medium and small sizes.
-	&.size-md,
-	&.size-sm {
+	&.is-medium,
+	&.is-small {
 		.components-placeholder__instructions {
 			display: none;
 		}
@@ -117,7 +123,7 @@
 	}
 
 	// Small sizes.
-	&.size-sm {
+	&.is-small {
 		.block-editor-block-icon {
 			display: none;
 		}