Use PluginHeaderToolbar to render existing items.

WordPress · Jun 12, 2020 · 3362a00 · 3362a00
1 parent f4e921c
commit 3362a00
Showing 1 changed file with 50 additions and 28 deletions.
diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js
@@ -21,6 +21,11 @@ import {
 } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import PluginHeaderToolbar from '../plugin-header-toolbar';
+
 function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 	const {
 		hasFixedToolbar,
@@ -68,35 +73,52 @@ function HeaderToolbar( { onToggleInserter, isInserterOpen } ) {
 			className="edit-post-header-toolbar"
 			aria-label={ toolbarAriaLabel }
 		>
-			<ToolbarItem
-				as={ Button }
-				className="edit-post-header-toolbar__inserter-toggle"
-				isPrimary
-				isPressed={ isInserterOpen }
-				onClick={ onToggleInserter }
-				disabled={ ! isInserterEnabled }
-				icon={ plus }
-				label={ _x(
-					'Add block',
-					'Generic label for block inserter button'
-				) }
-			/>
-			{ isLargeViewport && <ToolbarItem as={ ToolSelector } /> }
-			<ToolbarItem as={ EditorHistoryUndo } />
-			<ToolbarItem as={ EditorHistoryRedo } />
-			<ToolbarItem
-				as={ TableOfContents }
-				hasOutlineItemsDisabled={ isTextModeEnabled }
-			/>
-			<ToolbarItem
-				as={ BlockNavigationDropdown }
-				isDisabled={ isTextModeEnabled }
+			<PluginHeaderToolbar.Slot
+				fillProps={ {
+					hasFixedToolbar,
+					isLargeViewport,
+					displayBlockToolbar,
+				} }
 			/>
-			{ displayBlockToolbar && (
-				<div className="edit-post-header-toolbar__block-toolbar">
-					<BlockToolbar hideDragHandle />
-				</div>
-			) }
+			<PluginHeaderToolbar>
+				{ ( fillProps ) => {
+					return (
+						<>
+							<ToolbarItem
+								as={ Button }
+								className="edit-post-header-toolbar__inserter-toggle"
+								isPrimary
+								isPressed={ isInserterOpen }
+								onClick={ onToggleInserter }
+								disabled={ ! isInserterEnabled }
+								icon={ plus }
+								label={ _x(
+									'Add block',
+									'Generic label for block inserter button'
+								) }
+							/>
+							{ fillProps.isLargeViewport && (
+								<ToolbarItem as={ ToolSelector } />
+							) }
+							<ToolbarItem as={ EditorHistoryUndo } />
+							<ToolbarItem as={ EditorHistoryRedo } />
+							<ToolbarItem
+								as={ TableOfContents }
+								hasOutlineItemsDisabled={ isTextModeEnabled }
+							/>
+							<ToolbarItem
+								as={ BlockNavigationDropdown }
+								isDisabled={ isTextModeEnabled }
+							/>
+							{ fillProps.displayBlockToolbar && (
+								<div className="edit-post-header-toolbar__block-toolbar">
+									<BlockToolbar hideDragHandle />
+								</div>
+							) }
+						</>
+					);
+				} }
+			</PluginHeaderToolbar>
 		</NavigableToolbar>
 	);
 }