From 744a165be68e56510fdd945867e736b7fbb23f15 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 5 Jun 2024 15:16:38 +0800 Subject: [PATCH 1/4] Fix showing double icons for connected blocks in pattern editor --- .../src/components/block-toolbar/index.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 0e341d3216395..9790cafdc1861 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -67,11 +67,13 @@ export function PrivateBlockToolbar( { shouldShowVisualToolbar, showParentSelector, isUsingBindings, + hasPatternOverrides, } = useSelect( ( select ) => { const { getBlockName, getBlockMode, getBlockParents, + getBlockParentsByBlockName, getSelectedBlockClientIds, isBlockValid, getBlockRootClientId, @@ -96,6 +98,11 @@ export function PrivateBlockToolbar( { ); const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId ) ?.metadata?.bindings; + const parentPatternClientId = getBlockParentsByBlockName( + selectedBlockClientId, + 'core/block', + true + )[ 0 ]; return { blockClientId: selectedBlockClientId, blockClientIds: selectedBlockClientIds, @@ -116,6 +123,7 @@ export function PrivateBlockToolbar( { selectedBlockClientIds.length === 1 && _isDefaultEditingMode, isUsingBindings: _isUsingBindings, + hasPatternOverrides: !! parentPatternClientId, }; }, [] ); @@ -167,9 +175,11 @@ export function PrivateBlockToolbar( { { ! isMultiToolbar && isLargeViewport && isDefaultEditingMode && } - { isUsingBindings && canBindBlock( blockName ) && ( - - ) } + { isUsingBindings && + hasPatternOverrides && + canBindBlock( blockName ) && ( + + ) } { ( shouldShowVisualToolbar || isMultiToolbar ) && ( isDefaultEditingMode || isSynced ) && (
Date: Wed, 5 Jun 2024 17:00:57 +0800 Subject: [PATCH 2/4] Fix post-meta --- .../src/components/block-toolbar/index.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 9790cafdc1861..a89e264e00935 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, - hasPatternOverrides, + isNotInPatternOverridesContext, } = useSelect( ( select ) => { const { getBlockName, @@ -96,13 +96,19 @@ 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 ]; + const _isNotInPatternOverridesContext = + !! bindings && + Object.values( bindings ).some( + ( binding ) => binding.source === 'core/pattern-overrides' + ) && + ! parentPatternClientId; return { blockClientId: selectedBlockClientId, blockClientIds: selectedBlockClientIds, @@ -122,8 +128,8 @@ export function PrivateBlockToolbar( { ) && selectedBlockClientIds.length === 1 && _isDefaultEditingMode, - isUsingBindings: _isUsingBindings, - hasPatternOverrides: !! parentPatternClientId, + isUsingBindings: !! bindings, + isNotInPatternOverridesContext: _isNotInPatternOverridesContext, }; }, [] ); @@ -176,7 +182,8 @@ export function PrivateBlockToolbar( { isLargeViewport && isDefaultEditingMode && } { isUsingBindings && - hasPatternOverrides && + // Don't show the indicator if the block connected to pattern overrides but not inside a pattern instance. + ! isNotInPatternOverridesContext && canBindBlock( blockName ) && ( ) } From c8624896c8513847662990ba3950aa2daae8d6a6 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Fri, 7 Jun 2024 17:53:09 +0800 Subject: [PATCH 3/4] Unify the experience --- .../block-bindings-toolbar-indicator/index.js | 47 +++++-------------- .../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(+), 53 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 e25c489c1dbf9..f1b74a8437c20 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,16 +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 ] @@ -73,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 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 a89e264e00935..b215b06e5fdee 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 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, From 72d0a8e32cbb9086451604807281f18efdfb78b0 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Tue, 11 Jun 2024 15:51:38 +0800 Subject: [PATCH 4/4] Rename the component --- .../block-bindings-toolbar-indicator/style.scss | 12 ------------ .../src/components/block-toolbar/index.js | 6 ++++-- .../index.js | 14 ++++++++++---- .../pattern-overrides-toolbar-indicator/style.scss | 12 ++++++++++++ packages/block-editor/src/style.scss | 2 +- 5 files changed, 27 insertions(+), 19 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 (83%) 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-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index b215b06e5fdee..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'; /** @@ -179,7 +179,9 @@ export function PrivateBlockToolbar( { { isUsingBindings && hasParentPattern && canBindBlock( blockName ) && ( - + ) } { ( shouldShowVisualToolbar || isMultiToolbar ) && ( isDefaultEditingMode || isSynced ) && ( 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 83% 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 f1b74a8437c20..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 @@ -20,7 +20,13 @@ 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 } = useSelect( ( select ) => { @@ -76,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";