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,93 @@ 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
+		className="my-plugin-pre-publish-panel"
+		title={ __( 'My panel title' ) }
+		initialOpen={ true }
+	>
+	    { __( 'My panel content' ) }
+	</PluginPrePublishPanel>
+);
+```
+
+#### Props
+
+##### className
+
+An optional class name added to the panel.
+
+- Type: `String`
+- Required: No
+
+##### 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 MyPluginPostPublishPanel = () => (
+	<PluginPostPublishPanel
+		className="my-plugin-post-publish-panel"
+		title={ __( 'My panel title' ) }
+		initialOpen={ true }
+	>
+        { __( 'My panel content' ) }
+	</PluginPostPublishPanel>
+);
+```
+
+#### Props
+
+##### className
+
+An optional class name added to the panel.
+
+- Type: `String`
+- Required: No
+
+##### 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,22 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelBody } from '@wordpress/components';
+
+const { Fill, Slot } = createSlotFill( 'PluginPostPublishPanel' );
+
+const PluginPostPublishPanel = ( { children, className, title, initialOpen = false } ) => (
+	<Fill>
+		<PanelBody
+			className={ className }
+			initialOpen={ initialOpen || ! title }
+			title={ title }
+		>
+			{ children }
+		</PanelBody>
+	</Fill>
+);
+
+PluginPostPublishPanel.Slot = Slot;
+
+export default PluginPostPublishPanel;

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

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PluginPostPublishPanel renders fill properly 1`] = `
+<div>
+  <PanelBody
+    className="my-plugin-post-publish-panel"
+    initialOpen={true}
+    key="1---0/.0"
+    title="My panel title"
+  >
+    <div
+      className="components-panel__body my-plugin-post-publish-panel is-opened"
+    >
+      <h2
+        className="components-panel__body-title"
+      >
+        <Button
+          aria-expanded={true}
+          className="components-panel__body-toggle"
+          onClick={[Function]}
+        >
+          <button
+            aria-expanded={true}
+            className="components-button components-panel__body-toggle"
+            onClick={[Function]}
+            type="button"
+          >
+            <Dashicon
+              icon="arrow-up"
+            >
+              <svg
+                aria-hidden={true}
+                className="dashicon dashicons-arrow-up"
+                focusable="false"
+                height={20}
+                role="img"
+                viewBox="0 0 20 20"
+                width={20}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7 13l4.03-6L15 13H7z"
+                />
+              </svg>
+            </Dashicon>
+            My panel title
+          </button>
+        </Button>
+      </h2>
+      My panel content
+    </div>
+  </PanelBody>
+</div>
+`;

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

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginPostPublishPanel from '../';
+
+describe( 'PluginPostPublishPanel', () => {
+	test( 'renders fill properly', () => {
+		const wrapper = mount(
+			<SlotFillProvider>
+				<PluginPostPublishPanel
+					className="my-plugin-post-publish-panel"
+					title="My panel title"
+					initialOpen={ true }
+				>
+					My panel content
+				</PluginPostPublishPanel>
+				<PluginPostPublishPanel.Slot />
+			</SlotFillProvider>
+		);
+
+		expect( wrapper.find( 'Slot' ).children() ).toMatchSnapshot();
+	} );
+} );

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

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

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

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PluginPrePublishPanel renders fill properly 1`] = `
+<div>
+  <PanelBody
+    className="my-plugin-pre-publish-panel"
+    initialOpen={true}
+    key="1---0/.0"
+    title="My panel title"
+  >
+    <div
+      className="components-panel__body my-plugin-pre-publish-panel is-opened"
+    >
+      <h2
+        className="components-panel__body-title"
+      >
+        <Button
+          aria-expanded={true}
+          className="components-panel__body-toggle"
+          onClick={[Function]}
+        >
+          <button
+            aria-expanded={true}
+            className="components-button components-panel__body-toggle"
+            onClick={[Function]}
+            type="button"
+          >
+            <Dashicon
+              icon="arrow-up"
+            >
+              <svg
+                aria-hidden={true}
+                className="dashicon dashicons-arrow-up"
+                focusable="false"
+                height={20}
+                role="img"
+                viewBox="0 0 20 20"
+                width={20}
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7 13l4.03-6L15 13H7z"
+                />
+              </svg>
+            </Dashicon>
+            My panel title
+          </button>
+        </Button>
+      </h2>
+      My panel content
+    </div>
+  </PanelBody>
+</div>
+`;

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

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+
+/**
+ * WordPress dependencies
+ */
+import { SlotFillProvider } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PluginPrePublishPanel from '../';
+
+describe( 'PluginPrePublishPanel', () => {
+	test( 'renders fill properly', () => {
+		const wrapper = mount(
+			<SlotFillProvider>
+				<PluginPrePublishPanel
+					className="my-plugin-pre-publish-panel"
+					title="My panel title"
+					initialOpen={ true }
+				>
+					My panel content
+				</PluginPrePublishPanel>
+				<PluginPrePublishPanel.Slot />
+			</SlotFillProvider>
+		);
+
+		expect( wrapper.find( 'Slot' ).children() ).toMatchSnapshot();
+	} );
+} );

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>
 		);