Add selected block tools slot to site editor header

packages/edit-site/src/components/header-edit-mode/document-tools/index.js

@@ -14,7 +14,6 @@ import { _x, __ } from '@wordpress/i18n';
 import { listView, plus, chevronUpDown } from '@wordpress/icons';
 import { Button, ToolbarItem } from '@wordpress/components';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -32,42 +31,34 @@ const preventDefault = ( event ) => {
 
 export default function DocumentTools( {
 	blockEditorMode,
+	hasFixedToolbar,
 	isDistractionFree,
 	showIconLabels,
 	setListViewToggleElement,
 } ) {
 	const inserterButton = useRef();
-	const {
-		isInserterOpen,
-		isListViewOpen,
-		listViewShortcut,
-		isVisualMode,
-		hasFixedToolbar,
-	} = useSelect( ( select ) => {
-		const {
-			__experimentalGetPreviewDeviceType,
-			isInserterOpened,
-			isListViewOpened,
-			getEditorMode,
-		} = select( editSiteStore );
-		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
-
-		const { get: getPreference } = select( preferencesStore );
+	const { isInserterOpen, isListViewOpen, listViewShortcut, isVisualMode } =
+		useSelect( ( select ) => {
+			const {
+				__experimentalGetPreviewDeviceType,
+				isInserterOpened,
+				isListViewOpened,
+				getEditorMode,
+			} = select( editSiteStore );
+			const { getShortcutRepresentation } = select(
+				keyboardShortcutsStore
+			);
 
-		return {
-			deviceType: __experimentalGetPreviewDeviceType(),
-			isInserterOpen: isInserterOpened(),
-			isListViewOpen: isListViewOpened(),
-			listViewShortcut: getShortcutRepresentation(
-				'core/edit-site/toggle-list-view'
-			),
-			isVisualMode: getEditorMode() === 'visual',
-			hasFixedToolbar: getPreference(
-				editSiteStore.name,
-				'fixedToolbar'
-			),
-		};
-	}, [] );
+			return {
+				deviceType: __experimentalGetPreviewDeviceType(),
+				isInserterOpen: isInserterOpened(),
+				isListViewOpen: isListViewOpened(),
+				listViewShortcut: getShortcutRepresentation(
+					'core/edit-site/toggle-list-view'
+				),
+				isVisualMode: getEditorMode() === 'visual',
+			};
+		}, [] );
 
 	const {
 		__experimentalSetPreviewDeviceType: setPreviewDeviceType,

packages/edit-site/src/components/header-edit-mode/index.js

@@ -20,6 +20,7 @@ import {
 	__unstableMotion as motion,
 	MenuGroup,
 	MenuItem,
+	Slot,
 	VisuallyHidden,
 } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -48,6 +49,7 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 		homeUrl,
 		showIconLabels,
 		editorCanvasView,
+		hasFixedToolbar,
 	} = useSelect( ( select ) => {
 		const { __experimentalGetPreviewDeviceType, getEditedPostType } =
 			select( editSiteStore );
@@ -73,6 +75,10 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 			editorCanvasView: unlock(
 				select( editSiteStore )
 			).getEditorCanvasContainerView(),
+			hasFixedToolbar: getPreference(
+				editSiteStore.name,
+				'fixedToolbar'
+			),
 			isDistractionFree: getPreference(
 				editSiteStore.name,
 				'distractionFree'
@@ -120,6 +126,13 @@ export default function HeaderEditMode( { setListViewToggleElement } ) {
 						showIconLabels={ showIconLabels }
 						setListViewToggleElement={ setListViewToggleElement }
 					/>
+					{ hasFixedToolbar && (
+						<Slot
+							className={ 'selected-block-tools-wrapper' }
+							name="__experimentalSelectedBlockTools"
+							bubblesVirtually
+						/>
+					) }
 				</motion.div>
 			) }