diff --git a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js index c8eee6b48cbd40..385b120c352d22 100644 --- a/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js +++ b/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 ( - - ); -} ); - -const ExpandFixedToolbarButton = forwardRef( ( { onClick, icon }, ref ) => { - return ( - } - 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 ? ( - setIsCollapsed( false ) } - icon={ blockType.icon } - ref={ expandFixedToolbarButtonRef } - /> - ) : ( - setIsCollapsed( true ) } - ref={ collapseFixedToolbarButtonRef } - /> - ) } + + ) : ( + levelUp + ) + } + onClick={ () => { + setIsCollapsed( ( collapsed ) => ! collapsed ); + toolbarButtonRef.current.focus(); + } } + label={ + isCollapsed + ? __( 'Show block tools' ) + : __( 'Show document tools' ) + } + /> ) } { ! isCollapsed && }