Block Toolbar: Don't use effects for focus management (#50497)

packages/block-editor/src/components/block-tools/block-contextual-toolbar.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
@@ -26,53 +26,12 @@ import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 
-const CollapseFixedToolbarButton = forwardRef( ( { onClick }, ref ) => {
-	return (
-		<ToolbarItem
-			as={ ToolbarButton }
-			className="block-editor-block-toolbar__collapse-fixed-toolbar"
-			icon={ levelUp }
-			onClick={ onClick }
-			ref={ ref }
-			label={ __( 'Show document tools' ) }
-		/>
-	);
-} );
-
-const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => {
-	return (
-		<ToolbarItem
-			as={ ToolbarButton }
-			className="block-editor-block-toolbar__expand-fixed-toolbar"
-			icon={ <BlockIcon icon={ icon } /> }
-			onClick={ onClick }
-			ref={ ref }
-			label={ __( 'Show block tools' ) }
-		/>
-	);
-} );
-
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	// When the toolbar is fixed it can be collapsed
 	const [ isCollapsed, setIsCollapsed ] = useState( false );
-	const expandFixedToolbarButtonRef = useRef();
-	const collapseFixedToolbarButtonRef = useRef();
-
-	// Don't focus the block toolbar just because it mounts
-	const initialRender = useRef( true );
-	useEffect( () => {
-		if ( initialRender.current ) {
-			initialRender.current = false;
-			return;
-		}
-		if ( isCollapsed && expandFixedToolbarButtonRef.current ) {
-			expandFixedToolbarButtonRef.current.focus();
-		}
-		if ( ! isCollapsed && collapseFixedToolbarButtonRef.current ) {
-			collapseFixedToolbarButtonRef.current.focus();
-		}
-	}, [ isCollapsed ] );
+	const toolbarButtonRef = useRef();
 
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const { blockType, hasParents, showParentSelector, selectedBlockClientId } =
 		useSelect( ( select ) => {
 			const {
@@ -113,12 +72,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 		setIsCollapsed( false );
 	}, [ selectedBlockClientId ] );
 
-	const isLargeViewport = useViewportMatch( 'medium' );
-
-	if ( blockType ) {
-		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
-			return null;
-		}
+	if (
+		blockType &&
+		! hasBlockSupport( blockType, '__experimentalToolbar', true )
+	) {
+		return null;
 	}
 
 	// Shifts the toolbar to make room for the parent block selector.
@@ -144,18 +102,26 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 							: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'
 					}
 				>
-					{ isCollapsed ? (
-						<ExpandFixedToolbarButton
-							onClick={ () => setIsCollapsed( false ) }
-							icon={ blockType.icon }
-							ref={ expandFixedToolbarButtonRef }
-						/>
-					) : (
-						<CollapseFixedToolbarButton
-							onClick={ () => setIsCollapsed( true ) }
-							ref={ collapseFixedToolbarButtonRef }
-						/>
-					) }
+					<ToolbarItem
+						as={ ToolbarButton }
+						ref={ toolbarButtonRef }
+						icon={
+							isCollapsed ? (
+								<BlockIcon icon={ blockType.icon } />
+							) : (
+								levelUp
+							)
+						}
+						onClick={ () => {
+							setIsCollapsed( ( collapsed ) => ! collapsed );
+							toolbarButtonRef.current.focus();
+						} }
+						label={
+							isCollapsed
+								? __( 'Show block tools' )
+								: __( 'Show document tools' )
+						}
+					/>
 				</ToolbarGroup>
 			) }
 			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }