Introduces PluginSettingsSidebar slotfill to the Document sidebar.

packages/e2e-tests/plugins/plugins-api.php

@@ -73,6 +73,19 @@ function enqueue_plugins_api_plugin_scripts() {
 		filemtime( plugin_dir_path( __FILE__ ) . 'plugins-api/annotations-sidebar.js' ),
 		true
 	);
+
+	wp_enqueue_script(
+		'gutenberg-test-plugins-api-document-setting',
+		plugins_url( 'plugins-api/document-setting.js', __FILE__ ),
+		array(
+			'wp-edit-post',
+			'wp-element',
+			'wp-i18n',
+			'wp-plugins',
+		),
+		filemtime( plugin_dir_path( __FILE__ ) . 'plugins-api/document-setting.js' ),
+		true
+	);
 }
 
 add_action( 'init', 'enqueue_plugins_api_plugin_scripts' );

packages/e2e-tests/plugins/plugins-api/document-setting.js

@@ -0,0 +1,21 @@
+( function() {
+	var el = wp.element.createElement;
+	var __ = wp.i18n.__;
+	var registerPlugin = wp.plugins.registerPlugin;
+	var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
+
+	function MyDocumentSettingPlugin() {
+		return el(
+			PluginDocumentSettingPanel,
+			{
+				className: 'my-document-setting-plugin',
+				title: 'My Custom Panel'
+			},
+			__( 'My Document Setting Panel' )
+		);
+	}
+
+	registerPlugin( 'my-document-setting-plugin', {
+		render: MyDocumentSettingPlugin
+	} );
+} )();

packages/e2e-tests/specs/plugins/__snapshots__/plugins-api.test.js.snap

@@ -1,3 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = `
+"
+My Custom Panel
+"
+`;
+
 exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"<div class=\\"components-panel__header edit-post-sidebar-header__small\\"><span class=\\"edit-post-sidebar-header__title\\">(no title)</span><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-no-alt\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel__header edit-post-sidebar-header\\"><strong>Sidebar title plugin</strong><button type=\\"button\\" aria-label=\\"Unpin from toolbar\\" aria-expanded=\\"true\\" class=\\"components-button components-icon-button is-toggled\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-star-filled\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M10 1l3 6 6 .75-4.12 4.62L16 19l-6-3-6 3 1.13-6.63L1 7.75 7 7z\\"></path></svg></button><button type=\\"button\\" aria-label=\\"Close plugin\\" class=\\"components-button components-icon-button\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-no-alt\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></div><div class=\\"components-panel\\"><div class=\\"components-panel__body is-opened\\"><div class=\\"components-panel__row\\"><label for=\\"title-plain-text\\">Title:</label><textarea class=\\"editor-plain-text block-editor-plain-text\\" id=\\"title-plain-text\\" placeholder=\\"(no title)\\" rows=\\"1\\" style=\\"overflow: hidden; overflow-wrap: break-word; resize: none; height: 18px;\\"></textarea></div><div class=\\"components-panel__row\\"><button type=\\"button\\" class=\\"components-button is-button is-primary\\">Reset</button></div></div></div>"`;

packages/e2e-tests/specs/plugins/plugins-api.test.js

@@ -76,4 +76,12 @@ describe( 'Using Plugins API', () => {
 			expect( pluginSidebarClosed ).toBeNull();
 		} );
 	} );
+
+	describe( 'Document Setting Custom Panel', () => {
+		it( 'Should render a custom panel inside Document Setting sidebar', async () => {
+			await openDocumentSettingsSidebar();
+			const pluginDocumentSettingsText = await page.$eval( '.edit-post-sidebar .my-document-setting-plugin', ( el ) => el.innerText );
+			expect( pluginDocumentSettingsText ).toMatchSnapshot();
+		} );
+	} );
 } );

packages/edit-post/README.md

@@ -100,6 +100,60 @@ _Returns_
 
 -   `WPElement`: The WPElement to be rendered.
 
+<a name="PluginDocumentSettingPanel" href="#PluginDocumentSettingPanel">#</a> **PluginDocumentSettingPanel**
+
+Renders items below the Status & Availability panel in the Document Sidebar.
+
+_Usage_
+
+```js
+// Using ES5 syntax
+var el = wp.element.createElement;
+var __ = wp.i18n.__;
+var registerPlugin = wp.plugins.registerPlugin;
+var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
+
+function MyDocumentSettingPlugin() {
+	return el(
+		PluginDocumentSettingPanel,
+		{
+			className: 'my-document-setting-plugin',
+		},
+		__( 'My Document Setting Panel' )
+	);
+}
+
+registerPlugin( 'my-document-setting-plugin', {
+		render: MyDocumentSettingPlugin
+} );
+```
+
+```jsx
+// Using ESNext syntax
+const { registerPlugin } = wp.plugins;
+const { PluginDocumentSettingPanel } = wp.editPost;
+
+const MyDocumentSettingTest = () => (
+		<PluginDocumentSettingPanel className="my-document-setting-plugin">
+		<p>My Document Setting Panel</p>
+	</PluginDocumentSetting>
+);
+
+ registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
+```
+
+_Parameters_
+
+-   _props_ `Object`: Component properties.
+-   _props.name_ `[string]`: The machine-friendly name for the panel.
+-   _props.className_ `[string]`: An optional class name added to the row.
+-   _props.title_ `[string]`: The title of the panel
+-   _props.icon_ `[(string|Element)]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+
+_Returns_
+
+-   `WPElement`: The WPElement to be rendered.
+
 <a name="PluginMoreMenuItem" href="#PluginMoreMenuItem">#</a> **PluginMoreMenuItem**
 
 Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided.

packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js

@@ -0,0 +1,106 @@
+/**
+ * Defines as extensibility slot for the Settings sidebar
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill, PanelBody } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import { withPluginContext } from '@wordpress/plugins';
+import { withDispatch, withSelect } from '@wordpress/data';
+
+export const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
+
+const PluginDocumentSettingFill = ( { isEnabled, opened, onToggle, className, title, icon, children } ) => {
+	if ( ! isEnabled ) {
+		return null;
+	}
+	return (
+		<Fill>
+			<PanelBody
+				className={ className }
+				title={ title }
+				icon={ icon }
+				opened={ opened }
+				onToggle={ onToggle }
+			>
+				{ children }
+			</PanelBody>
+		</Fill>
+	);
+};
+
+/**
+ * Renders items below the Status & Availability panel in the Document Sidebar.
+ *
+ * @param {Object} props Component properties.
+ * @param {string} [props.name] The machine-friendly name for the panel.
+ * @param {string} [props.className] An optional class name added to the row.
+ * @param {string} [props.title] The title of the panel
+ * @param {string|Element} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
+ *
+ * @example <caption>ES5</caption>
+ * ```js
+ * // Using ES5 syntax
+ * var el = wp.element.createElement;
+ * var __ = wp.i18n.__;
+ * var registerPlugin = wp.plugins.registerPlugin;
+ * var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
+ *
+ * function MyDocumentSettingPlugin() {
+ * 	return el(
+ * 		PluginDocumentSettingPanel,
+ * 		{
+ * 			className: 'my-document-setting-plugin',
+ * 		},
+ * 		__( 'My Document Setting Panel' )
+ * 	);
+ * }
+ *
+ * registerPlugin( 'my-document-setting-plugin', {
+ * 		render: MyDocumentSettingPlugin
+ * } );
+ * ```
+ *
+ * @example <caption>ESNext</caption>
+ * ```jsx
+ * // Using ESNext syntax
+ * const { registerPlugin } = wp.plugins;
+ * const { PluginDocumentSettingPanel } = wp.editPost;
+ *
+ * const MyDocumentSettingTest = () => (
+ * 		<PluginDocumentSettingPanel className="my-document-setting-plugin">
+ *			<p>My Document Setting Panel</p>
+ *		</PluginDocumentSetting>
+ *	);
+ *
+ *  registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
+ * ```
+ *
+ * @return {WPElement} The WPElement to be rendered.
+ */
+const PluginDocumentSettingPanel = compose(
+	withPluginContext( ( context, ownProps ) => {
+		return {
+			icon: ownProps.icon || context.icon,
+			panelName: `${ context.name }/${ ownProps.name }`,
+		};
+	} ),
+	withSelect( ( select, { panelName } ) => {
+		return (
+			{
+				opened: select( 'core/edit-post' ).isEditorPanelOpened( panelName ),
+				isEnabled: select( 'core/edit-post' ).isEditorPanelEnabled( panelName ),
+			}
+		);
+	} ),
+	withDispatch( ( dispatch, { panelName } ) => ( {
+		onToggle() {
+			return dispatch( 'core/edit-post' ).toggleEditorPanelOpened( panelName );
+		},
+	} ) ),
+)( PluginDocumentSettingFill );
+
+PluginDocumentSettingPanel.Slot = Slot;
+export default PluginDocumentSettingPanel;

packages/edit-post/src/components/sidebar/settings-sidebar/index.js

@@ -20,6 +20,7 @@ import PostLink from '../post-link';
 import DiscussionPanel from '../discussion-panel';
 import PageAttributes from '../page-attributes';
 import MetaBoxes from '../../meta-boxes';
+import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 
 const SettingsSidebar = ( { sidebarName } ) => (
 	<Sidebar
@@ -31,6 +32,7 @@ const SettingsSidebar = ( { sidebarName } ) => (
 			{ sidebarName === 'edit-post/document' && (
 				<>
 					<PostStatus />
+					<PluginDocumentSettingPanel.Slot />
 					<LastRevision />
 					<PostLink />
 					<PostTaxonomies />

packages/edit-post/src/index.js

@@ -88,6 +88,7 @@ export function initializeEditor( id, postType, postId, settings, initialEdits )
 }
 
 export { default as PluginBlockSettingsMenuItem } from './components/block-settings-menu/plugin-block-settings-menu-item';
+export { default as PluginDocumentSettingPanel } from './components/sidebar/plugin-document-setting-panel';
 export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item';
 export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-publish-panel';
 export { default as PluginPostStatusInfo } from './components/sidebar/plugin-post-status-info';