Add inserter to the edit site screen (#21328)

WordPress · Apr 1, 2020 · f322b44 · f322b44
1 parent 17e1d10
commit f322b44
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { useCallback } from '@wordpress/element';
-import { BlockNavigationDropdown, ToolSelector } from '@wordpress/block-editor';
+import {
+	BlockNavigationDropdown,
+	ToolSelector,
+	Inserter,
+} from '@wordpress/block-editor';
 import { PinnedItems } from '@wordpress/interface';
 
 /**
@@ -14,6 +18,8 @@ import MoreMenu from './more-menu';
 import TemplateSwitcher from '../template-switcher';
 import SaveButton from '../save-button';
 
+const inserterToggleProps = { isPrimary: true };
+
 export default function Header() {
 	const { settings, setSettings } = useEditorContext();
 	const setActiveTemplateId = useCallback(
@@ -47,6 +53,11 @@ export default function Header() {
 		<div className="edit-site-header">
 			<FullscreenModeClose />
 			<div className="edit-site-header__toolbar">
+				<Inserter
+					position="bottom right"
+					showInserterHelpPanel
+					toggleProps={ inserterToggleProps }
+				/>
 				<TemplateSwitcher
 					ids={ settings.templateIds }
 					templatePartIds={ settings.templatePartIds }

diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss
@@ -9,6 +9,7 @@
 .edit-site-header__toolbar {
 	display: flex;
 	flex-grow: 1;
+	padding-left: $grid-unit-10;
 
 	& > * {
 		margin-left: 5px;