Site Editor: convert editor close button to slot

WordPress · Apr 30, 2020 · 146717f · 146717f
1 parent 1629eaf
commit 146717f
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 2 deletions.
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -23,6 +23,7 @@ import {
 } from '@wordpress/block-editor';
 import { useViewportMatch } from '@wordpress/compose';
 import { FullscreenMode, InterfaceSkeleton } from '@wordpress/interface';
+import { PluginArea } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
@@ -97,6 +98,7 @@ function Editor( { settings: _settings } ) {
 										footer={ <BlockBreadcrumb /> }
 									/>
 									<Popover.Slot />
+									<PluginArea />
 								</FocusReturnProvider>
 							</Context.Provider>
 						</EntityProvider>

diff --git a/packages/edit-site/src/components/header/close-area/index.js b/packages/edit-site/src/components/header/close-area/index.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: __experimentalSiteEditorCloseArea, Slot } = createSlotFill(
+	'__experimentalSiteEditorCloseArea'
+);
+
+__experimentalSiteEditorCloseArea.Slot = Slot;
+
+export default __experimentalSiteEditorCloseArea;
diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/index.js b/packages/edit-site/src/components/header/fullscreen-mode-close/index.js
@@ -5,6 +5,7 @@ import { useSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
 import { Path, SVG } from '@wordpress/primitives';
 import { __ } from '@wordpress/i18n';
+import { applyFilters } from '@wordpress/hooks';
 
 const wordPressLogo = (
 	<SVG width="28" height="28" viewBox="0 0 128 128" version="1.1">
@@ -21,6 +22,10 @@ function FullscreenModeClose() {
 		return null;
 	}
 
+	if ( applyFilters( 'siteEditor.closeButton.remove', false ) ) {
+		return null;
+	}
+
 	return (
 		<Button
 			className="edit-site-fullscreen-mode-close"

diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -15,7 +15,7 @@ import { PinnedItems } from '@wordpress/interface';
  * Internal dependencies
  */
 import { useEditorContext } from '../editor';
-import FullscreenModeClose from './fullscreen-mode-close';
+import __experimentalSiteEditorCloseArea from './close-area';
 import MoreMenu from './more-menu';
 import TemplateSwitcher from '../template-switcher';
 import SaveButton from '../save-button';
@@ -62,7 +62,7 @@ export default function Header() {
 
 	return (
 		<div className="edit-site-header">
-			<FullscreenModeClose />
+			<__experimentalSiteEditorCloseArea.Slot />
 			<div className="edit-site-header__toolbar">
 				<Inserter
 					position="bottom right"

diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js
@@ -13,6 +13,7 @@ import { render } from '@wordpress/element';
  */
 import './hooks';
 import './store';
+import './plugins';
 import Editor from './components/editor';
 
 /**

diff --git a/packages/edit-site/src/plugins/index.js b/packages/edit-site/src/plugins/index.js
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { registerPlugin } from '@wordpress/plugins';
+
+/**
+ * Internal dependencies
+ */
+import FullscreenModeClose from '../components/header/fullscreen-mode-close';
+import __experimentalSiteEditorCloseArea from '../components/header/close-area';
+
+registerPlugin( 'edit-site', {
+	render() {
+		return (
+			<>
+				<__experimentalSiteEditorCloseArea>
+					<FullscreenModeClose />
+				</__experimentalSiteEditorCloseArea>
+			</>
+		);
+	},
+} );