From 1b51b081a5894f565f53c8c09cd74513b9c71130 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Fri, 7 Jun 2024 17:53:09 +0800 Subject: [PATCH] Unify the experience --- .../block-bindings-toolbar-indicator/index.js | 45 +++++-------------- .../src/components/block-switcher/index.js | 26 ++++++++++- .../src/components/block-switcher/style.scss | 5 +++ .../src/components/block-toolbar/index.js | 15 +++---- .../src/components/block-toolbar/style.scss | 15 ++++--- 5 files changed, 55 insertions(+), 51 deletions(-) diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js index bc04593f7ed2a6..f1b74a8437c205 100644 --- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js +++ b/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useId } from '@wordpress/element'; -import { __, sprintf, _x } from '@wordpress/i18n'; +import { __, sprintf } from '@wordpress/i18n'; import { DropdownMenu, ToolbarGroup, @@ -22,13 +22,10 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title'; export default function BlockBindingsToolbarIndicator( { clientIds } ) { const isSingleBlockSelected = clientIds.length === 1; - const { icon, firstBlockName, isConnectedToPatternOverrides } = useSelect( + const { icon, firstBlockName } = useSelect( ( select ) => { - const { - getBlockAttributes, - getBlockNamesByClientId, - getBlocksByClientId, - } = select( blockEditorStore ); + const { getBlockAttributes, getBlockNamesByClientId } = + select( blockEditorStore ); const { getBlockType, getActiveBlockVariation } = select( blocksStore ); const blockTypeNames = getBlockNamesByClientId( clientIds ); @@ -54,14 +51,6 @@ export default function BlockBindingsToolbarIndicator( { clientIds } ) { icon: _icon, firstBlockName: getBlockAttributes( clientIds[ 0 ] ).metadata .name, - isConnectedToPatternOverrides: getBlocksByClientId( - clientIds - ).some( ( block ) => - Object.values( block?.attributes.metadata?.bindings ).some( - ( binding ) => - binding.source === 'core/pattern-overrides' - ) - ), }; }, [ clientIds, isSingleBlockSelected ] @@ -71,25 +60,15 @@ export default function BlockBindingsToolbarIndicator( { clientIds } ) { maximumLength: 35, } ); - let blockDescription = isSingleBlockSelected - ? _x( - 'This block is connected.', - 'block toolbar button label and description' + const blockDescription = isSingleBlockSelected + ? sprintf( + /* translators: %1s: The block type's name; %2s: The block's user-provided name (the same as the override name). */ + __( 'This %1$s is editable using the "%2$s" override.' ), + firstBlockTitle.toLowerCase(), + firstBlockName ) - : _x( - 'These blocks are connected.', - 'block toolbar button label and description' - ); - if ( isConnectedToPatternOverrides && firstBlockName ) { - blockDescription = isSingleBlockSelected - ? sprintf( - /* translators: %1s: The block type's name; %2s: The block's user-provided name (the same as the override name). */ - __( 'This %1$s is editable using the "%2$s" override.' ), - firstBlockTitle.toLowerCase(), - firstBlockName - ) - : __( 'These blocks are editable using overrides.' ); - } + : __( 'These blocks are editable using overrides.' ); + const descriptionId = useId(); return ( diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 8b01907474d23a..87970d53c19f42 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -1,12 +1,14 @@ /** * WordPress dependencies */ -import { __, _n, sprintf } from '@wordpress/i18n'; +import { __, _n, sprintf, _x } from '@wordpress/i18n'; import { DropdownMenu, ToolbarButton, ToolbarGroup, ToolbarItem, + __experimentalText as Text, + MenuGroup, } from '@wordpress/components'; import { switchToBlockType, @@ -33,6 +35,7 @@ function BlockSwitcherDropdownMenuContents( { clientIds, hasBlockStyles, canRemove, + isUsingBindings, } ) { const { replaceBlocks, multiSelect, updateBlockAttributes } = useDispatch( blockEditorStore ); @@ -118,6 +121,17 @@ function BlockSwitcherDropdownMenuContents( {

); } + + const connectedBlockDescription = isSingleBlock + ? _x( + 'This block is connected.', + 'block toolbar button label and description' + ) + : _x( + 'These blocks are connected.', + 'block toolbar button label and description' + ); + return (
{ hasPatternTransformation && ( @@ -156,11 +170,18 @@ function BlockSwitcherDropdownMenuContents( { onSwitch={ onClose } /> ) } + { isUsingBindings && ( + + + { connectedBlockDescription } + + + ) }
); } -export const BlockSwitcher = ( { clientIds, disabled } ) => { +export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => { const { canRemove, hasBlockStyles, @@ -303,6 +324,7 @@ export const BlockSwitcher = ( { clientIds, disabled } ) => { clientIds={ clientIds } hasBlockStyles={ hasBlockStyles } canRemove={ canRemove } + isUsingBindings={ isUsingBindings } /> ) } diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss index 2072616f7fb0f7..5eaba08bf94ae2 100644 --- a/packages/block-editor/src/components/block-switcher/style.scss +++ b/packages/block-editor/src/components/block-switcher/style.scss @@ -203,3 +203,8 @@ padding: 6px $grid-unit; margin: 0; } + +.block-editor-block-switcher__binding-indicator { + display: block; + padding: $grid-unit; +} diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index a89e264e009350..b215b06e5fdeee 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -67,7 +67,7 @@ export function PrivateBlockToolbar( { shouldShowVisualToolbar, showParentSelector, isUsingBindings, - isNotInPatternOverridesContext, + hasParentPattern, } = useSelect( ( select ) => { const { getBlockName, @@ -103,12 +103,6 @@ export function PrivateBlockToolbar( { 'core/block', true )[ 0 ]; - const _isNotInPatternOverridesContext = - !! bindings && - Object.values( bindings ).some( - ( binding ) => binding.source === 'core/pattern-overrides' - ) && - ! parentPatternClientId; return { blockClientId: selectedBlockClientId, blockClientIds: selectedBlockClientIds, @@ -129,7 +123,7 @@ export function PrivateBlockToolbar( { selectedBlockClientIds.length === 1 && _isDefaultEditingMode, isUsingBindings: !! bindings, - isNotInPatternOverridesContext: _isNotInPatternOverridesContext, + hasParentPattern: !! parentPatternClientId, }; }, [] ); @@ -160,6 +154,7 @@ export function PrivateBlockToolbar( { const innerClasses = clsx( 'block-editor-block-toolbar', { 'is-synced': isSynced, + 'is-connected': isUsingBindings, } ); return ( @@ -182,8 +177,7 @@ export function PrivateBlockToolbar( { isLargeViewport && isDefaultEditingMode && } { isUsingBindings && - // Don't show the indicator if the block connected to pattern overrides but not inside a pattern instance. - ! isNotInPatternOverridesContext && + hasParentPattern && canBindBlock( blockName ) && ( ) } @@ -197,6 +191,7 @@ export function PrivateBlockToolbar( { { isDefaultEditingMode && ( <> diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 1854e440329647..6314f1a1e7ffd5 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -39,14 +39,17 @@ border-right: $border-width solid $gray-300; } - &.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon { - color: var(--wp-block-synced-color); - } - - &.is-synced .components-toolbar-button.block-editor-block-switcher__no-switcher-icon { - &:disabled .block-editor-block-icon.has-colors { + &.is-synced, + &.is-connected { + .block-editor-block-switcher .components-button .block-editor-block-icon { color: var(--wp-block-synced-color); } + + .components-toolbar-button.block-editor-block-switcher__no-switcher-icon { + &:disabled .block-editor-block-icon.has-colors { + color: var(--wp-block-synced-color); + } + } } > :last-child,