Only show focus on editor region with focus-visible

WordPress · Jun 14, 2024 · 7bd83cf · 7bd83cf
1 parent 533b66e
commit 7bd83cf
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { dragHandle, trash } from '@wordpress/icons';
 import { Button, Flex, FlexItem, ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect, useRef } from '@wordpress/element';
+import { forwardRef, useEffect } from '@wordpress/element';
 import {
 	BACKSPACE,
 	DELETE,
@@ -48,10 +48,11 @@ import Shuffle from '../block-toolbar/shuffle';
  *
  * @param {string} props          Component props.
  * @param {string} props.clientId Client ID of block.
+ * @param {Object} ref            Reference to the component.
  *
  * @return {Component} The component to be rendered.
  */
-function BlockSelectionButton( { clientId, rootClientId } ) {
+function BlockSelectionButton( { clientId, rootClientId }, ref ) {
 	const selected = useSelect(
 		( select ) => {
 			const {
@@ -125,7 +126,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 		canMove,
 	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
-	const ref = useRef();
 
 	// Focus the breadcrumb in navigation mode.
 	useEffect( () => {
@@ -363,4 +363,4 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 	);
 }
 
-export default BlockSelectionButton;
+export default forwardRef( BlockSelectionButton );
diff --git a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js b/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js
@@ -3,6 +3,11 @@
  */
 import clsx from 'clsx';
 
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -11,10 +16,7 @@ import { PrivateBlockPopover } from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import useSelectedBlockToolProps from './use-selected-block-tool-props';
 
-export default function BlockToolbarBreadcrumb( {
-	clientId,
-	__unstableContentRef,
-} ) {
+function BlockToolbarBreadcrumb( { clientId, __unstableContentRef }, ref ) {
 	const {
 		capturingClientId,
 		isInsertionPointVisible,
@@ -38,9 +40,12 @@ export default function BlockToolbarBreadcrumb( {
 			{ ...popoverProps }
 		>
 			<BlockSelectionButton
+				ref={ ref }
 				clientId={ clientId }
 				rootClientId={ rootClientId }
 			/>
 		</PrivateBlockPopover>
 	);
 }
+
+export default forwardRef( BlockToolbarBreadcrumb );
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -93,6 +93,8 @@ export default function BlockTools( {
 		expandBlock,
 	} = unlock( useDispatch( blockEditorStore ) );
 
+	const blockSelectionButtonRef = useRef();
+
 	function onKeyDown( event ) {
 		if ( event.defaultPrevented ) {
 			return;
@@ -153,7 +155,10 @@ export default function BlockTools( {
 				// block so that focus is directed back to the beginning of the selection.
 				// In effect, to the user this feels like deselecting the multi-selection.
 				selectBlock( clientIds[ 0 ] );
-			} else if ( clientIds.length === 1 ) {
+			} else if (
+				clientIds.length === 1 &&
+				event.target === blockSelectionButtonRef?.current
+			) {
 				event.preventDefault();
 				clearSelectedBlock();
 
@@ -204,7 +209,6 @@ export default function BlockTools( {
 			}
 		}
 	}
-
 	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
 	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );
 
@@ -235,6 +239,7 @@ export default function BlockTools( {
 
 				{ showBreadcrumb && (
 					<BlockToolbarBreadcrumb
+						ref={ blockSelectionButtonRef }
 						__unstableContentRef={ __unstableContentRef }
 						clientId={ clientId }
 					/>

diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -3,7 +3,7 @@
 	position: relative;
 
 	// Handles the focus when we programatically send focus to this region
-	&:focus-visible::after {
+	&.interface-interface-skeleton__content:focus-visible::after {
 		position: absolute;
 		top: 0;
 		left: 0;