Updates the behavior of the top toolbar fixed setting

packages/block-editor/src/components/block-toolbar/index.js

@@ -99,6 +99,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 	// header area and not contextually to the block.
 	const displayHeaderToolbar =
 		useViewportMatch( 'medium', '<' ) || hasFixedToolbar;
+	const isLargeViewport = useViewportMatch( 'medium' );
 
 	if ( blockType ) {
 		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
@@ -124,9 +125,9 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	return (
 		<div className={ classes }>
-			{ ! isMultiToolbar &&
-				! displayHeaderToolbar &&
-				! isContentLocked && <BlockParentSelector /> }
+			{ ! isMultiToolbar && isLargeViewport && ! isContentLocked && (
+				<BlockParentSelector />
+			) }
 			<div ref={ nodeRef } { ...showMoversGestures }>
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					! isContentLocked && (

packages/block-editor/src/components/block-toolbar/style.scss

@@ -56,26 +56,46 @@
 	}
 }
 
-.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
-	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
+// on desktop browsers the fixed toolbar has tweaked borders
+@include break-medium() {
+	.block-editor-block-contextual-toolbar.is-fixed {
+		.block-editor-block-toolbar {
+			.components-toolbar-group,
+			.components-toolbar {
+				border-right: none;
+
+				&::after {
+					content: "";
+					width: $border-width;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-bottom: $grid-unit + $grid-unit-05;
+					background-color: $gray-300;
+					margin-left: $grid-unit;
+				}
+
+				& .components-toolbar-group.components-toolbar-group {
+					&::after {
+						display: none;
+					}
+				}
+			}
 
-	.show-icon-labels & {
-		margin-left: 0;
+			> :last-child,
+			> :last-child .components-toolbar-group,
+			> :last-child .components-toolbar {
+				&::after {
+					display: none;
+				}
+			}
+		}
 	}
 }
 
-.block-editor-block-parent-selector {
-	position: absolute;
-	top: -$border-width;
-	left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
+.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
+	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
 
 	.show-icon-labels & {
-		position: relative;
-		left: auto;
-		top: auto;
-		margin-top: -$border-width;
-		margin-left: -$border-width;
-		margin-bottom: -$border-width;
+		margin-left: 0;
 	}
 }
 

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

@@ -7,19 +7,74 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
+import {
+	ToolbarItem,
+	ToolbarButton,
+	ToolbarGroup,
+} from '@wordpress/components';
+import { levelUp } from '@wordpress/icons';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import NavigableToolbar from '../navigable-toolbar';
 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 } ) {
-	const { blockType, hasParents, showParentSelector } = useSelect(
-		( select ) => {
+	// 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 { blockType, hasParents, showParentSelector, selectedBlockClientId } =
+		useSelect( ( select ) => {
 			const {
 				getBlockName,
 				getBlockParents,
@@ -28,16 +83,17 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			} = select( blockEditorStore );
 			const { getBlockType } = select( blocksStore );
 			const selectedBlockClientIds = getSelectedBlockClientIds();
-			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
-			const parents = getBlockParents( selectedBlockClientId );
+			const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
+			const parents = getBlockParents( _selectedBlockClientId );
 			const firstParentClientId = parents[ parents.length - 1 ];
 			const parentBlockName = getBlockName( firstParentClientId );
 			const parentBlockType = getBlockType( parentBlockName );
 
 			return {
+				selectedBlockClientId: _selectedBlockClientId,
 				blockType:
-					selectedBlockClientId &&
-					getBlockType( getBlockName( selectedBlockClientId ) ),
+					_selectedBlockClientId &&
+					getBlockType( getBlockName( _selectedBlockClientId ) ),
 				hasParents: parents.length,
 				showParentSelector:
 					parentBlockType &&
@@ -48,12 +104,16 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					) &&
 					selectedBlockClientIds.length <= 1 &&
 					! __unstableGetContentLockingParent(
-						selectedBlockClientId
+						_selectedBlockClientId
 					),
 			};
-		},
-		[]
-	);
+		}, [] );
+
+	useEffect( () => {
+		setIsCollapsed( false );
+	}, [ selectedBlockClientId ] );
+
+	const isLargeViewport = useViewportMatch( 'medium' );
 
 	if ( blockType ) {
 		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
@@ -65,6 +125,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const classes = classnames( 'block-editor-block-contextual-toolbar', {
 		'has-parent': hasParents && showParentSelector,
 		'is-fixed': isFixed,
+		'is-collapsed': isCollapsed,
 	} );
 
 	return (
@@ -75,7 +136,29 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			aria-label={ __( 'Block tools' ) }
 			{ ...props }
 		>
-			<BlockToolbar hideDragHandle={ isFixed } />
+			{ isFixed && isLargeViewport && blockType && (
+				<ToolbarGroup
+					className={
+						isCollapsed
+							? 'block-editor-block-toolbar__group-expand-fixed-toolbar'
+							: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'
+					}
+				>
+					{ isCollapsed ? (
+						<ExpandFixedToolbarButton
+							onClick={ () => setIsCollapsed( false ) }
+							icon={ blockType.icon }
+							ref={ expandFixedToolbarButtonRef }
+						/>
+					) : (
+						<CollapseFixedToolbarButton
+							onClick={ () => setIsCollapsed( true ) }
+							ref={ collapseFixedToolbarButtonRef }
+						/>
+					) }
+				</ToolbarGroup>
+			) }
+			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }
 		</NavigableToolbar>
 	);
 }