Unify the experience

WordPress · Jun 7, 2024 · c862489 · c862489
1 parent d7cc674
commit c862489
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 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
@@ -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
@@ -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
@@ -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 && <BlockParentSelector /> }
 				{ isUsingBindings &&
-					// Don't show the indicator if the block connected to pattern overrides but not inside a pattern instance.
-					! isNotInPatternOverridesContext &&
+					hasParentPattern &&
 					canBindBlock( blockName ) && (
 						<BlockBindingsIndicator clientIds={ blockClientIds } />
 					) }
@@ -197,6 +191,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,