Fix showing double icons for connected blocks in pattern editor (#62317)

Co-authored-by: kevin940726 <kevin940726@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org> * Fix showing double icons for connected blocks in pattern editor * Fix post-meta * Unify the experience * Rename the component
WordPress · Jun 18, 2024 · fa06a7f · fa06a7f
1 parent 2b2e12c
commit fa06a7f
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 67 deletions.
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
diff --git 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( {
 			</p>
 		);
 	}
+
+	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 (
 		<div className="block-editor-block-switcher__container">
 			{ hasPatternTransformation && (
@@ -156,11 +170,18 @@ function BlockSwitcherDropdownMenuContents( {
 					onSwitch={ onClose }
 				/>
 			) }
+			{ isUsingBindings && (
+				<MenuGroup>
+					<Text className="block-editor-block-switcher__binding-indicator">
+						{ connectedBlockDescription }
+					</Text>
+				</MenuGroup>
+			) }
 		</div>
 	);
 }
 
-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 }
 							/>
 						) }
 					</DropdownMenu>

diff --git 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
@@ -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 && <BlockParentSelector /> }
-				{ isUsingBindings && canBindBlock( blockName ) && (
-					<BlockBindingsIndicator clientIds={ blockClientIds } />
-				) }
+				{ isUsingBindings &&
+					hasParentPattern &&
+					canBindBlock( blockName ) && (
+						<PatternOverridesToolbarIndicator
+							clientIds={ blockClientIds }
+						/>
+					) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					( isDefaultEditingMode || isSynced ) && (
 						<div
@@ -180,6 +193,7 @@ export function PrivateBlockToolbar( {
 								<BlockSwitcher
 									clientIds={ blockClientIds }
 									disabled={ ! isDefaultEditingMode }
+									isUsingBindings={ isUsingBindings }
 								/>
 								{ isDefaultEditingMode && (
 									<>

diff --git 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/...block-bindings-toolbar-indicator/index.js → ...tern-overrides-toolbar-indicator/index.js b/...block-bindings-toolbar-indicator/index.js → ...tern-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,44 +66,34 @@ 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 (
 		<ToolbarGroup>
 			<ToolbarItem>
 				{ ( toggleProps ) => (
 					<DropdownMenu
-						className="block-editor-block-bindings-toolbar-indicator"
+						className="block-editor-pattern-overrides-toolbar-indicator"
 						label={ firstBlockTitle }
 						popoverProps={ {
 							placement: 'bottom-start',
 							className:
-								'block-editor-block-bindings-toolbar-indicator__popover',
+								'block-editor-pattern-overrides-toolbar-indicator__popover',
 						} }
 						icon={
 							<>
 								<BlockIcon
 									icon={ icon }
-									className="block-editor-block-bindings-toolbar-indicator-icon"
+									className="block-editor-pattern-overrides-toolbar-indicator-icon"
 									showColors
 								/>
 							</>

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
@@ -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
@@ -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";