Publish sidebar extensibility: removing edit-post editor dependency

Now passing pre/post publish plugin slot using new prop and children prop instead of referencing it directly from within editor. props @youknowriad
WordPress · Apr 12, 2018 · f0acdcf · f0acdcf
1 parent b462ae1
commit f0acdcf
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js
@@ -35,6 +35,8 @@ import EditorModeKeyboardShortcuts from '../keyboard-shortcuts';
 import MetaBoxes from '../meta-boxes';
 import { getMetaBoxContainer } from '../../utils/meta-boxes';
 import Sidebar from '../sidebar';
+import PluginPostPublishPanel from '../plugin-post-publish-panel';
+import PluginPrePublishPanel from '../plugin-pre-publish-panel';
 
 function Layout( {
 	mode,
@@ -84,7 +86,11 @@ function Layout( {
 					onClose={ closePublishSidebar }
 					forceIsDirty={ hasActiveMetaboxes }
 					forceIsSaving={ isSaving }
-				/>
+					prePublishExtension={ <PluginPrePublishPanel.Slot /> }
+					postPublishExtension={ <PluginPostPublishPanel.Slot /> }
+				>
+					<PluginPostPublishPanel.Slot />
+				</PostPublishPanel>
 			) }
 			<DocumentSidebar />
 			<BlockSidebar />

diff --git a/editor/components/post-publish-panel/index.js b/editor/components/post-publish-panel/index.js
@@ -69,7 +69,7 @@ class PostPublishPanel extends Component {
 	}
 
 	render() {
-		const { isScheduled, onClose, forceIsDirty, forceIsSaving } = this.props;
+		const { isScheduled, onClose, forceIsDirty, forceIsSaving, prePublishExtension, postPublishExtension } = this.props;
 		const { loading, submitted } = this.state;
 		return (
 			<div className="editor-post-publish-panel">
@@ -91,9 +91,9 @@ class PostPublishPanel extends Component {
 					/>
 				</div>
 				<div className="editor-post-publish-panel__content">
-					{ ! loading && ! submitted && <PostPublishPanelPrepublish /> }
+					{ ! loading && ! submitted && <PostPublishPanelPrepublish>{ prePublishExtension }</PostPublishPanelPrepublish> }
 					{ loading && ! submitted && <Spinner /> }
-					{ submitted && <PostPublishPanelPostpublish /> }
+					{ submitted && <PostPublishPanelPostpublish>{ postPublishExtension }</PostPublishPanelPostpublish> }
 				</div>
 			</div>
 		);

diff --git a/editor/components/post-publish-panel/postpublish.js b/editor/components/post-publish-panel/postpublish.js
@@ -15,7 +15,6 @@ import { withSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import PostScheduleLabel from '../post-schedule/label';
-import PluginPostPublishPanel from '../../../edit-post/components/plugin-post-publish-panel';
 
 class PostPublishPanelPostpublish extends Component {
 	constructor() {
@@ -84,7 +83,7 @@ class PostPublishPanelPostpublish extends Component {
 						</ClipboardButton>
 					</div>
 				</PanelBody>
-				<PluginPostPublishPanel.Slot />
+				{ this.props.children }
 			</div>
 		);
 	}

diff --git a/editor/components/post-publish-panel/prepublish.js b/editor/components/post-publish-panel/prepublish.js
@@ -11,9 +11,8 @@ import PostVisibility from '../post-visibility';
 import PostVisibilityLabel from '../post-visibility/label';
 import PostSchedule from '../post-schedule';
 import PostScheduleLabel from '../post-schedule/label';
-import PluginPrePublishPanel from '../../../edit-post/components/plugin-pre-publish-panel';
 
-function PostPublishPanelPrepublish() {
+function PostPublishPanelPrepublish( props ) {
 	return (
 		<div className="editor-post-publish-panel__prepublish">
 			<div><strong>{ __( 'Are you ready to publish?' ) }</strong></div>
@@ -30,7 +29,7 @@ function PostPublishPanelPrepublish() {
 			] }>
 				<PostSchedule />
 			</PanelBody>
-			<PluginPrePublishPanel.Slot />
+			{ props.children }
 		</div>
 	);
 }