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 );