Unify placeholders (#59275)

* Draft/Experiment: Explore unified placeholders. * Remove comments. * Update label. * Update hover styles. * Update changelog. * Use 2px consistent icons across group and columns * Use : in variation instructions * Add target for hover * Show title. * Initial layout work. * Improve behavior for narrow contexts. * Polish. * Apply margin to Group as well. * Center the buttons when small. * Center upload, 4px padding. * Address feedback (4px gap, justification) * Update embed block. * Fix site logo centering, improve very small contexts. --------- Co-authored-by: Rich Tabor <[email protected]>
WordPress · Apr 26, 2024 · ff01bcb · ff01bcb
1 parent 3ad8419
commit ff01bcb
Show file tree

Hide file tree

Showing 14 changed files with 95 additions and 232 deletions.
diff --git a/packages/block-editor/src/components/block-variation-picker/content.scss b/packages/block-editor/src/components/block-variation-picker/content.scss
@@ -1,89 +1,39 @@
-.block-editor-block-variation-picker {
-	.components-placeholder__instructions {
-		// Defer to vertical margins applied by template picker options.
-		margin-bottom: 0;
-	}
-
-	.components-placeholder__fieldset {
-		// Options will render horizontally, but the immediate children of the
-		// fieldset are the options and the skip button, oriented vertically.
-		flex-direction: column;
-	}
-
-	&.has-many-variations .components-placeholder__fieldset {
-		// Allow options to occupy a greater amount of the available space if
-		// many options exist.
-		max-width: 90%;
-	}
-}
-
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
+.block-editor-block-variation-picker__variations,
+.block-editor-block-variation-picker__skip,
+.wp-block-group-placeholder__variations {
+	list-style: none;
 	display: flex;
 	justify-content: flex-start;
 	flex-direction: row;
 	flex-wrap: wrap;
 	width: 100%;
-	margin: $grid-unit-20 0;
 	padding: 0;
-	list-style: none;
+	margin: 0;
+	gap: $grid-unit-10;
+	font-size: $helptext-font-size;
 
-	> li {
-		list-style: none;
-		margin: $grid-unit-10 ( $grid-unit-10 + $grid-unit-15 ) 0 0;
-		flex-shrink: 1;
-		width: 75px;
-		text-align: center;
-
-		button {
-			display: inline-flex;
-			margin-right: 0;
-		}
+	svg {
+		fill: $gray-400 !important;
 	}
 
-	.block-editor-block-variation-picker__variation {
-		padding: $grid-unit-10;
+	.components-button {
+		padding: 4px;
 	}
 
-	.block-editor-block-variation-picker__variation-label {
-		font-family: $default-font;
-		font-size: 12px;
-		display: block;
-		line-height: 1.4;
+	.components-button:hover {
+		background: none !important; // !important to simplify the selector.
 	}
-}
 
-.block-editor-block-variation-picker__variation {
-	width: 100%;
-
-	&.components-button.has-icon {
-		// Override default styles inherited from <Button /> to center
-		// icon horizontally.
-		justify-content: center;
-		width: auto;
-
-		&.is-secondary {
-			background-color: $white;
-		}
-	}
-
-	&.components-button {
-		// Override default styles inherited from <Button /> to allow button
-		// to grow vertically.
-		height: auto;
-		padding: 0;
-	}
-
-	&::before {
-		// Use `padding-bottom` trick to style element as perfect square.
-		content: "";
-		padding-bottom: 100%;
-	}
-
-	&:first-child {
-		margin-left: 0;
+	.components-button:hover svg {
+		fill: var(--wp-admin-theme-color) !important;
 	}
 
-	&:last-child {
-		margin-right: 0;
+	& > li {
+		width: auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: $grid-unit-05;
 	}
 }
+
diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -13,7 +13,7 @@ import { layout } from '@wordpress/icons';
 function BlockVariationPicker( {
 	icon = layout,
 	label = __( 'Choose variation' ),
-	instructions = __( 'Select a variation to start with.' ),
+	instructions = __( 'Select a variation to start with:' ),
 	variations,
 	onSelect,
 	allowSkip,
@@ -42,7 +42,8 @@ function BlockVariationPicker( {
 				{ variations.map( ( variation ) => (
 					<li key={ variation.name }>
 						<Button
-							variant="secondary"
+							__next40pxDefaultSize
+							variant="tertiary"
 							icon={
 								variation.icon && variation.icon.src
 									? variation.icon.src

diff --git a/packages/block-editor/src/components/media-placeholder/content.scss b/packages/block-editor/src/components/media-placeholder/content.scss
@@ -1,10 +1,3 @@
-.block-editor-media-placeholder__url-input-container {
-	// Reset the margin to ensure the url popover is adjacent to the button.
-	.block-editor-media-placeholder__button {
-		margin-bottom: 0;
-	}
-}
-
 .block-editor-media-placeholder__url-input-form {
 	display: flex;
 
@@ -29,10 +22,6 @@
 	flex-shrink: 1;
 }
 
-.block-editor-media-placeholder__button {
-	margin-bottom: 0.5rem;
-}
-
 .block-editor-media-placeholder__cancel-button.is-link {
 	margin: 1em;
 	display: block;

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -81,7 +81,7 @@ const URLSelectionUI = ( {
 				className="block-editor-media-placeholder__button"
 				onClick={ openURLInput }
 				isPressed={ isURLInputVisible }
-				variant="tertiary"
+				variant="secondary"
 			>
 				{ __( 'Insert from URL' ) }
 			</Button>
@@ -422,7 +422,7 @@ export function MediaPlaceholder( {
 					<Button
 						className="block-editor-media-placeholder__button"
 						onClick={ onToggleFeaturedImage }
-						variant="tertiary"
+						variant="secondary"
 					>
 						{ __( 'Use featured image' ) }
 					</Button>
@@ -435,7 +435,7 @@ export function MediaPlaceholder( {
 		const defaultButton = ( { open } ) => {
 			return (
 				<Button
-					variant="tertiary"
+					variant="secondary"
 					onClick={ () => {
 						open();
 					} }

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
@@ -274,6 +274,7 @@ function Placeholder( { clientId, name, setAttributes } ) {
 				icon={ blockType?.icon?.src }
 				label={ blockType?.title }
 				variations={ variations }
+				instructions={ __( 'Divide into columns. Select a layout:' ) }
 				onSelect={ ( nextVariation = defaultVariation ) => {
 					if ( nextVariation.attributes ) {
 						setAttributes( nextVariation.attributes );

diff --git a/packages/block-library/src/columns/variations.js b/packages/block-library/src/columns/variations.js
@@ -18,16 +18,12 @@ const variations = [
 		description: __( 'One column' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="m39.0625 14h-30.0625v20.0938h30.0625zm-30.0625-2c-1.10457 0-2 .8954-2 2v20.0938c0 1.1045.89543 2 2 2h30.0625c1.1046 0 2-.8955 2-2v-20.0938c0-1.1046-.8954-2-2-2z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [ [ 'core/column' ] ],
@@ -39,16 +35,12 @@ const variations = [
 		description: __( 'Two columns; equal split' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H25V34H39ZM23 34H9V14H23V34Z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		isDefault: true,
@@ -61,16 +53,12 @@ const variations = [
 		description: __( 'Two columns; one-third, two-thirds split' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H20V34H39ZM18 34H9V14H18V34Z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm17 0a2 2 0 0 1 2-2h27a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H19a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [
@@ -85,16 +73,12 @@ const variations = [
 		description: __( 'Two columns; two-thirds, one-third split' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					clipRule="evenodd"
-					d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H30V34H39ZM28 34H9V14H28V34Z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h27a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm33 0a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H35a2 2 0 0 1-2-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [
@@ -109,15 +93,12 @@ const variations = [
 		description: __( 'Three columns; equal split' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM28.5 34h-9V14h9v20zm2 0V14H39v20h-8.5zm-13 0H9V14h8.5v20z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h10.531c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H2a2 2 0 0 1-2-2V10Zm16.5 0c0-1.105.864-2 1.969-2H29.53c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H18.47c-1.105 0-1.969-.895-1.969-2V10Zm17 0c0-1.105.864-2 1.969-2H46a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H35.469c-1.105 0-1.969-.895-1.969-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [
@@ -133,15 +114,12 @@ const variations = [
 		description: __( 'Three columns; wide center column' ),
 		icon: (
 			<SVG
+				xmlns="http://www.w3.org/2000/svg"
 				width="48"
 				height="48"
 				viewBox="0 0 48 48"
-				xmlns="http://www.w3.org/2000/svg"
 			>
-				<Path
-					fillRule="evenodd"
-					d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM31 34H17V14h14v20zm2 0V14h6v20h-6zm-18 0H9V14h6v20z"
-				/>
+				<Path d="M0 10a2 2 0 0 1 2-2h7.531c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H2a2 2 0 0 1-2-2V10Zm13.5 0c0-1.105.864-2 1.969-2H32.53c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H15.47c-1.105 0-1.969-.895-1.969-2V10Zm23 0c0-1.105.864-2 1.969-2H46a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2h-7.531c-1.105 0-1.969-.895-1.969-2V10Z" />
 			</SVG>
 		),
 		innerBlocks: [

diff --git a/packages/block-library/src/embed/editor.scss b/packages/block-library/src/embed/editor.scss
@@ -19,8 +19,6 @@
 }
 
 .wp-block-embed__learn-more {
-	margin-top: 1em;
-
 	@at-root .wp-block-post-content & {
 		a {
 			color: var(--wp-admin-theme-color);

diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js
@@ -2,7 +2,13 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { Button, Placeholder, ExternalLink } from '@wordpress/components';
+import {
+	Button,
+	Placeholder,
+	ExternalLink,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
 
 const EmbedPlaceholder = ( {
@@ -47,17 +53,23 @@ const EmbedPlaceholder = ( {
 				</ExternalLink>
 			</div>
 			{ cannotEmbed && (
-				<div className="components-placeholder__error">
+				<VStack spacing={ 3 } className="components-placeholder__error">
 					<div className="components-placeholder__instructions">
 						{ __( 'Sorry, this content could not be embedded.' ) }
 					</div>
-					<Button variant="secondary" onClick={ tryAgain }>
-						{ _x( 'Try again', 'button label' ) }
-					</Button>{ ' ' }
-					<Button variant="secondary" onClick={ fallback }>
-						{ _x( 'Convert to link', 'button label' ) }
-					</Button>
-				</div>
+					<HStack
+						expanded={ false }
+						spacing={ 3 }
+						justify="flex-start"
+					>
+						<Button variant="secondary" onClick={ tryAgain }>
+							{ _x( 'Try again', 'button label' ) }
+						</Button>{ ' ' }
+						<Button variant="secondary" onClick={ fallback }>
+							{ _x( 'Convert to link', 'button label' ) }
+						</Button>
+					</HStack>
+				</VStack>
 			) }
 		</Placeholder>
 	);