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
index 7c0466e1540fcd..96de09b5ead325 100644
--- 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
index 4af990aeb1680e..4b3f191c54f474 100644
--- 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(
>
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
index 0da99d415f53f1..505e5d92905b31 100644
--- 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 );