Remove extraneous content from block switcher aria menu

packages/block-editor/src/components/block-card/index.js

@@ -14,7 +14,7 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, _x, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -35,22 +35,35 @@ function BlockCard( { title, icon, description, blockType, className, name } ) {
 		( { title, icon, description } = blockType );
 	}
 
-	const { parentNavBlockClientId } = useSelect( ( select ) => {
-		const { getSelectedBlockClientId, getBlockParentsByBlockName } =
-			select( blockEditorStore );
+	const { parentNavBlockClientId, isUsingBindings } = useSelect(
+		( select ) => {
+			const {
+				getSelectedBlockClientId,
+				getSelectedBlockClientIds,
+				getBlockParentsByBlockName,
+				getBlockAttributes,
+			} = select( blockEditorStore );
 
-		const _selectedBlockClientId = getSelectedBlockClientId();
+			const _selectedBlockClientId = getSelectedBlockClientId();
+			const _selectedBlockClientIds = getSelectedBlockClientIds();
 
-		return {
-			parentNavBlockClientId: getBlockParentsByBlockName(
-				_selectedBlockClientId,
-				'core/navigation',
-				true
-			)[ 0 ],
-		};
-	}, [] );
+			return {
+				parentNavBlockClientId: getBlockParentsByBlockName(
+					_selectedBlockClientId,
+					'core/navigation',
+					true
+				)[ 0 ],
+				isUsingBindings: _selectedBlockClientIds.every(
+					( clientId ) =>
+						!! getBlockAttributes( clientId )?.metadata?.bindings
+				),
+			};
+		},
+		[]
+	);
 
 	const { selectBlock } = useDispatch( blockEditorStore );
+	const hasCustomName = !! name?.length;
 
 	return (
 		<div className={ clsx( 'block-editor-block-card', className ) }>
@@ -68,15 +81,26 @@ function BlockCard( { title, icon, description, blockType, className, name } ) {
 				/>
 			) }
 			<BlockIcon icon={ icon } showColors />
-			<VStack spacing={ 1 }>
+			<VStack spacing={ hasCustomName || isUsingBindings ? 2 : 1 }>
 				<h2 className="block-editor-block-card__title">
 					<span className="block-editor-block-card__name">
-						{ !! name?.length ? name : title }
+						{ hasCustomName ? name : title }
 					</span>
-					{ !! name?.length && <Badge>{ title }</Badge> }
+					{ hasCustomName && <Badge>{ title }</Badge> }
+					{ isUsingBindings && (
+						<Badge>
+							{ _x(
+								'Connected',
+								'block connected to a bound source'
+							) }
+						</Badge>
+					) }
 				</h2>
 				{ description && (
-					<Text className="block-editor-block-card__description">
+					<Text
+						as="p"
+						className="block-editor-block-card__description"
+					>
 						{ description }
 					</Text>
 				) }

packages/block-editor/src/components/block-card/style.scss

@@ -34,4 +34,3 @@
 .block-editor-block-card.is-synced .block-editor-block-icon {
 	color: var(--wp-block-synced-color);
 }
-

packages/block-editor/src/components/block-switcher/index.js

