Close button: extensibility in post editor

WordPress · May 13, 2020 · 0348ba7 · 0348ba7
1 parent 4fe937c
commit 0348ba7
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 24 deletions.
diff --git a/docs/designers-developers/developers/slotfills/main-dashboard-button.md b/docs/designers-developers/developers/slotfills/main-dashboard-button.md
@@ -7,12 +7,14 @@ the editor in fullscreen mode.
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
-import { __experimentalMainDashboardButton } from '@wordpress/edit-site';
+import { 
+	__experimentalMainDashboardButton as MainDashboardButton,
+} from '@wordpress/interface';
 
 const MainDashboardButtonTest = () => (
-    <__experimentalMainDashboardButton>
+    <MainDashboardButton>
         Custom main dashboard button content
-    </__experimentalMainDashboardButton>
+    </MainDashboardButton>
 );
 
 registerPlugin( 'main-dashboard-button-test', {
@@ -25,17 +27,19 @@ in the following way:
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
-import { 
-	__experimentalMainDashboardButton,
-	__experimentalFullscrenModeClose
+import {
+	__experimentalFullscrenModeClose as FullscrenModeClose, 
 } from '@wordpress/edit-site';
+import { 
+	__experimentalMainDashboardButton as MainDashboardButton,
+} from '@wordpress/interface';
 import { close } from '@wordpress/icons';	
 
 
 const MainDashboardButtonIconTest = () => (
-    <__experimentalMainDashboardButton>
-        <__experimentalFullscrenModeClose icon={ close } />
-    </__experimentalMainDashboardButton>
+    <MainDashboardButton>
+        <FullscrenModeClose icon={ close } />
+    </MainDashboardButton>
 );
 
 registerPlugin( 'main-dashboard-button-icon-test', {

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
@@ -6,7 +6,10 @@ import { Button } from '@wordpress/components';
 import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { cog } from '@wordpress/icons';
-import { PinnedItems } from '@wordpress/interface';
+import {
+	PinnedItems,
+	__experimentalCloseButtonSlot as CloseButtonSlot,
+} from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -66,7 +69,9 @@ function Header( {
 
 	return (
 		<div className="edit-post-header">
-			<FullscreenModeClose />
+			<CloseButtonSlot>
+				<FullscreenModeClose />
+			</CloseButtonSlot>
 			<div className="edit-post-header__toolbar">
 				<HeaderToolbar
 					onToggleInserter={ onToggleInserter }

diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
@@ -155,3 +155,4 @@ export { default as PluginPostStatusInfo } from './components/sidebar/plugin-pos
 export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel';
 export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
 export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';
+export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
@@ -9,7 +9,10 @@ import {
 	__experimentalPreviewOptions as PreviewOptions,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { PinnedItems } from '@wordpress/interface';
+import {
+	PinnedItems,
+	__experimentalCloseButtonSlot as CloseButtonSlot,
+} from '@wordpress/interface';
 
 /**
  * Internal dependencies
@@ -20,7 +23,7 @@ import TemplateSwitcher from '../template-switcher';
 import SaveButton from '../save-button';
 import UndoButton from './undo-redo/undo';
 import RedoButton from './undo-redo/redo';
-import { CloseButton } from './main-dashboard-button';
+import FullscreenModeClose from './fullscreen-mode-close';
 
 const inserterToggleProps = { isPrimary: true };
 
@@ -64,7 +67,9 @@ export default function Header( { openEntitiesSavedStates } ) {
 
 	return (
 		<div className="edit-site-header">
-			<CloseButton />
+			<CloseButtonSlot>
+				<FullscreenModeClose />
+			</CloseButtonSlot>
 			<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
@@ -29,5 +29,4 @@ export function initialize( id, settings ) {
 	render( <Editor settings={ settings } />, document.getElementById( id ) );
 }
 
-export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';
-export { default as __experimentalFullscrenModeClose } from './components/header/fullscreen-mode-close';
+export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
diff --git a/packages/interface/src/components/index.js b/packages/interface/src/components/index.js
@@ -2,3 +2,7 @@ export { default as ComplementaryArea } from './complementary-area';
 export { default as FullscreenMode } from './fullscreen-mode';
 export { default as InterfaceSkeleton } from './interface-skeleton';
 export { default as PinnedItems } from './pinned-items';
+export {
+	default as __experimentalMainDashboardButton,
+	CloseButtonSlot as __experimentalCloseButtonSlot,
+} from './main-dashboard-button';
diff --git a/...nts/header/main-dashboard-button/index.js → ...components/main-dashboard-button/index.js b/...nts/header/main-dashboard-button/index.js → ...components/main-dashboard-button/index.js
@@ -6,25 +6,20 @@ import {
 	createSlotFill,
 } from '@wordpress/components';
 
-/**
- * Internal dependencies
- */
-import FullscreenModeClose from '../fullscreen-mode-close';
-
-const name = '__experimentalSiteEditorMainDashboardButton';
+const name = '__experimentalMainDashboardButton';
 
 const { Fill, Slot } = createSlotFill( name );
 
 const MainDashboardButton = Fill;
 MainDashboardButton.Slot = Slot;
 MainDashboardButton.slotName = name;
 
-export const CloseButton = () => {
+export const CloseButtonSlot = ( { children } ) => {
 	const slot = useSlot( MainDashboardButton.slotName );
 	const hasFills = Boolean( slot.fills && slot.fills.length );
 
 	if ( ! hasFills ) {
-		return <FullscreenModeClose />;
+		return children;
 	}
 
 	return <MainDashboardButton.Slot bubblesVirtually />;