Use the inserter panel for the edit-site screen (#22413)

WordPress · May 21, 2020 · e290b20 · e290b20
1 parent 60fbabc
commit e290b20
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 8 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -23,12 +23,14 @@ import {
 	BlockBreadcrumb,
 	__unstableEditorStyles as EditorStyles,
 	__experimentalUseResizeCanvas as useResizeCanvas,
+	__experimentalLibrary as Library,
 } from '@wordpress/block-editor';
 import { useViewportMatch } from '@wordpress/compose';
 import { FullscreenMode, InterfaceSkeleton } from '@wordpress/interface';
 import { EntitiesSavedStates } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { PluginArea } from '@wordpress/plugins';
+import { close } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -44,7 +46,12 @@ export function useEditorContext() {
 	return useContext( Context );
 }
 
+const interfaceLabels = {
+	leftSidebar: __( 'Block Library' ),
+};
+
 function Editor( { settings: _settings } ) {
+	const [ isInserterOpen, setIsInserterOpen ] = useState( false );
 	const isMobile = useViewportMatch( 'medium', '<' );
 	const [ settings, setSettings ] = useState( _settings );
 	const template = useSelect(
@@ -131,6 +138,37 @@ function Editor( { settings: _settings } ) {
 									<FocusReturnProvider>
 										<KeyboardShortcuts.Register />
 										<InterfaceSkeleton
+											labels={ interfaceLabels }
+											leftSidebar={
+												isInserterOpen && (
+													<div className="edit-site-editor__inserter-panel">
+														<div className="edit-site-editor__inserter-panel-header">
+															<Button
+																icon={ close }
+																onClick={ () =>
+																	setIsInserterOpen(
+																		false
+																	)
+																}
+															/>
+														</div>
+														<div className="edit-site-editor__inserter-panel-content">
+															<Library
+																showInserterHelpPanel
+																onSelect={ () => {
+																	if (
+																		isMobile
+																	) {
+																		setIsInserterOpen(
+																			false
+																		);
+																	}
+																} }
+															/>
+														</div>
+													</div>
+												)
+											}
 											sidebar={
 												! isMobile && <Sidebar />
 											}
@@ -139,6 +177,14 @@ function Editor( { settings: _settings } ) {
 													openEntitiesSavedStates={
 														openEntitiesSavedStates
 													}
+													isInserterOpen={
+														isInserterOpen
+													}
+													onToggleInserter={ () =>
+														setIsInserterOpen(
+															! isInserterOpen
+														)
+													}
 												/>
 											}
 											content={

diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
@@ -25,3 +25,29 @@
 .edit-site-visual-editor {
 	background-color: $white;
 }
+
+.edit-site-editor__inserter-panel {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.edit-site-editor__inserter-panel-header {
+	padding-top: $grid-unit-10;
+	padding-right: $grid-unit-10;
+	display: flex;
+	justify-content: flex-end;
+
+	@include break-medium() {
+		display: none;
+	}
+}
+
+.edit-site-editor__inserter-panel-content {
+	// Leave space for the close button
+	height: calc(100% - #{$button-size} - #{$grid-unit-10});
+
+	@include break-medium() {
+		height: 100%;
+	}
+}
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -6,7 +6,6 @@ import { addQueryArgs } from '@wordpress/url';
 import {
 	BlockNavigationDropdown,
 	ToolSelector,
-	Inserter,
 	__experimentalPreviewOptions as PreviewOptions,
 } from '@wordpress/block-editor';
 import {
@@ -18,6 +17,9 @@ import {
 	PinnedItems,
 	__experimentalMainDashboardButton as MainDashboardButton,
 } from '@wordpress/interface';
+import { _x } from '@wordpress/i18n';
+import { plus } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -36,9 +38,11 @@ import FullscreenModeClose from './fullscreen-mode-close';
  */
 const { fetch } = window;
 
-const inserterToggleProps = { isPrimary: true };
-
-export default function Header( { openEntitiesSavedStates } ) {
+export default function Header( {
+	openEntitiesSavedStates,
+	isInserterOpen,
+	onToggleInserter,
+} ) {
 	const { settings, setSettings } = useEditorContext();
 	const setActiveTemplateId = useCallback(
 		( newTemplateId ) =>
@@ -109,10 +113,15 @@ export default function Header( { openEntitiesSavedStates } ) {
 				<FullscreenModeClose />
 			</MainDashboardButton.Slot>
 			<div className="edit-site-header__toolbar">
-				<Inserter
-					position="bottom right"
-					showInserterHelpPanel
-					toggleProps={ inserterToggleProps }
+				<Button
+					isPrimary
+					isPressed={ isInserterOpen }
+					onClick={ onToggleInserter }
+					icon={ plus }
+					label={ _x(
+						'Add block',
+						'Generic label for block inserter button'
+					) }
 				/>
 				<ToolSelector />
 				<UndoButton />