Extensibility: Add publish panels support for plugins

CONTRIBUTORS.md

@@ -94,3 +94,4 @@ This list is manually curated to include valuable contributions by volunteers th
 | @Cloud887 |
 | @hblackett |
 | @vishalkakadiya |
+| @c-shultz |

edit-post/README.md

@@ -109,6 +109,7 @@ The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug st
 - Required: No
 - Default: _inherits from the plugin_
 
+
 ### `PluginPostStatusInfo`
 
 Renders a row in the Status & Visibility panel of the Document sidebar.
@@ -127,3 +128,77 @@ const MyPluginPostStatusInfo = () => (
 ```
 
 
+### `PluginPrePublishPanel`
+
+Renders provided content to the pre-publish side panel in the publish flow (side panel that opens when a user first pushes "Publish" from the main editor).
+
+_Example:_
+
+```jsx
+const { __ } = wp.i18n;
+const { PluginPrePublishPanel } = wp.editPost;
+
+const MyPluginPrePublishPanel = () => (
+	<PluginPrePublishPanel
+		title={ __( 'My panel title' ) }
+		initialOpen={ true }
+	>
+	    { __( 'My panel content' ) }
+	</PluginPrePublishPanel>
+);
+```
+
+#### Props
+
+##### title
+
+Title displayed at the top of the panel.
+
+- Type: `String`
+- Required: No
+
+##### initialOpen
+
+Whether to have the panel initially opened. When no title is provided it is always opened.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+
+
+### `PluginPostPublishPanel`
+
+Renders provided content to the post-publish panel in the publish flow (side panel that opens after a user publishes the post).
+
+_Example:_
+
+```jsx
+const { __ } = wp.i18n;
+const { PluginPostPublishPanel } = wp.editPost;
+
+const MyPluginPrePublishPanel = () => (
+	<PluginPostPublishPanel
+		title={ __( 'My panel title' ) }
+		initialOpen={ true }
+	>
+        { __( 'My panel content' ) }
+	</PluginPostPublishPanel>
+);
+```
+
+#### Props
+
+##### title
+
+Title displayed at the top of the panel.
+
+- Type: `String`
+- Required: No
+
+##### initialOpen
+
+Whether to have the panel initially opened. When no title is provided it is always opened. 
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`

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 '../sidebar/plugin-post-publish-panel';
+import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel';
 
 function Layout( {
 	mode,
@@ -84,6 +86,8 @@ function Layout( {
 					onClose={ closePublishSidebar }
 					forceIsDirty={ hasActiveMetaboxes }
 					forceIsSaving={ isSaving }
+					renderPrePublishExtension={ () => <PluginPrePublishPanel.Slot /> }
+					renderPostPublishExtension={ () => <PluginPostPublishPanel.Slot /> }
 				/>
 			) }
 			<DocumentSidebar />

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

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelBody } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
+
+const PluginPostPublishPanel = ( { children, title, initialOpen = false } ) => (
+	<Fill>
+		<PanelBody initialOpen={ initialOpen || ! title } title={ title }>
+			{ children }
+		</PanelBody>
+	</Fill>
+);
+
+PluginPostPublishPanel.Slot = Slot;
+
+export default PluginPostPublishPanel;

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

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelBody } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginPrePublishPanel' );
+
+const PluginPrePublishPanel = ( { children, title, initialOpen = false } ) => (
+	<Fill>
+		<PanelBody initialOpen={ initialOpen || ! title } title={ title }>
+			{ children }
+		</PanelBody>
+	</Fill>
+);
+
+PluginPrePublishPanel.Slot = Slot;
+
+export default PluginPrePublishPanel;

edit-post/index.js

@@ -80,6 +80,8 @@ export function initializeEditor( id, post, settings ) {
 	};
 }
 
+export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-publish-panel';
 export { default as PluginPostStatusInfo } from './components/sidebar/plugin-post-status-info';
+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';

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, renderPrePublishExtension, renderPostPublishExtension } = this.props;
 		const { loading, submitted } = this.state;
 		return (
 			<div className="editor-post-publish-panel">
@@ -82,9 +82,17 @@ class PostPublishPanel extends Component {
 					/>
 				</div>
 				<div className="editor-post-publish-panel__content">
-					{ ! loading && ! submitted && <PostPublishPanelPrepublish /> }
+					{ ! loading && ! submitted && (
+						<PostPublishPanelPrepublish>
+							{ renderPrePublishExtension() }
+						</PostPublishPanelPrepublish>
+					) }
 					{ loading && ! submitted && <Spinner /> }
-					{ submitted && <PostPublishPanelPostpublish /> }
+					{ submitted && (
+						<PostPublishPanelPostpublish>
+							{ renderPostPublishExtension() }
+						</PostPublishPanelPostpublish>
+					) }
 				</div>
 			</div>
 		);

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

@@ -48,7 +48,7 @@ class PostPublishPanelPostpublish extends Component {
 	}
 
 	render() {
-		const { isScheduled, post, postType } = this.props;
+		const { children, isScheduled, post, postType } = this.props;
 		const viewPostLabel = get( postType, [ 'labels', 'view_item' ] );
 
 		const postPublishNonLinkHeader = isScheduled ?
@@ -84,6 +84,7 @@ class PostPublishPanelPostpublish extends Component {
 						</ClipboardButton>
 					</div>
 				</PanelBody>
+				{ 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( { children } ) {
 	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>
+			{ children }
 		</div>
 	);
 }