Improve Block Toolbar Semantics/Accessibility

docs/reference-guides/data/data-core-block-editor.md

@@ -588,6 +588,18 @@ _Properties_
 -   _isDisabled_ `boolean`: Whether or not the user should be prevented from inserting this item.
 -   _frecency_ `number`: Heuristic that combines frequency and recency.
 
+### getLastFocus
+
+Returns the element of the last element that had focus when focus left the editor canvas.
+
+_Parameters_
+
+-   _state_ `Object`: Block editor state.
+
+_Returns_
+
+-   `Object`: Element.
+
 ### getLastMultiSelectedBlockClientId
 
 Returns the client ID of the last block in the multi-selection set, or null if there is no multi-selection.
@@ -1651,6 +1663,18 @@ _Parameters_
 -   _clientId_ `string`: The block's clientId.
 -   _hasControlledInnerBlocks_ `boolean`: True if the block's inner blocks are controlled.
 
+### setLastFocus
+
+Action that sets the element that had focus when focus leaves the editor canvas.
+
+_Parameters_
+
+-   _lastFocus_ `Object`: The last focused element.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### setNavigationMode
 
 Action that enables or disables the navigation mode.

packages/base-styles/_z-index.scss

@@ -106,9 +106,8 @@ $z-layers: (
 	// Show interface skeleton footer above interface skeleton drawer
 	".interface-interface-skeleton__footer": 90,
 
-	// Above the block list and the header.
+	// Below the header background so it can be hidden behind the header.
 	".block-editor-block-popover": 31,
-
 	// Show snackbars above everything (similar to popovers)
 	".components-snackbar-list": 100000,
 

packages/block-editor/src/components/block-tools/back-compat.js

@@ -9,7 +9,7 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import InsertionPoint, { InsertionPointOpenRef } from './insertion-point';
-import BlockPopover from './selected-block-popover';
+import BlockPopover from './selected-block-tools';
 
 export default function BlockToolsBackCompat( { children } ) {
 	const openRef = useContext( InsertionPointOpenRef );

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

@@ -7,21 +7,9 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	useLayoutEffect,
-	useEffect,
-	useRef,
-	useState,
-} from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 import { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
-import {
-	ToolbarItem,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
-import { next, previous } from '@wordpress/icons';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -31,138 +19,44 @@ import BlockToolbar from '../block-toolbar';
 import { store as blockEditorStore } from '../../store';
 import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
 
-function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
-	// When the toolbar is fixed it can be collapsed
-	const [ isCollapsed, setIsCollapsed ] = useState( false );
-	const toolbarButtonRef = useRef();
-
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const {
-		blockType,
-		blockEditingMode,
-		hasParents,
-		showParentSelector,
-		selectedBlockClientId,
-	} = useSelect( ( select ) => {
-		const {
-			getBlockName,
-			getBlockParents,
-			getSelectedBlockClientIds,
-			getBlockEditingMode,
-		} = select( blockEditorStore );
-		const { getBlockType } = select( blocksStore );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-		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 ) ),
-			blockEditingMode: getBlockEditingMode( _selectedBlockClientId ),
-			hasParents: parents.length,
-			showParentSelector:
-				parentBlockType &&
-				getBlockEditingMode( firstParentClientId ) === 'default' &&
-				hasBlockSupport(
-					parentBlockType,
-					'__experimentalParentSelector',
-					true
-				) &&
-				selectedBlockClientIds.length <= 1 &&
-				getBlockEditingMode( _selectedBlockClientId ) === 'default',
-		};
-	}, [] );
-
-	useEffect( () => {
-		setIsCollapsed( false );
-	}, [ selectedBlockClientId ] );
-
-	const isLargerThanTabletViewport = useViewportMatch( 'large', '>=' );
-	const isFullscreen =
-		document.body.classList.contains( 'is-fullscreen-mode' );
-
-	/**
-	 * The following code is a workaround to fix the width of the toolbar
-	 * it should be removed when the toolbar will be rendered inline
-	 * FIXME: remove this layout effect when the toolbar is no longer
-	 * 				absolutely positioned
-	 */
-	useLayoutEffect( () => {
-		// don't do anything if not fixed toolbar
-		if ( ! isFixed ) {
-			return;
-		}
-
-		const blockToolbar = document.querySelector(
-			'.block-editor-block-contextual-toolbar'
-		);
-
-		if ( ! blockToolbar ) {
-			return;
-		}
-
-		if ( ! blockType ) {
-			blockToolbar.style.width = 'initial';
-			return;
-		}
-
-		if ( ! isLargerThanTabletViewport ) {
-			// set the width of the toolbar to auto
-			blockToolbar.style = {};
-			return;
-		}
-
-		if ( isCollapsed ) {
-			// set the width of the toolbar to auto
-			blockToolbar.style.width = 'auto';
-			return;
-		}
-
-		// get the width of the pinned items in the post editor or widget editor
-		const pinnedItems = document.querySelector(
-			'.edit-post-header__settings, .edit-widgets-header__actions'
-		);
-		// get the width of the left header in the site editor
-		const leftHeader = document.querySelector(
-			'.edit-site-header-edit-mode__end'
-		);
-
-		const computedToolbarStyle = window.getComputedStyle( blockToolbar );
-		const computedPinnedItemsStyle = pinnedItems
-			? window.getComputedStyle( pinnedItems )
-			: false;
-		const computedLeftHeaderStyle = leftHeader
-			? window.getComputedStyle( leftHeader )
-			: false;
-
-		const marginLeft = parseFloat( computedToolbarStyle.marginLeft );
-		const pinnedItemsWidth = computedPinnedItemsStyle
-			? parseFloat( computedPinnedItemsStyle.width )
-			: 0;
-		const leftHeaderWidth = computedLeftHeaderStyle
-			? parseFloat( computedLeftHeaderStyle.width )
-			: 0;
-
-		// set the new witdth of the toolbar
-		blockToolbar.style.width = `calc(100% - ${
-			leftHeaderWidth +
-			pinnedItemsWidth +
-			marginLeft +
-			( pinnedItems || leftHeader ? 2 : 0 ) + // Prevents button focus border from being cut off
-			( isFullscreen ? 0 : 160 ) // the width of the admin sidebar expanded
-		}px)`;
-	}, [
-		isFixed,
-		isLargerThanTabletViewport,
-		isCollapsed,
-		isFullscreen,
-		blockType,
-	] );
+function UnforwardBlockContextualToolbar(
+	{ focusOnMount, isFixed, ...props },
+	ref
+) {
+	const { blockType, blockEditingMode, hasParents, showParentSelector } =
+		useSelect( ( select ) => {
+			const {
+				getBlockName,
+				getBlockParents,
+				getSelectedBlockClientIds,
+				getBlockEditingMode,
+			} = select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const _selectedBlockClientId = selectedBlockClientIds[ 0 ];
+			const parents = getBlockParents( _selectedBlockClientId );
+			const firstParentClientId = parents[ parents.length - 1 ];
+			const parentBlockName = getBlockName( firstParentClientId );
+			const parentBlockType = getBlockType( parentBlockName );
+
+			return {
+				blockType:
+					_selectedBlockClientId &&
+					getBlockType( getBlockName( _selectedBlockClientId ) ),
+				blockEditingMode: getBlockEditingMode( _selectedBlockClientId ),
+				hasParents: parents.length,
+				showParentSelector:
+					parentBlockType &&
+					getBlockEditingMode( firstParentClientId ) === 'default' &&
+					hasBlockSupport(
+						parentBlockType,
+						'__experimentalParentSelector',
+						true
+					) &&
+					selectedBlockClientIds.length <= 1 &&
+					getBlockEditingMode( _selectedBlockClientId ) === 'default',
+			};
+		}, [] );
 
 	const isToolbarEnabled =
 		! blockType ||
@@ -179,45 +73,28 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const classes = classnames( 'block-editor-block-contextual-toolbar', {
 		'has-parent': hasParents && showParentSelector,
 		'is-fixed': isFixed,
-		'is-collapsed': isCollapsed,
 	} );
 
 	return (
 		<NavigableToolbar
+			ref={ ref }
 			focusOnMount={ focusOnMount }
 			className={ classes }
 			/* translators: accessibility text for the block toolbar */
 			aria-label={ __( 'Block tools' ) }
 			variant={ isFixed ? 'unstyled' : undefined }
+			onChildrenKeyDown={ ( event ) => {
+				if ( event.keyCode === ESCAPE && lastFocus?.current ) {
+					event.preventDefault();
+					lastFocus.current.focus();
+				}
+			} }
+			focusEditorOnEscape
 			{ ...props }
 		>
-			{ ! isCollapsed && <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'
-					}
-				>
-					<ToolbarItem
-						as={ ToolbarButton }
-						ref={ toolbarButtonRef }
-						icon={ isCollapsed ? next : previous }
-						onClick={ () => {
-							setIsCollapsed( ( collapsed ) => ! collapsed );
-							toolbarButtonRef.current.focus();
-						} }
-						label={
-							isCollapsed
-								? __( 'Show block tools' )
-								: __( 'Hide block tools' )
-						}
-					/>
-				</ToolbarGroup>
-			) }
+			<BlockToolbar hideDragHandle={ isFixed } />
 		</NavigableToolbar>
 	);
 }
 
-export default BlockContextualToolbar;
+export default forwardRef( UnforwardBlockContextualToolbar );

packages/block-editor/src/components/block-tools/empty-block-inserter.js

@@ -0,0 +1,53 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import Inserter from '../inserter';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+
+export default function EmptyBlockInserter( {
+	clientId,
+	__unstableContentRef,
+} ) {
+	const {
+		capturingClientId,
+		isInsertionPointVisible,
+		lastClientId,
+		rootClientId,
+	} = useSelectedBlockToolProps( clientId );
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
+	return (
+		<BlockPopover
+			clientId={ capturingClientId || clientId }
+			__unstableCoverTarget
+			bottomClientId={ lastClientId }
+			className={ classnames(
+				'block-editor-block-list__block-side-inserter-popover',
+				{
+					'is-insertion-point-visible': isInsertionPointVisible,
+				}
+			) }
+			__unstableContentRef={ __unstableContentRef }
+			{ ...popoverProps }
+		>
+			<div className="block-editor-block-list__empty-block-inserter">
+				<Inserter
+					position="bottom right"
+					rootClientId={ rootClientId }
+					clientId={ clientId }
+					__experimentalIsQuick
+				/>
+			</div>
+		</BlockPopover>
+	);
+}