From b8fd20a2422347461fd8f8e1b10cf6480b9de0b1 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 12 Jun 2024 09:54:55 +0800 Subject: [PATCH] Fix showing double icons for connected blocks in pattern editor (#62317) Co-authored-by: kevin940726 Co-authored-by: talldan Co-authored-by: SantosGuillamot Co-authored-by: jasmussen Co-authored-by: richtabor Co-authored-by: ellatrix * Fix showing double icons for connected blocks in pattern editor * Fix post-meta * Unify the experience * Rename the component --- .../style.scss | 12 ---- .../src/components/block-switcher/index.js | 26 +++++++- .../src/components/block-switcher/style.scss | 5 ++ .../src/components/block-toolbar/index.js | 28 ++++++--- .../src/components/block-toolbar/style.scss | 15 +++-- .../index.js | 61 +++++++------------ .../style.scss | 12 ++++ packages/block-editor/src/style.scss | 2 +- 8 files changed, 94 insertions(+), 67 deletions(-) delete mode 100644 packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss rename packages/block-editor/src/components/{block-bindings-toolbar-indicator => pattern-overrides-toolbar-indicator}/index.js (62%) create mode 100644 packages/block-editor/src/components/pattern-overrides-toolbar-indicator/style.scss diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss b/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss deleted file mode 100644 index f37276290ca71..0000000000000 --- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/style.scss +++ /dev/null @@ -1,12 +0,0 @@ -.block-editor-block-bindings-toolbar-indicator__popover .components-popover__content { - min-width: 260px; - padding: $grid-unit-20; -} - -.block-editor-block-bindings-toolbar-indicator .block-editor-block-bindings-toolbar-indicator-icon.has-colors svg { - fill: var(--wp-block-synced-color); -} - -.editor-collapsible-block-toolbar .block-editor-block-bindings-toolbar-indicator { - height: 32px; -} diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 8b01907474d23..87970d53c19f4 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 2072616f7fb0f..5eaba08bf94ae 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 0e341d3216395..cffb46413c5bb 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -35,7 +35,7 @@ import { store as blockEditorStore } from '../../store'; import __unstableBlockNameContext from './block-name-context'; import NavigableToolbar from '../navigable-toolbar'; import Shuffle from './shuffle'; -import BlockBindingsIndicator from '../block-bindings-toolbar-indicator'; +import PatternOverridesToolbarIndicator from '../pattern-overrides-toolbar-indicator'; import { useHasBlockToolbar } from './use-has-block-toolbar'; import { canBindBlock } from '../../hooks/use-bindings-attributes'; /** @@ -67,11 +67,13 @@ export function PrivateBlockToolbar( { shouldShowVisualToolbar, showParentSelector, isUsingBindings, + hasParentPattern, } = useSelect( ( select ) => { const { getBlockName, getBlockMode, getBlockParents, + getBlockParentsByBlockName, getSelectedBlockClientIds, isBlockValid, getBlockRootClientId, @@ -94,8 +96,13 @@ export function PrivateBlockToolbar( { const isVisual = selectedBlockClientIds.every( ( id ) => getBlockMode( id ) === 'visual' ); - const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId ) - ?.metadata?.bindings; + const bindings = getBlockAttributes( selectedBlockClientId )?.metadata + ?.bindings; + const parentPatternClientId = getBlockParentsByBlockName( + selectedBlockClientId, + 'core/block', + true + )[ 0 ]; return { blockClientId: selectedBlockClientId, blockClientIds: selectedBlockClientIds, @@ -115,7 +122,8 @@ export function PrivateBlockToolbar( { ) && selectedBlockClientIds.length === 1 && _isDefaultEditingMode, - isUsingBindings: _isUsingBindings, + isUsingBindings: !! bindings, + hasParentPattern: !! parentPatternClientId, }; }, [] ); @@ -146,6 +154,7 @@ export function PrivateBlockToolbar( { const innerClasses = clsx( 'block-editor-block-toolbar', { 'is-synced': isSynced, + 'is-connected': isUsingBindings, } ); return ( @@ -167,9 +176,13 @@ export function PrivateBlockToolbar( { { ! isMultiToolbar && isLargeViewport && isDefaultEditingMode && } - { isUsingBindings && canBindBlock( blockName ) && ( - - ) } + { isUsingBindings && + hasParentPattern && + canBindBlock( blockName ) && ( + + ) } { ( shouldShowVisualToolbar || isMultiToolbar ) && ( isDefaultEditingMode || isSynced ) && (
{ isDefaultEditingMode && ( <> diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index 1854e44032964..6314f1a1e7ffd 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, diff --git a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js b/packages/block-editor/src/components/pattern-overrides-toolbar-indicator/index.js similarity index 62% rename from packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js rename to packages/block-editor/src/components/pattern-overrides-toolbar-indicator/index.js index e25c489c1dbf9..af359da542d37 100644 --- a/packages/block-editor/src/components/block-bindings-toolbar-indicator/index.js +++ b/packages/block-editor/src/components/pattern-overrides-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, @@ -20,15 +20,18 @@ import { store as blockEditorStore } from '../../store'; import BlockIcon from '../block-icon'; import useBlockDisplayTitle from '../block-title/use-block-display-title'; -export default function BlockBindingsToolbarIndicator( { clientIds } ) { +/** + * This component is currently only for pattern overrides, which is a WP-only feature. + * Ideally, this should be moved to the `patterns` package once ready. + * @param {Object} props The component props. + * @param {Array} props.clientIds The client IDs of the selected blocks. + */ +export default function PatternOverridesToolbarIndicator( { 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,16 +57,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 ] @@ -73,25 +66,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 ( @@ -99,18 +82,18 @@ export default function BlockBindingsToolbarIndicator( { clientIds } ) { { ( toggleProps ) => ( diff --git a/packages/block-editor/src/components/pattern-overrides-toolbar-indicator/style.scss b/packages/block-editor/src/components/pattern-overrides-toolbar-indicator/style.scss new file mode 100644 index 0000000000000..90b2c1cdd79a5 --- /dev/null +++ b/packages/block-editor/src/components/pattern-overrides-toolbar-indicator/style.scss @@ -0,0 +1,12 @@ +.block-editor-pattern-overrides-toolbar-indicator__popover .components-popover__content { + min-width: 260px; + padding: $grid-unit-20; +} + +.block-editor-pattern-overrides-toolbar-indicator .block-editor-pattern-overrides-toolbar-indicator-icon.has-colors svg { + fill: var(--wp-block-synced-color); +} + +.editor-collapsible-block-toolbar .block-editor-pattern-overrides-toolbar-indicator { + height: 32px; +} diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 484d79e8db9fa..d22ea9b3d0a28 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -1,6 +1,6 @@ @import "./autocompleters/style.scss"; @import "./components/block-alignment-control/style.scss"; -@import "./components/block-bindings-toolbar-indicator/style.scss"; +@import "./components/pattern-overrides-toolbar-indicator/style.scss"; @import "./components/block-canvas/style.scss"; @import "./components/block-icon/style.scss"; @import "./components/block-inspector/style.scss";