@@ -1,14 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { __, _n, sprintf, _x } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import {
 	DropdownMenu,
 	ToolbarButton,
 	ToolbarGroup,
 	ToolbarItem,
-	__experimentalText as Text,
-	MenuGroup,
 } from '@wordpress/components';
 import {
 	switchToBlockType,
@@ -35,45 +33,16 @@ function BlockSwitcherDropdownMenuContents( {
 	onClose,
 	clientIds,
 	hasBlockStyles,
-	canRemove,
+	patterns,
+	blocks,
+	possibleBlockTransformations,
+	blockVariationTransformations,
+	hasPatternTransformation,
+	hasBlockOrBlockVariationTransforms,
 } ) {
 	const { replaceBlocks, multiSelect, updateBlockAttributes } =
 		useDispatch( blockEditorStore );
-	const { possibleBlockTransformations, patterns, blocks, isUsingBindings } =
-		useSelect(
-			( select ) => {
-				const {
-					getBlockAttributes,
-					getBlocksByClientId,
-					getBlockRootClientId,
-					getBlockTransformItems,
-					__experimentalGetPatternTransformItems,
-				} = select( blockEditorStore );
-				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
-				const _blocks = getBlocksByClientId( clientIds );
-				return {
-					blocks: _blocks,
-					possibleBlockTransformations: getBlockTransformItems(
-						_blocks,
-						rootClientId
-					),
-					patterns: __experimentalGetPatternTransformItems(
-						_blocks,
-						rootClientId
-					),
-					isUsingBindings: clientIds.every(
-						( clientId ) =>
-							!! getBlockAttributes( clientId )?.metadata
-								?.bindings
-					),
-				};
-			},
-			[ clientIds ]
-		);
-	const blockVariationTransformations = useBlockVariationTransforms( {
-		clientIds,
-		blocks,
-	} );
+
 	function selectForMultipleBlocks( insertedBlocks ) {
 		if ( insertedBlocks.length > 1 ) {
 			multiSelect(
@@ -100,42 +69,6 @@ function BlockSwitcherDropdownMenuContents( {
 		replaceBlocks( clientIds, transformedBlocks );
 		selectForMultipleBlocks( transformedBlocks );
 	}
-	/**
-	 * The `isTemplate` check is a stopgap solution here.
-	 * Ideally, the Transforms API should handle this
-	 * by allowing to exclude blocks from wildcard transformations.
-	 */
-	const isSingleBlock = blocks.length === 1;
-	const isTemplate = isSingleBlock && isTemplatePart( blocks[ 0 ] );
-	const hasPossibleBlockTransformations =
-		!! possibleBlockTransformations.length && canRemove && ! isTemplate;
-	const hasPossibleBlockVariationTransformations =
-		!! blockVariationTransformations?.length;
-	const hasPatternTransformation = !! patterns?.length && canRemove;
-	const hasBlockOrBlockVariationTransforms =
-		hasPossibleBlockTransformations ||
-		hasPossibleBlockVariationTransformations;
-	const hasContents =
-		hasBlockStyles ||
-		hasBlockOrBlockVariationTransforms ||
-		hasPatternTransformation;
-	if ( ! hasContents ) {
-		return (
-			<p className="block-editor-block-switcher__no-transforms">
-				{ __( 'No transforms.' ) }
-			</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">
@@ -175,13 +108,6 @@ function BlockSwitcherDropdownMenuContents( {
 					onSwitch={ onClose }
 				/>
 			) }
-			{ isUsingBindings && (
-				<MenuGroup>
-					<Text className="block-editor-block-switcher__binding-indicator">
-						{ connectedBlockDescription }
-					</Text>
-				</MenuGroup>
-			) }
 		</div>
 	);
 }
@@ -196,6 +122,9 @@ export const BlockSwitcher = ( { clientIds } ) => {
 		isReusable,
 		isTemplate,
 		isDisabled,
+		possibleBlockTransformations,
+		patterns,
+		blocks,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -204,6 +133,9 @@ export const BlockSwitcher = ( { clientIds } ) => {
 				getBlockAttributes,
 				canRemoveBlocks,
 				getBlockEditingMode,
+				getBlockRootClientId,
+				getBlockTransformItems,
+				__experimentalGetPatternTransformItems,
 			} = select( blockEditorStore );
 			const { getBlockStyles, getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
@@ -238,6 +170,8 @@ export const BlockSwitcher = ( { clientIds } ) => {
 				_icon = isSelectionOfSameType ? blockType.icon : copy;
 			}
 
+			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+
 			return {
 				canRemove: canRemoveBlocks( clientIds ),
 				hasBlockStyles:
@@ -250,6 +184,15 @@ export const BlockSwitcher = ( { clientIds } ) => {
 					_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
 				hasContentOnlyLocking: _hasTemplateLock,
 				isDisabled: editingMode !== 'default',
+				blocks: _blocks,
+				possibleBlockTransformations: getBlockTransformItems(
+					_blocks,
+					rootClientId
+				),
+				patterns: __experimentalGetPatternTransformItems(
+					_blocks,
+					rootClientId
+				),
 			};
 		},
 		[ clientIds ]
@@ -264,6 +207,11 @@ export const BlockSwitcher = ( { clientIds } ) => {
 		[]
 	);
 
+	const blockVariationTransformations = useBlockVariationTransforms( {
+		clientIds,
+		blocks,
+	} );
+
 	if ( invalidBlocks ) {
 		return null;
 	}
@@ -278,18 +226,34 @@ export const BlockSwitcher = ( { clientIds } ) => {
 			? blockTitle
 			: undefined;
 
+	const hideTooltip = blockSwitcherLabel === blockIndicatorText;
+
+	const hasPossibleBlockTransformations =
+		!! possibleBlockTransformations?.length && canRemove && ! isTemplate;
+	const hasPossibleBlockVariationTransformations =
+		!! blockVariationTransformations?.length;
+	const hasPatternTransformation = !! patterns?.length && canRemove;
+	const hasBlockOrBlockVariationTransforms =
+		hasPossibleBlockTransformations ||
+		hasPossibleBlockVariationTransformations;
+	const hasContents =
+		hasBlockStyles ||
+		hasBlockOrBlockVariationTransforms ||
+		hasPatternTransformation;
+
 	const hideDropdown =
 		isDisabled ||
 		( ! hasBlockStyles && ! canRemove ) ||
-		hasContentOnlyLocking;
+		hasContentOnlyLocking ||
+		! hasContents;
 
 	if ( hideDropdown ) {
 		return (
-			<ToolbarGroup>
+			<ToolbarGroup className="block-editor-block-switcher">
 				<ToolbarButton
 					disabled
 					className="block-editor-block-switcher__no-switcher-icon"
-					title={ blockSwitcherLabel }
+					title={ hideTooltip ? undefined : blockSwitcherLabel }
 					icon={
 						<BlockIcon
 							className="block-editor-block-switcher__toggle"
@@ -344,7 +308,20 @@ export const BlockSwitcher = ( { clientIds } ) => {
 								onClose={ onClose }
 								clientIds={ clientIds }
 								hasBlockStyles={ hasBlockStyles }
-								canRemove={ canRemove }
+								patterns={ patterns }
+								blocks={ blocks }
+								possibleBlockTransformations={
+									possibleBlockTransformations
+								}
+								blockVariationTransformations={
+									blockVariationTransformations
+								}
+								hasPatternTransformation={
+									hasPatternTransformation
+								}
+								hasBlockOrBlockVariationTransforms={
+									hasBlockOrBlockVariationTransforms
+								}
 							/>
 						) }
 					</DropdownMenu>

packages/block-editor/src/components/block-switcher/style.scss

@@ -160,8 +160,3 @@
 	padding: 6px $grid-unit;
 	margin: 0;
 }
-
-.block-editor-block-switcher__binding-indicator {
-	display: block;
-	padding: $grid-unit;
-}

packages/block-editor/src/components/block-switcher/test/index.js

@@ -149,34 +149,18 @@ describe( 'BlockSwitcher', () => {
 		expect( blockSwitcher ).toHaveAttribute( 'aria-disabled', 'true' );
 	} );
 
-	test( 'should render message for no available transforms', async () => {
+	test( 'should render accessibly disabled block switcher when there are no available transforms', async () => {
 		useSelect.mockImplementation( () => ( {
 			possibleBlockTransformations: [],
 			blocks: [ headingBlock1 ],
 			icon: copy,
 			canRemove: true,
 		} ) );
 		render( <BlockSwitcher clientIds={ [ headingBlock1.clientId ] } /> );
-		const user = userEvent.setup();
-		await user.type(
-			screen.getByRole( 'button', {
-				name: 'Block Name',
-				expanded: false,
-			} ),
-			'[ArrowDown]'
-		);
-		await waitFor( () =>
-			expect(
-				screen.getByRole( 'button', {
-					name: 'Block Name',
-					expanded: true,
-				} )
-			).toBeVisible()
-		);
-		expect(
-			screen.getByRole( 'menu', {
-				name: 'Block Name',
-			} )
-		).toHaveTextContent( 'No transforms.' );
+		const blockSwitcher = screen.getByRole( 'button', {
+			name: 'Block Name',
+		} );
+		expect( blockSwitcher ).toBeEnabled();
+		expect( blockSwitcher ).toHaveAttribute( 'aria-disabled', 'true' );
 	} );
 } );