Updates the behavior of the top toolbar fixed setting:

- wraps the edit post header in a slot fill provider - implements a temporary behavior that shows document tools when no block is selected - updates the block tools and parent selector to appear properly in the new place
WordPress · Feb 2, 2023 · 78aebb6 · 78aebb6
1 parent d113597
commit 78aebb6
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 73 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
@@ -124,9 +124,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	return (
 		<div className={ classes }>
-			{ ! isMultiToolbar &&
-				! displayHeaderToolbar &&
-				! isContentLocked && <BlockParentSelector /> }
+			{ ! isMultiToolbar && ! isContentLocked && <BlockParentSelector /> }
 			<div ref={ nodeRef } { ...showMoversGestures }>
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					! isContentLocked && (

diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
@@ -16,7 +15,6 @@ import {
 } from './insertion-point';
 import SelectedBlockPopover from './selected-block-popover';
 import { store as blockEditorStore } from '../../store';
-import BlockContextualToolbar from './block-contextual-toolbar';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 
@@ -45,11 +43,7 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const { hasFixedToolbar, isZoomOutMode, isTyping } = useSelect(
-		selector,
-		[]
-	);
+	const { isZoomOutMode, isTyping } = useSelect( selector, [] );
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
@@ -129,10 +123,6 @@ export default function BlockTools( {
 						__unstableContentRef={ __unstableContentRef }
 					/>
 				) }
-				{ ! isZoomOutMode &&
-					( hasFixedToolbar || ! isLargeViewport ) && (
-						<BlockContextualToolbar isFixed />
-					) }
 				{ /* Even if the toolbar is fixed, the block popover is still
 					needed for navigation and zoom-out mode. */ }
 				<SelectedBlockPopover

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -6,6 +6,10 @@ import { useSelect } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
 import { useViewportMatch } from '@wordpress/compose';
 import { __unstableMotion as motion } from '@wordpress/components';
+import {
+	store as blockEditorStore,
+	BlockToolbar,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -25,10 +29,20 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 		hasActiveMetaboxes,
 		isPublishSidebarOpened,
 		isSaving,
+		hasFixedToolbar,
+		firstParentClientId,
+		selectedBlockClientId,
 		showIconLabels,
 		isDistractionFreeMode,
-	} = useSelect(
-		( select ) => ( {
+	} = useSelect( ( select ) => {
+		const { getSettings, getBlockParents, getSelectedBlockClientId } =
+			select( blockEditorStore );
+		const settings = getSettings();
+		const _selectedBlockClientId = getSelectedBlockClientId();
+		const parents = getBlockParents( _selectedBlockClientId );
+		const _firstParentClientId = parents[ parents.length - 1 ];
+		return {
+			selectedBlockClientId: _selectedBlockClientId,
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
 			isPublishSidebarOpened:
 				select( editPostStore ).isPublishSidebarOpened(),
@@ -37,9 +51,10 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
 			isDistractionFreeMode:
 				select( editPostStore ).isFeatureActive( 'distractionFree' ),
-		} ),
-		[]
-	);
+			hasFixedToolbar: settings.hasFixedToolbar,
+			firstParentClientId: _firstParentClientId,
+		};
+	}, [] );
 
 	const isDistractionFree = isDistractionFreeMode && isLargeViewport;
 
@@ -68,7 +83,24 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 				transition={ { type: 'tween', delay: 0.8 } }
 				className="edit-post-header__toolbar"
 			>
-				<HeaderToolbar />
+				{ ! hasFixedToolbar && <HeaderToolbar /> }
+				{ ! selectedBlockClientId && hasFixedToolbar && (
+					<HeaderToolbar />
+				) }
+				{ hasFixedToolbar && (
+					<div
+						style={
+							firstParentClientId
+								? {
+										position: 'relative',
+										left: '70px',
+								  }
+								: {}
+						}
+					>
+						<BlockToolbar hideDragHandle={ hasFixedToolbar } />
+					</div>
+				) }
 				<TemplateTitle />
 			</motion.div>
 			<motion.div

diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
@@ -10,6 +10,7 @@ import { forwardRef, useEffect } from '@wordpress/element';
 import {
 	__unstableUseNavigateRegions as useNavigateRegions,
 	__unstableMotion as motion,
+	SlotFillProvider,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
@@ -96,71 +97,73 @@ function InterfaceSkeleton(
 				!! footer && 'has-footer'
 			) }
 		>
-			<div className="interface-interface-skeleton__editor">
-				{ !! header && isDistractionFree && (
-					<NavigableRegion
-						as={ motion.div }
-						className="interface-interface-skeleton__header"
-						aria-label={ mergedLabels.header }
-						initial={ isDistractionFree ? 'hidden' : 'hover' }
-						whileHover="hover"
-						variants={ headerVariants }
-						transition={ { type: 'tween', delay: 0.8 } }
-					>
-						{ header }
-					</NavigableRegion>
-				) }
-				{ !! header && ! isDistractionFree && (
-					<NavigableRegion
-						className="interface-interface-skeleton__header"
-						ariaLabel={ mergedLabels.header }
-					>
-						{ header }
-					</NavigableRegion>
-				) }
-				{ isDistractionFree && (
-					<div className="interface-interface-skeleton__header">
-						{ editorNotices }
-					</div>
-				) }
-				<div className="interface-interface-skeleton__body">
-					{ !! secondarySidebar && (
+			<SlotFillProvider>
+				<div className="interface-interface-skeleton__editor">
+					{ !! header && isDistractionFree && (
 						<NavigableRegion
-							className="interface-interface-skeleton__secondary-sidebar"
-							ariaLabel={ mergedLabels.secondarySidebar }
+							as={ motion.div }
+							className="interface-interface-skeleton__header"
+							aria-label={ mergedLabels.header }
+							initial={ isDistractionFree ? 'hidden' : 'hover' }
+							whileHover="hover"
+							variants={ headerVariants }
+							transition={ { type: 'tween', delay: 0.8 } }
 						>
-							{ secondarySidebar }
+							{ header }
 						</NavigableRegion>
 					) }
-					{ !! notices && (
-						<div className="interface-interface-skeleton__notices">
-							{ notices }
-						</div>
-					) }
-					<NavigableRegion
-						className="interface-interface-skeleton__content"
-						ariaLabel={ mergedLabels.body }
-					>
-						{ content }
-					</NavigableRegion>
-					{ !! sidebar && (
+					{ !! header && ! isDistractionFree && (
 						<NavigableRegion
-							className="interface-interface-skeleton__sidebar"
-							ariaLabel={ mergedLabels.sidebar }
+							className="interface-interface-skeleton__header"
+							ariaLabel={ mergedLabels.header }
 						>
-							{ sidebar }
+							{ header }
 						</NavigableRegion>
 					) }
-					{ !! actions && (
+					{ isDistractionFree && (
+						<div className="interface-interface-skeleton__header">
+							{ editorNotices }
+						</div>
+					) }
+					<div className="interface-interface-skeleton__body">
+						{ !! secondarySidebar && (
+							<NavigableRegion
+								className="interface-interface-skeleton__secondary-sidebar"
+								ariaLabel={ mergedLabels.secondarySidebar }
+							>
+								{ secondarySidebar }
+							</NavigableRegion>
+						) }
+						{ !! notices && (
+							<div className="interface-interface-skeleton__notices">
+								{ notices }
+							</div>
+						) }
 						<NavigableRegion
-							className="interface-interface-skeleton__actions"
-							ariaLabel={ mergedLabels.actions }
+							className="interface-interface-skeleton__content"
+							ariaLabel={ mergedLabels.body }
 						>
-							{ actions }
+							{ content }
 						</NavigableRegion>
-					) }
+						{ !! sidebar && (
+							<NavigableRegion
+								className="interface-interface-skeleton__sidebar"
+								ariaLabel={ mergedLabels.sidebar }
+							>
+								{ sidebar }
+							</NavigableRegion>
+						) }
+						{ !! actions && (
+							<NavigableRegion
+								className="interface-interface-skeleton__actions"
+								ariaLabel={ mergedLabels.actions }
+							>
+								{ actions }
+							</NavigableRegion>
+						) }
+					</div>
 				</div>
-			</div>
+			</SlotFillProvider>
 			{ !! footer && (
 				<NavigableRegion
 					className="interface-interface-skeleton__footer"