From 0348ba75526b7a0cdba3cb5ecd18f1c006f07cf6 Mon Sep 17 00:00:00 2001
From: Marko Andrijasevic <markoandrijasevic@gmail.com>
Date: Wed, 13 May 2020 17:26:08 +0200
Subject: [PATCH 1/2] Close button: extensibility in post editor

---
 .../slotfills/main-dashboard-button.md        | 22 +++++++++++--------
 .../edit-post/src/components/header/index.js  |  9 ++++++--
 packages/edit-post/src/index.js               |  1 +
 .../edit-site/src/components/header/index.js  | 11 +++++++---
 packages/edit-site/src/index.js               |  3 +--
 packages/interface/src/components/index.js    |  4 ++++
 .../main-dashboard-button/index.js            | 11 +++-------
 7 files changed, 37 insertions(+), 24 deletions(-)
 rename packages/{edit-site/src/components/header => interface/src/components}/main-dashboard-button/index.js (69%)

diff --git a/docs/designers-developers/developers/slotfills/main-dashboard-button.md b/docs/designers-developers/developers/slotfills/main-dashboard-button.md
index f036fd3e08141e..63af26b62c26e4 100644
--- 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
index 127fad3a25dc70..beaea955600140 100644
--- 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
index 1d5475c63535f8..da6cdc8bc4003c 100644
--- 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
index 7a39cff2dfbe47..7cea11c4479f13 100644
--- 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
index e6dec20771c7ea..1a45a2f13d5630 100644
--- 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
index 9071a42c0ff944..2fce00ed0b4de1 100644
--- 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/packages/edit-site/src/components/header/main-dashboard-button/index.js b/packages/interface/src/components/main-dashboard-button/index.js
similarity index 69%
rename from packages/edit-site/src/components/header/main-dashboard-button/index.js
rename to packages/interface/src/components/main-dashboard-button/index.js
index 1e7c11d9ad8d5d..137576a0eb8edc 100644
--- a/packages/edit-site/src/components/header/main-dashboard-button/index.js
+++ b/packages/interface/src/components/main-dashboard-button/index.js
@@ -6,12 +6,7 @@ import {
 	createSlotFill,
 } from '@wordpress/components';
 
-/**
- * Internal dependencies
- */
-import FullscreenModeClose from '../fullscreen-mode-close';
-
-const name = '__experimentalSiteEditorMainDashboardButton';
+const name = '__experimentalMainDashboardButton';
 
 const { Fill, Slot } = createSlotFill( name );
 
@@ -19,12 +14,12 @@ 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 />;

From 7d1b948db35d06cbd9bac92ebb81a3759ad34d08 Mon Sep 17 00:00:00 2001
From: Marko Andrijasevic <markoandrijasevic@gmail.com>
Date: Wed, 13 May 2020 20:07:45 +0200
Subject: [PATCH 2/2] Refactor slot

---
 packages/edit-post/src/components/header/index.js  |  6 +++---
 packages/edit-site/src/components/header/index.js  |  6 +++---
 packages/interface/src/components/index.js         |  5 +----
 .../src/components/main-dashboard-button/index.js  | 14 +++++++-------
 4 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index beaea955600140..8210e19ab0b298 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -8,7 +8,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { cog } from '@wordpress/icons';
 import {
 	PinnedItems,
-	__experimentalCloseButtonSlot as CloseButtonSlot,
+	__experimentalMainDashboardButton as MainDashboardButton,
 } from '@wordpress/interface';
 
 /**
@@ -69,9 +69,9 @@ function Header( {
 
 	return (
 		<div className="edit-post-header">
-			<CloseButtonSlot>
+			<MainDashboardButton.Slot>
 				<FullscreenModeClose />
-			</CloseButtonSlot>
+			</MainDashboardButton.Slot>
 			<div className="edit-post-header__toolbar">
 				<HeaderToolbar
 					onToggleInserter={ onToggleInserter }
diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js
index 7cea11c4479f13..0a381c9385bcdd 100644
--- a/packages/edit-site/src/components/header/index.js
+++ b/packages/edit-site/src/components/header/index.js
@@ -11,7 +11,7 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	PinnedItems,
-	__experimentalCloseButtonSlot as CloseButtonSlot,
+	__experimentalMainDashboardButton as MainDashboardButton,
 } from '@wordpress/interface';
 
 /**
@@ -67,9 +67,9 @@ export default function Header( { openEntitiesSavedStates } ) {
 
 	return (
 		<div className="edit-site-header">
-			<CloseButtonSlot>
+			<MainDashboardButton.Slot>
 				<FullscreenModeClose />
-			</CloseButtonSlot>
+			</MainDashboardButton.Slot>
 			<div className="edit-site-header__toolbar">
 				<Inserter
 					position="bottom right"
diff --git a/packages/interface/src/components/index.js b/packages/interface/src/components/index.js
index 2fce00ed0b4de1..3e7e7fa68c1acd 100644
--- a/packages/interface/src/components/index.js
+++ b/packages/interface/src/components/index.js
@@ -2,7 +2,4 @@ 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';
+export { default as __experimentalMainDashboardButton } from './main-dashboard-button';
diff --git a/packages/interface/src/components/main-dashboard-button/index.js b/packages/interface/src/components/main-dashboard-button/index.js
index 137576a0eb8edc..efc3bfaad19e87 100644
--- a/packages/interface/src/components/main-dashboard-button/index.js
+++ b/packages/interface/src/components/main-dashboard-button/index.js
@@ -6,23 +6,23 @@ import {
 	createSlotFill,
 } from '@wordpress/components';
 
-const name = '__experimentalMainDashboardButton';
+const slotName = '__experimentalMainDashboardButton';
 
-const { Fill, Slot } = createSlotFill( name );
+const { Fill, Slot: MainDashboardButtonSlot } = createSlotFill( slotName );
 
 const MainDashboardButton = Fill;
-MainDashboardButton.Slot = Slot;
-MainDashboardButton.slotName = name;
 
-export const CloseButtonSlot = ( { children } ) => {
-	const slot = useSlot( MainDashboardButton.slotName );
+const Slot = ( { children } ) => {
+	const slot = useSlot( slotName );
 	const hasFills = Boolean( slot.fills && slot.fills.length );
 
 	if ( ! hasFills ) {
 		return children;
 	}
 
-	return <MainDashboardButton.Slot bubblesVirtually />;
+	return <MainDashboardButtonSlot bubblesVirtually />;
 };
 
+MainDashboardButton.Slot = Slot;
+
 export default MainDashboardButton;