Editor: Unify the PluginSidebar slot between post and site editors

Author: youknowriad

docs/how-to-guides/plugin-sidebar-0.md

@@ -16,15 +16,15 @@ The tutorial assumes you have an existing plugin setup and are ready to add PHP
 
 ### Step 1: Get a sidebar up and running
 
-The first step is to tell the editor that there is a new plugin that will have its own sidebar. Use the [registerPlugin](/packages/plugins/README.md), [PluginSidebar](/packages/edit-post/README.md#pluginsidebar), and [createElement](/packages/element/README.md) utilities provided by the `@wordpress/plugins`, `@wordpress/edit-post`, and `react` packages, respectively.
+The first step is to tell the editor that there is a new plugin that will have its own sidebar. Use the [registerPlugin](/packages/plugins/README.md), [PluginSidebar](/packages/editor/README.md#pluginsidebar), and [createElement](/packages/element/README.md) utilities provided by the `@wordpress/plugins`, `@wordpress/editor`, and `react` packages, respectively.
 
 Add the following code to a JavaScript file called `plugin-sidebar.js` and save it within your plugin's directory:
 
 ```js
 ( function ( wp, React ) {
 	var el = React.createElement;
 	var registerPlugin = wp.plugins.registerPlugin;
-	var PluginSidebar = wp.editPost.PluginSidebar;
+	var PluginSidebar = wp.editor.PluginSidebar;
 
 	registerPlugin( 'my-plugin-sidebar', {
 		render: function () {
@@ -57,7 +57,7 @@ function sidebar_plugin_register() {
 	wp_register_script(
 		'plugin-sidebar-js',
 		plugins_url( 'plugin-sidebar.js', __FILE__ ),
-		array( 'wp-plugins', 'wp-edit-post', 'react' )
+		array( 'wp-plugins', 'wp-editor', 'react' )
 	);
 }
 add_action( 'init', 'sidebar_plugin_register' );
@@ -82,7 +82,7 @@ To visualize and edit the meta field value you'll use an input component. The `@
 ( function ( wp ) {
 	var el = React.createElement;
 	var registerPlugin = wp.plugins.registerPlugin;
-	var PluginSidebar = wp.editPost.PluginSidebar;
+	var PluginSidebar = wp.editor.PluginSidebar;
 	var TextControl = wp.components.TextControl;
 
 	registerPlugin( 'my-plugin-sidebar', {
@@ -144,7 +144,7 @@ function sidebar_plugin_register() {
 		array(
 			'react',
 			'wp-plugins',
-			'wp-edit-post',
+			'wp-editor',
 			'wp-components'
 		)
 	);
@@ -202,7 +202,7 @@ With the field available in the editor store, it can now be surfaced to the UI.
 ( function ( wp ) {
 	var el = React.createElement;
 	var registerPlugin = wp.plugins.registerPlugin;
-	var PluginSidebar = wp.editPost.PluginSidebar;
+	var PluginSidebar = wp.editor.PluginSidebar;
 	var TextControl = wp.components.TextControl;
 
 	var MetaBlockField = function () {
@@ -243,7 +243,7 @@ The `useSelect` function is used to fetch data when the component loads and will
 ( function ( wp ) {
 	var el = React.createElement;
 	var registerPlugin = wp.plugins.registerPlugin;
-	var PluginSidebar = wp.editPost.PluginSidebar;
+	var PluginSidebar = wp.editor.PluginSidebar;
 	var Text = wp.components.TextControl;
 	var useSelect = wp.data.useSelect;
 
@@ -306,7 +306,7 @@ The `useDispatch` function takes a store name as its only argument and returns m
 ( function ( wp ) {
 	var el = React.createElement;
 	var registerPlugin = wp.plugins.registerPlugin;
-	var PluginSidebar = wp.editPost.PluginSidebar;
+	var PluginSidebar = wp.editor.PluginSidebar;
 	var TextControl = wp.components.TextControl;
 	var useSelect = wp.data.useSelect;
 	var useDispatch = wp.data.useDispatch;

docs/reference-guides/slotfills/plugin-sidebar.md

@@ -7,7 +7,7 @@ Using this slot will add an icon to the bar that, when clicked, will open a side
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginSidebar } from '@wordpress/edit-post';
+import { PluginSidebar } from '@wordpress/editor';
 import { image } from '@wordpress/icons';
 
 const PluginSidebarTest = () => (

packages/compose/README.md

@@ -11,7 +11,7 @@ const compose = ( f, g ) => x
     => f( g( x ) );
 ```
 
-Here's a simplified example of **compose** in use from Gutenberg's [`PluginSidebar` component](https://github.com/WordPress/gutenberg/blob/HEAD/packages/edit-post/src/components/sidebar/plugin-sidebar/index.js):
+Here's a simplified example of **compose** in use from Gutenberg's [`PluginSidebar` component](https://github.com/WordPress/gutenberg/blob/HEAD/packages/editor/src/components/plugin-sidebar/index.js):
 
 Using compose:
 

packages/e2e-test-utils/src/find-sidebar-panel-toggle-button-with-title.js

@@ -9,7 +9,7 @@
  */
 export async function findSidebarPanelToggleButtonWithTitle( panelTitle ) {
 	const buttons = await page.$x(
-		`//div[contains(@class,"edit-post-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ panelTitle }")]`
+		`//div[contains(@class,"editor-sidebar")]//button[@class="components-button components-panel__body-toggle"][contains(text(),"${ panelTitle }")]`
 	);
 	return buttons[ 0 ];
 }

packages/e2e-test-utils/src/find-sidebar-panel-with-title.js

@@ -8,7 +8,7 @@
  * @return {Promise<ElementHandle|undefined>} Object that represents an in-page DOM element.
  */
 export async function findSidebarPanelWithTitle( panelTitle ) {
-	const panelToggleSelector = `//div[contains(@class, "edit-post-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"${ panelTitle }")]`;
+	const panelToggleSelector = `//div[contains(@class, "editor-sidebar")]//button[contains(@class, "components-panel__body-toggle") and contains(text(),"${ panelTitle }")]`;
 	const panelSelector = `${ panelToggleSelector }/ancestor::*[contains(concat(" ", @class, " "), " components-panel__body ")]`;
 	return await page.waitForXPath( panelSelector );
 }

packages/e2e-test-utils/src/open-document-settings-sidebar.js

@@ -13,6 +13,6 @@ export async function openDocumentSettingsSidebar() {
 
 	if ( isClosed ) {
 		await toggleButton.click();
-		await page.waitForSelector( '.edit-post-sidebar' );
+		await page.waitForSelector( '.editor-sidebar' );
 	}
 }

packages/edit-post/README.md

@@ -135,63 +135,7 @@ _Returns_
 
 ### PluginSidebar
 
-Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar. It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`. If you wish to display the sidebar, you can with use the `PluginSidebarMoreMenuItem` component or the `wp.data.dispatch` API:
-
-```js
-wp.data
-	.dispatch( 'core/edit-post' )
-	.openGeneralSidebar( 'plugin-name/sidebar-name' );
-```
-
-_Related_
-
--   PluginSidebarMoreMenuItem
-
-_Usage_
-
-```js
-// Using ES5 syntax
-var __ = wp.i18n.__;
-var el = React.createElement;
-var PanelBody = wp.components.PanelBody;
-var PluginSidebar = wp.editPost.PluginSidebar;
-var moreIcon = React.createElement( 'svg' ); //... svg element.
-
-function MyPluginSidebar() {
-	return el(
-		PluginSidebar,
-		{
-			name: 'my-sidebar',
-			title: 'My sidebar title',
-			icon: moreIcon,
-		},
-		el( PanelBody, {}, __( 'My sidebar content' ) )
-	);
-}
-```
-
-```jsx
-// Using ESNext syntax
-import { __ } from '@wordpress/i18n';
-import { PanelBody } from '@wordpress/components';
-import { PluginSidebar } from '@wordpress/edit-post';
-import { more } from '@wordpress/icons';
-
-const MyPluginSidebar = () => (
-	<PluginSidebar name="my-sidebar" title="My sidebar title" icon={ more }>
-		<PanelBody>{ __( 'My sidebar content' ) }</PanelBody>
-	</PluginSidebar>
-);
-```
-
-_Parameters_
-
--   _props_ `Object`: Element props.
--   _props.name_ `string`: A string identifying the sidebar. Must be unique for every sidebar registered within the scope of your plugin.
--   _props.className_ `[string]`: An optional class name added to the sidebar body.
--   _props.title_ `string`: Title displayed at the top of the sidebar.
--   _props.isPinnable_ `[boolean]`: Whether to allow to pin sidebar to the toolbar. When set to `true` it also automatically renders a corresponding menu item.
--   _props.icon_ `[WPBlockTypeIconRender]`: 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.
+Undocumented declaration.
 
 ### PluginSidebarMoreMenuItem
 

packages/edit-post/src/index.js

@@ -18,6 +18,7 @@ import {
 	PluginBlockSettingsMenuItem,
 	PluginDocumentSettingPanel,
 	PluginMoreMenuItem,
+	PluginSidebar,
 	privateApis as editorPrivateApis,
 	store as editorStore,
 } from '@wordpress/editor';
@@ -166,10 +167,10 @@ export function reinitializeEditor() {
 export { PluginBlockSettingsMenuItem };
 export { PluginDocumentSettingPanel };
 export { PluginMoreMenuItem };
+export { PluginSidebar };
 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';
 export { default as __experimentalFullscreenModeClose } from './components/header/fullscreen-mode-close';
 export { default as __experimentalMainDashboardButton } from './components/header/main-dashboard-button';

packages/edit-post/src/style.scss

@@ -42,7 +42,7 @@ body.js.block-editor-page {
 // Target the editor UI excluding the visual editor contents, metaboxes and custom fields areas.
 .edit-post-header,
 .edit-post-text-editor,
-.edit-post-sidebar,
+.editor-sidebar,
 .editor-post-publish-panel {
 	@include reset;
 }