Block switcher refactor to hopefully reduce chance of focus loss

WordPress · Aug 26, 2024 · c6a3b3d · c6a3b3d
1 parent a3456f9
commit c6a3b3d
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 70 deletions.
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
@@ -3,8 +3,8 @@
  */
 import { __, _n, sprintf, _x } from '@wordpress/i18n';
 import {
+	Button,
 	DropdownMenu,
-	ToolbarButton,
 	ToolbarGroup,
 	ToolbarItem,
 	__experimentalText as Text,
@@ -247,27 +247,18 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 		: __( 'Multiple blocks selected' );
 
 	const hideDropdown = disabled || ( ! hasBlockStyles && ! canRemove );
-	if ( hideDropdown ) {
+	const BlockIndicator = () => {
 		return (
-			<ToolbarGroup>
-				<ToolbarButton
-					disabled
-					className="block-editor-block-switcher__no-switcher-icon"
-					title={ blockSwitcherLabel }
-					icon={
-						<>
-							<BlockIcon icon={ icon } showColors />
-							{ ( isReusable || isTemplate ) && (
-								<span className="block-editor-block-switcher__toggle-text">
-									{ blockTitle }
-								</span>
-							) }
-						</>
-					}
-				/>
-			</ToolbarGroup>
+			<>
+				<BlockIcon icon={ icon } showColors />
+				{ ( isReusable || isTemplate ) && (
+					<span className="block-editor-block-switcher__toggle-text">
+						{ blockTitle }
+					</span>
+				) }
+			</>
 		);
-	}
+	};
 
 	const blockSwitcherDescription = isSingleBlock
 		? __( 'Change block type or style' )
@@ -280,49 +271,51 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
 				),
 				clientIds.length
 		  );
+
+	const noBlockSwitcher = () => {
+		return (
+			<Button className="block-editor-block-switcher__no-switcher-icon">
+				<BlockIndicator />
+			</Button>
+		);
+	};
+
+	const BlockSwitcherDropdown = ( { toggleProps } ) => {
+		return (
+			<DropdownMenu
+				className="block-editor-block-switcher"
+				label={ blockSwitcherLabel }
+				popoverProps={ {
+					placement: 'bottom-start',
+					className: 'block-editor-block-switcher__popover',
+				} }
+				icon={ <BlockIndicator /> }
+				toggleProps={ {
+					description: blockSwitcherDescription,
+					...toggleProps,
+				} }
+				menuProps={ { orientation: 'both' } }
+			>
+				{ ( { onClose } ) => (
+					<BlockSwitcherDropdownMenuContents
+						onClose={ onClose }
+						clientIds={ clientIds }
+						hasBlockStyles={ hasBlockStyles }
+						canRemove={ canRemove }
+						isUsingBindings={ isUsingBindings }
+					/>
+				) }
+			</DropdownMenu>
+		);
+	};
+
 	return (
 		<ToolbarGroup>
-			<ToolbarItem>
-				{ ( toggleProps ) => (
-					<DropdownMenu
-						className="block-editor-block-switcher"
-						label={ blockSwitcherLabel }
-						popoverProps={ {
-							placement: 'bottom-start',
-							className: 'block-editor-block-switcher__popover',
-						} }
-						icon={
-							<>
-								<BlockIcon
-									icon={ icon }
-									className="block-editor-block-switcher__toggle"
-									showColors
-								/>
-								{ ( isReusable || isTemplate ) && (
-									<span className="block-editor-block-switcher__toggle-text">
-										{ blockTitle }
-									</span>
-								) }
-							</>
-						}
-						toggleProps={ {
-							description: blockSwitcherDescription,
-							...toggleProps,
-						} }
-						menuProps={ { orientation: 'both' } }
-					>
-						{ ( { onClose } ) => (
-							<BlockSwitcherDropdownMenuContents
-								onClose={ onClose }
-								clientIds={ clientIds }
-								hasBlockStyles={ hasBlockStyles }
-								canRemove={ canRemove }
-								isUsingBindings={ isUsingBindings }
-							/>
-						) }
-					</DropdownMenu>
-				) }
-			</ToolbarItem>
+			<ToolbarItem
+				disabled={ disabled || hideDropdown }
+				accessibleWhenDisabled
+				as={ hideDropdown ? noBlockSwitcher : BlockSwitcherDropdown }
+			/>
 		</ToolbarGroup>
 	);
 };

diff --git a/packages/block-editor/src/components/block-switcher/style.scss b/packages/block-editor/src/components/block-switcher/style.scss
@@ -16,7 +16,7 @@
 }
 
 .components-button.block-editor-block-switcher__toggle,
-.components-button.block-editor-block-switcher__no-switcher-icon {
+.block-editor-block-switcher__no-switcher-icon {
 	margin: 0;
 	display: block;
 	height: $grid-unit-60;
@@ -35,8 +35,10 @@
 	}
 }
 
-.components-button.block-editor-block-switcher__no-switcher-icon {
+.block-editor-block-switcher__no-switcher-icon {
 	display: flex;
+	align-items: center;
+	justify-content: center;
 
 	.block-editor-block-icon {
 		margin-right: auto;
@@ -46,7 +48,7 @@
 }
 
 // Even when the block switcher does not have any transformations, it still serves as a block indicator.
-.components-button.block-editor-block-switcher__no-switcher-icon:disabled {
+.components-dropdown-menu__toggle:disabled {
 	opacity: 1;
 
 	// Since it's not clickable, though, don't show a hover state.
@@ -58,8 +60,8 @@
 
 // Style this the same as the block buttons in the library.
 // Needs specificity to override the icon button.
-.block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon,
-.block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__no-switcher-icon.has-icon.has-icon,
+.block-editor-block-toolbar .components-toolbar-group .block-editor-block-switcher__no-switcher-icon.has-icon.has-icon,
+.block-editor-block-toolbar .components-toolbar .block-editor-block-switcher__no-switcher-icon.has-icon.has-icon,
 .block-editor-block-toolbar .components-toolbar-group .components-button.block-editor-block-switcher__toggle.has-icon.has-icon,
 .block-editor-block-toolbar .components-toolbar .components-button.block-editor-block-switcher__toggle.has-icon.has-icon {
 	.block-editor-block-icon {
@@ -130,11 +132,8 @@
 
 // The block switcher in the contextual toolbar should be bigger.
 .block-editor-block-contextual-toolbar {
-	.components-button.block-editor-block-switcher__no-switcher-icon {
-		min-width: $button-size;
-	}
 
-	.components-button.block-editor-block-switcher__no-switcher-icon,
+	.block-editor-block-switcher__no-switcher-icon,
 	.components-button.block-editor-block-switcher__toggle {
 		height: $grid-unit-60;