diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js index 645c6bbe7f3a9c..402b9da2290d89 100644 --- a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js +++ b/packages/block-editor/src/components/block-list/block-contextual-toolbar.js @@ -39,6 +39,7 @@ function BlockContextualToolbar( { focusOnMount, ...props } ) { } } + // Shifts the toolbar to make room for the parent block selector. const classes = classnames( 'block-editor-block-contextual-toolbar', { 'with-offset': hasParents, } ); diff --git a/packages/block-editor/src/components/block-parent-selector/index.js b/packages/block-editor/src/components/block-parent-selector/index.js index c1eda630e24716..098bb4fc268877 100644 --- a/packages/block-editor/src/components/block-parent-selector/index.js +++ b/packages/block-editor/src/components/block-parent-selector/index.js @@ -54,6 +54,8 @@ export default function BlockParentSelector() { }; }, [] ); + // Allows highlighting the parent block outline when focusing or hovering + // the parent block selector within the child. const nodeRef = useRef(); const { gestures: showMoversGestures } = useShowMoversGestures( { ref: nodeRef, diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index fb75fe48104f1f..3fc2f256892cd0 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -64,9 +64,10 @@ export default function BlockToolbar( { hideDragHandle } ) { }; }, [] ); + // Handles highlighting the current block outline on hover or focus of the + // block type toolbar area. const { toggleBlockHighlight } = useDispatch( 'core/block-editor' ); const nodeRef = useRef(); - const { showMovers, gestures: showMoversGestures } = useShowMoversGestures( { ref: nodeRef, @@ -79,6 +80,8 @@ export default function BlockToolbar( { hideDragHandle } ) { } ); + // Account for the cases where the block toolbar is rendered within the + // header are and not contextually to the block. const displayHeaderToolbar = useViewportMatch( 'medium', '<' ) || hasFixedToolbar;