Redesign the main pattern inserter (#44028)

WordPress · Oct 18, 2022 · bf4eddb · bf4eddb
1 parent a4040e4
commit bf4eddb
Show file tree

Hide file tree

Showing 9 changed files with 372 additions and 221 deletions.
diff --git a/packages/block-editor/src/components/block-draggable/draggable-chip.js b/packages/block-editor/src/components/block-draggable/draggable-chip.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { _n, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { Flex, FlexItem } from '@wordpress/components';
 import { dragHandle } from '@wordpress/icons';
 
@@ -10,7 +10,8 @@ import { dragHandle } from '@wordpress/icons';
  */
 import BlockIcon from '../block-icon';
 
-export default function BlockDraggableChip( { count, icon } ) {
+export default function BlockDraggableChip( { count, icon, isPattern } ) {
+	const patternLabel = isPattern && __( 'Pattern' );
 	return (
 		<div className="block-editor-block-draggable-chip-wrapper">
 			<div
@@ -25,6 +26,7 @@ export default function BlockDraggableChip( { count, icon } ) {
 						{ icon ? (
 							<BlockIcon icon={ icon } />
 						) : (
+							patternLabel ||
 							sprintf(
 								/* translators: %d: Number of blocks. */
 								_n( '%d block', '%d blocks', count ),

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -22,14 +22,14 @@ function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
 
 	return (
-		<InserterDraggableBlocks isEnabled={ isDraggable } blocks={ blocks }>
+		<InserterDraggableBlocks
+			isEnabled={ isDraggable }
+			blocks={ blocks }
+			isPattern={ !! pattern }
+		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
 					className="block-editor-block-patterns-list__list-item"
-					aria-label={ pattern.title }
-					aria-describedby={
-						pattern.description ? descriptionId : undefined
-					}
 					draggable={ draggable }
 					onDragStart={ onDragStart }
 					onDragEnd={ onDragEnd }
@@ -40,6 +40,10 @@ function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
 						{ ...composite }
 						className="block-editor-block-patterns-list__item"
 						onClick={ () => onClick( pattern, blocks ) }
+						aria-label={ pattern.title }
+						aria-describedby={
+							pattern.description ? descriptionId : undefined
+						}
 					>
 						<BlockPreview
 							blocks={ blocks }

diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -23,8 +23,7 @@
 		display: flex;
 		align-items: center;
 		overflow: hidden;
-		border-radius: $radius-block-ui;
-		border: $border-width solid $gray-100;
+		border-radius: 4px;
 	}
 
 	.block-editor-block-patterns-list__item-title {
@@ -34,7 +33,7 @@
 	}
 
 	&:hover .block-editor-block-preview__container {
-		border: $border-width solid var(--wp-admin-theme-color);
+		box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 	}
 
 	&:focus .block-editor-block-preview__container {

diff --git a/packages/block-editor/src/components/inserter-draggable-blocks/index.js b/packages/block-editor/src/components/inserter-draggable-blocks/index.js
@@ -7,7 +7,13 @@ import { Draggable } from '@wordpress/components';
  */
 import BlockDraggableChip from '../block-draggable/draggable-chip';
 
-const InserterDraggableBlocks = ( { isEnabled, blocks, icon, children } ) => {
+const InserterDraggableBlocks = ( {
+	isEnabled,
+	blocks,
+	icon,
+	children,
+	isPattern,
+} ) => {
 	const transferData = {
 		type: 'inserter',
 		blocks,
@@ -18,7 +24,11 @@ const InserterDraggableBlocks = ( { isEnabled, blocks, icon, children } ) => {
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
 			__experimentalDragComponent={
-				<BlockDraggableChip count={ blocks.length } icon={ icon } />
+				<BlockDraggableChip
+					count={ blocks.length }
+					icon={ icon }
+					isPattern={ isPattern }
+				/>
 			}
 		>
 			{ ( { onDraggableStart, onDraggableEnd } ) => {