Iterate zoom out shuffle into a more visual control

packages/block-editor/src/components/block-toolbar/change-design.js

@@ -0,0 +1,134 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToolbarButton,
+	ToolbarGroup,
+	Dropdown,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { cloneBlock } from '@wordpress/blocks';
+import { useMemo } from '@wordpress/element';
+import { useAsyncList } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockPatternsList from '../block-patterns-list';
+
+const EMPTY_ARRAY = [];
+const MAX_PATTERNS_TO_SHOW = 6;
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
+export default function ChangeDesign( { clientId } ) {
+	const { categories, currentPatternName, patterns } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlockRootClientId,
+				__experimentalGetAllowedPatterns,
+			} = select( blockEditorStore );
+			const attributes = getBlockAttributes( clientId );
+			const _categories = attributes?.metadata?.categories || EMPTY_ARRAY;
+			const rootBlock = getBlockRootClientId( clientId );
+
+			// Calling `__experimentalGetAllowedPatterns` is expensive.
+			// Checking if the block can be changed prevents unnecessary selector calls.
+			// See: https://github.com/WordPress/gutenberg/pull/64736.
+			const _patterns =
+				_categories.length > 0
+					? __experimentalGetAllowedPatterns( rootBlock )
+					: EMPTY_ARRAY;
+			return {
+				categories: _categories,
+				currentPatternName: attributes?.metadata?.patternName,
+				patterns: _patterns,
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const sameCategoryPatternsWithSingleWrapper = useMemo( () => {
+		if ( categories.length === 0 || ! patterns || patterns.length === 0 ) {
+			return EMPTY_ARRAY;
+		}
+		return patterns
+			.filter( ( pattern ) => {
+				const isCorePattern =
+					pattern.source === 'core' ||
+					( pattern.source?.startsWith( 'pattern-directory' ) &&
+						pattern.source !== 'pattern-directory/theme' );
+				return (
+					// Check if the pattern has only one top level block,
+					// otherwise we may switch to a pattern that doesn't have replacement suggestions.
+					pattern.blocks.length === 1 &&
+					// We exclude the core patterns and pattern directory patterns that are not theme patterns.
+					! isCorePattern &&
+					// Exclude current pattern.
+					currentPatternName !== pattern.name &&
+					pattern.categories?.some( ( category ) => {
+						return categories.includes( category );
+					} ) &&
+					// Check if the pattern is not a synced pattern.
+					( pattern.syncStatus === 'unsynced' || ! pattern.id )
+				);
+			} )
+			.slice( 0, MAX_PATTERNS_TO_SHOW );
+	}, [ categories, currentPatternName, patterns ] );
+
+	const currentShownPatterns = useAsyncList(
+		sameCategoryPatternsWithSingleWrapper
+	);
+
+	if ( sameCategoryPatternsWithSingleWrapper.length < 2 ) {
+		return null;
+	}
+
+	const onClickPattern = ( pattern ) => {
+		const newBlocks = ( pattern.blocks ?? [] ).map( ( block ) => {
+			return cloneBlock( block );
+		} );
+		newBlocks[ 0 ].attributes.metadata = {
+			...newBlocks[ 0 ].attributes.metadata,
+			categories,
+		};
+		replaceBlocks( clientId, newBlocks );
+	};
+
+	return (
+		<Dropdown
+			popoverProps={ POPOVER_PROPS }
+			renderToggle={ ( { onToggle, isOpen } ) => {
+				return (
+					<ToolbarGroup>
+						<ToolbarButton
+							isActive={ isOpen }
+							// label={ __( 'Change Design' ) }
+							onClick={ () => onToggle( ! isOpen ) }
+							aria-expanded={ isOpen }
+						>
+							{ __( 'Change Design' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				);
+			} }
+			renderContent={ () => (
+				<DropdownContentWrapper
+					className="block-editor-block-toolbar-change-design-content-wrapper"
+					paddingSize="medium"
+				>
+					<BlockPatternsList
+						shownPatterns={ currentShownPatterns }
+						blockPatterns={ sameCategoryPatternsWithSingleWrapper }
+						onClickPattern={ onClickPattern }
+					/>
+				</DropdownContentWrapper>
+			) }
+		/>
+	);
+}

packages/block-editor/src/components/block-toolbar/style.scss

@@ -285,3 +285,18 @@
 		}
 	}
 }
+
+.block-editor-block-toolbar-change-design-content-wrapper {
+	width: 350px; // Same with quick inserter results.
+	.block-editor-block-patterns-list {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		grid-gap: $grid-unit-10;
+		.block-editor-block-patterns-list__list-item {
+			margin-bottom: 0;
+		}
+		.block-editor-inserter__media-list__list-item {
+			min-height: 100px;
+		}
+	}
+}

packages/block-editor/src/components/block-tools/zoom-out-toolbar.js

@@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '../../store';
 import BlockDraggable from '../block-draggable';
 import BlockMover from '../block-mover';
-import Shuffle from '../block-toolbar/shuffle';
+import ChangeDesign from '../block-toolbar/change-design';
 import NavigableToolbar from '../navigable-toolbar';
 
 export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
@@ -115,9 +115,7 @@ export default function ZoomOutToolbar( { clientId, __unstableContentRef } ) {
 					size="compact"
 				/>
 			) }
-			{ canMove && canRemove && (
-				<Shuffle clientId={ clientId } as={ ToolbarButton } />
-			) }
+			{ canMove && canRemove && <ChangeDesign clientId={ clientId } /> }
 
 			{ canRemove && ! isBlockTemplatePart && (
 				<ToolbarButton