Publicize: Adding to Gutenberg Extensibility for Publicize Support

edit-post/README.md

@@ -127,3 +127,28 @@ const MyPluginPostStatusInfo = () => (
 ```
 
 
+### PluginPrePublishPanel
+**Experimental**
+
+Renders provided content to the pre-publish side panel in the publish flow (side panel that opens when user first pushes "Publish" from main editor).
+
+#### Usage
+
+```jsx
+<PluginPrePublishPanel>
+    <div>My plugin content</div>
+</PluginPrePublishPanel>
+```
+
+### PluginPostPublishPanel
+**Experimental**
+
+Renders provided content to the post-publish panel in the publish flow (panel that opens after user publishes the post)
+
+#### Usage
+
+```jsx
+<PluginPostPublishPanel>
+    <div>My plugin content</div>
+</PluginPostPublishPanel>
+```

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 />

edit-post/components/plugin-post-publish-panel/index.js

@@ -0,0 +1,16 @@
+/**
+ * Defines extensibility slot for post-publish sidebar.
+ *
+ * Defines slot to be used by plugins to insert content in the post-publish sidebar
+ * (which appears after a user fully publishes a post).
+ *
+ * @file   This files defines the PluginPostPublishPanel extension
+ * @since  2.7.0
+ */
+
+/**
+ * Internal dependencies
+ */
+import { createSlotFill } from '../../../components/slot-fill';
+
+export default createSlotFill( 'PluginPostPublishPanel' );

edit-post/components/plugin-pre-publish-panel/index.js

@@ -0,0 +1,16 @@
+/**
+ * Defines extensibility slot for pre-publish sidebar.
+ *
+ * Defines slot to be used by plugins to insert content in the pre-publish sidebar
+ * (which appears when a user pushes "Publish" from the main editor).
+ *
+ * @file   This files defines the PluginPrePublishPanel extension
+ * @since  2.7.0
+ */
+
+/**
+ * Internal dependencies
+ */
+import { createSlotFill } from '../../../components/slot-fill';
+
+export default createSlotFill( 'PluginPrePublishPanel' );

edit-post/index.js

@@ -80,6 +80,8 @@ export function initializeEditor( id, post, settings ) {
 	};
 }
 
+export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-status-info';
 export { default as PluginPostStatusInfo } from './components/sidebar/plugin-post-status-info';
+export { default as PluginPrePublishPanel } from './components/sidebar/plugin-post-status-info';
 export { default as PluginSidebar } from './components/sidebar/plugin-sidebar';
 export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item';

editor/components/post-publish-panel/index.js

@@ -60,7 +60,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">
@@ -82,9 +82,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>
 		);

editor/components/post-publish-panel/postpublish.js

@@ -84,6 +84,7 @@ class PostPublishPanelPostpublish extends Component {
 						</ClipboardButton>
 					</div>
 				</PanelBody>
+				{ this.props.children }
 			</div>
 		);
 	}

editor/components/post-publish-panel/prepublish.js

@@ -12,7 +12,7 @@ import PostVisibilityLabel from '../post-visibility/label';
 import PostSchedule from '../post-schedule';
 import PostScheduleLabel from '../post-schedule/label';
 
-function PostPublishPanelPrepublish() {
+function PostPublishPanelPrepublish( props ) {
 	return (
 		<div className="editor-post-publish-panel__prepublish">
 			<div><strong>{ __( 'Are you ready to publish?' ) }</strong></div>
@@ -29,6 +29,7 @@ function PostPublishPanelPrepublish() {
 			] }>
 				<PostSchedule />
 			</PanelBody>
+			{ props.children }
 		</div>
 	);
 }