Patterns: Change the icon and label for pattern section to use the pattern icon and name (#73203)

scruffian · ramonjd · web-flow · commit bae645e1dabb · 2025-11-17T23:54:35.000Z
Co-authored-by: scruffian &lt;scruffian@git.wordpress.org&gt;
Co-authored-by: ramonjd &lt;ramonopoly@git.wordpress.org&gt;
diff --git a/packages/block-editor/src/components/block-toolbar/block-toolbar-icon.js b/packages/block-editor/src/components/block-toolbar/block-toolbar-icon.js
@@ -4,7 +4,7 @@
 import { ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { copy } from '@wordpress/icons';
+import { copy, symbol } from '@wordpress/icons';
 import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -24,7 +24,6 @@ function getBlockIconVariant( { select, clientIds } ) {
 		getBlockName,
 		getBlockAttributes,
 		getBlockParentsByBlockName,
-		isSectionBlock,
 		canRemoveBlocks,
 		getTemplateLock,
 		getBlockEditingMode,
@@ -40,8 +39,8 @@ function getBlockIconVariant( { select, clientIds } ) {
 	const blockName = isSingleBlock && getBlockName( clientIds[ 0 ] );
 	const hasBlockStyles =
 		isSingleBlock && !! getBlockStyles( blockName )?.length;
-	const isSectionInSelection = clientIds.some( ( id ) =>
-		isSectionBlock( id )
+	const hasPatternNameInSelection = clientIds.some(
+		( id ) => !! getBlockAttributes( id )?.metadata?.patternName
 	);
 	const hasPatternOverrides = clientIds.every( ( clientId ) =>
 		hasPatternOverridesDefaultBinding(
@@ -59,7 +58,7 @@ function getBlockIconVariant( { select, clientIds } ) {
 		getBlockEditingMode( clientIds[ 0 ] ) === 'default';
 	const _hideTransformsForSections =
 		window?.__experimentalContentOnlyPatternInsertion &&
-		isSectionInSelection;
+		hasPatternNameInSelection;
 	const _showBlockSwitcher =
 		! _hideTransformsForSections &&
 		isDefaultEditingMode &&
@@ -81,19 +80,24 @@ function getBlockIcon( { select, clientIds } ) {
 	const { getBlockName, getBlockAttributes } = unlock(
 		select( blockEditorStore )
 	);
-	const { getActiveBlockVariation } = select( blocksStore );
 
 	const _isSingleBlock = clientIds.length === 1;
 	const firstClientId = clientIds[ 0 ];
+	const blockAttributes = getBlockAttributes( firstClientId );
+	if (
+		_isSingleBlock &&
+		blockAttributes?.metadata?.patternName &&
+		window?.__experimentalContentOnlyPatternInsertion
+	) {
+		return symbol;
+	}
 
 	const blockName = getBlockName( firstClientId );
 	const blockType = getBlockType( blockName );
 
 	if ( _isSingleBlock ) {
-		const match = getActiveBlockVariation(
-			blockName,
-			getBlockAttributes( firstClientId )
-		);
+		const { getActiveBlockVariation } = select( blocksStore );
+		const match = getActiveBlockVariation( blockName, blockAttributes );
 		return match?.icon || blockType?.icon;
 	}
 
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -12,7 +12,13 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lockSmall as lock, pinSmall, unseen } from '@wordpress/icons';
+import {
+	Icon,
+	lockSmall as lock,
+	pinSmall,
+	unseen,
+	symbol,
+} from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 import { hasBlockSupport } from '@wordpress/blocks';
@@ -55,28 +61,35 @@ function ListViewBlockSelectButton(
 		context: 'list-view',
 	} );
 	const { isLocked } = useBlockLock( clientId );
-	const { canToggleBlockVisibility, isBlockHidden, isContentOnly } =
-		useSelect(
-			( select ) => {
-				const { getBlockName } = select( blockEditorStore );
-				const { isBlockHidden: _isBlockHidden } = unlock(
-					select( blockEditorStore )
-				);
-				return {
-					canToggleBlockVisibility: hasBlockSupport(
-						getBlockName( clientId ),
-						'blockVisibility',
-						true
-					),
-					isBlockHidden: _isBlockHidden( clientId ),
-					isContentOnly:
-						select( blockEditorStore ).getBlockEditingMode(
-							clientId
-						) === 'contentOnly',
-				};
-			},
-			[ clientId ]
-		);
+	const {
+		canToggleBlockVisibility,
+		isBlockHidden,
+		isContentOnly,
+		hasPatternName,
+	} = useSelect(
+		( select ) => {
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+			const { isBlockHidden: _isBlockHidden } = unlock(
+				select( blockEditorStore )
+			);
+			const blockAttributes = getBlockAttributes( clientId );
+			return {
+				canToggleBlockVisibility: hasBlockSupport(
+					getBlockName( clientId ),
+					'blockVisibility',
+					true
+				),
+				isBlockHidden: _isBlockHidden( clientId ),
+				isContentOnly:
+					select( blockEditorStore ).getBlockEditingMode(
+						clientId
+					) === 'contentOnly',
+				hasPatternName: !! blockAttributes?.metadata?.patternName,
+			};
+		},
+		[ clientId ]
+	);
 	const shouldShowLockIcon = isLocked && ! isContentOnly;
 	const shouldShowBlockVisibilityIcon =
 		canToggleBlockVisibility && isBlockHidden;
@@ -123,7 +136,7 @@ function ListViewBlockSelectButton(
 		>
 			<ListViewExpander onClick={ onToggleExpanded } />
 			<BlockIcon
-				icon={ blockInformation?.icon }
+				icon={ hasPatternName ? symbol : blockInformation?.icon }
 				showColors
 				context="list-view"
 			/>
diff --git a/packages/block-editor/src/components/use-block-display-information/index.js b/packages/block-editor/src/components/use-block-display-information/index.js
@@ -9,6 +9,7 @@ import {
 	__experimentalGetBlockLabel as getBlockLabel,
 } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import { symbol } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -71,8 +72,11 @@ export default function useBlockDisplayInformation( clientId ) {
 			if ( ! clientId ) {
 				return null;
 			}
-			const { getBlockName, getBlockAttributes } =
-				select( blockEditorStore );
+			const {
+				getBlockName,
+				getBlockAttributes,
+				__experimentalGetParsedPattern,
+			} = select( blockEditorStore );
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
 			const blockName = getBlockName( clientId );
@@ -81,6 +85,30 @@ export default function useBlockDisplayInformation( clientId ) {
 				return null;
 			}
 			const attributes = getBlockAttributes( clientId );
+
+			// Check if this block is a pattern
+			const patternName = attributes?.metadata?.patternName;
+
+			if (
+				patternName &&
+				window?.__experimentalContentOnlyPatternInsertion
+			) {
+				const pattern = __experimentalGetParsedPattern( patternName );
+
+				const positionLabel = getPositionTypeLabel( attributes );
+				return {
+					isSynced: false,
+					title: __( 'Pattern' ),
+					icon: symbol,
+					description:
+						pattern?.description || __( 'A block pattern.' ),
+					anchor: attributes?.anchor,
+					positionLabel,
+					positionType: attributes?.style?.position?.type,
+					name: pattern?.title || attributes?.metadata?.name,
+				};
+			}
+
 			const match = getActiveBlockVariation( blockName, attributes );
 			const isSynced =
 				isReusableBlock( blockType ) || isTemplatePart( blockType );
