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 && }