This is an example
; - }, -} ); -``` - -### Activating a sidebar - -`wp.editPost.__experimentalActivateSidebar( name: string )` - -This method takes the `name` of the sidebar you'd like to open. That sidebar should have been registered beforehand using the `registerSidebar` method. - -**Example** - -```js -wp.editPost.__experimentalActivateSidebar( 'my-plugin/my-custom-sidebar' ); -``` - -## Extending the editor's UI (Slot and Fill) - -Coming soon. +Refer to [the plugins module documentation](../plugins/) for more information. diff --git a/edit-post/api/README.md b/edit-post/api/README.md deleted file mode 100644 index 22537eab2210d..0000000000000 --- a/edit-post/api/README.md +++ /dev/null @@ -1,37 +0,0 @@ -Edit post API -==== - -The edit post API contains the following methods: - -### `wp.editPost.__experimentalRegisterSidebar( name: string, settings: { title: string, render: function } )` - -**Warning:** This is an experimental API, and is subject to change or even removal. - -This method takes two arguments: -- a `name` to identify the sidebar. This name should contain a namespace prefix, followed by a slash and a sidebar name. The name should include only lowercase alphanumeric characters or dashes, and start with a letter. Example: `my-plugin/my-custom-sidebar`. -- a `settings` object, containing a title and a render function. - -This method only registers a sidebar. To open the sidebar, use the `__experimentalActivateSidebar` method below. - -#### Example: - -```js -wp.editPost.__experimentalRegisterSidebar( 'my-plugin/my-custom-sidebar', { - render: function mySidebar() { - returnThis is an example
; - }, -} ); -``` - -### `wp.editPost.__experimentalActivateSidebar( name: string )` - -**Warning:** This is an experimental API, and is subject to change or even removal. - -This method takes one argument: -- the `name` of the sidebar you'd like to open. That sidebar should have been registered beforehand using the `__experimentalRegisterSidebar` method. - -#### Example: - -```js -wp.editPost.__experimentalActivateSidebar( 'my-plugin/my-custom-sidebar' ); -``` diff --git a/edit-post/api/index.js b/edit-post/api/index.js deleted file mode 100644 index 3284d43eacacf..0000000000000 --- a/edit-post/api/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export { - registerSidebar as __experimentalRegisterSidebar, - activateSidebar as __experimentalActivateSidebar, -} from './sidebar'; diff --git a/edit-post/api/sidebar.js b/edit-post/api/sidebar.js deleted file mode 100644 index f1f5eee0890af..0000000000000 --- a/edit-post/api/sidebar.js +++ /dev/null @@ -1,100 +0,0 @@ -/* eslint no-console: [ 'error', { allow: [ 'error' ] } ] */ - -/* External dependencies */ -import { isFunction } from 'lodash'; - -/** - * WordPress dependencies - */ -import { dispatch } from '@wordpress/data'; - -/* Internal dependencies */ -import { applyFilters } from '@wordpress/hooks'; - -const sidebars = {}; - -/** - * Registers a sidebar to the editor. - * - * A button will be shown in the settings menu to open the sidebar. The sidebar - * can be manually opened by calling the `activateSidebar` function. - * - * @param {string} name The name of the sidebar. Should be in - * `[plugin]/[sidebar]` format. - * @param {Object} settings The settings for this sidebar. - * @param {string} settings.title The name to show in the settings menu. - * @param {Function} settings.render The function that renders the sidebar. - * - * @return {Object} The final sidebar settings object. - */ -export function registerSidebar( name, settings ) { - settings = { - name, - ...settings, - }; - - if ( typeof name !== 'string' ) { - console.error( - 'Sidebar names must be strings.' - ); - return null; - } - if ( ! /^[a-z][a-z0-9-]*\/[a-z][a-z0-9-]*$/.test( name ) ) { - console.error( - 'Sidebar names must contain a namespace prefix, include only lowercase alphanumeric characters or dashes, and start with a letter. Example: my-plugin/my-custom-sidebar.' - ); - return null; - } - if ( ! settings || ! isFunction( settings.render ) ) { - console.error( - 'The "render" property must be specified and must be a valid function.' - ); - return null; - } - if ( sidebars[ name ] ) { - console.error( - `Sidebar ${ name } is already registered.` - ); - } - - if ( ! settings.title ) { - console.error( - `The sidebar ${ name } must have a title.` - ); - return null; - } - if ( typeof settings.title !== 'string' ) { - console.error( - 'Sidebar titles must be strings.' - ); - return null; - } - - settings = applyFilters( 'editor.registerSidebar', settings, name ); - - return sidebars[ name ] = settings; -} - -/** - * Retrieves the sidebar settings object. - * - * @param {string} name The name of the sidebar to retrieve the settings for. - * - * @return {Object} The settings object of the sidebar. Or null if the - * sidebar doesn't exist. - */ -export function getSidebarSettings( name ) { - if ( ! sidebars.hasOwnProperty( name ) ) { - return null; - } - return sidebars[ name ]; -} -/** - * Activates the given sidebar. - * - * @param {string} name The name of the sidebar to activate. - * @return {void} - */ -export function activateSidebar( name ) { - dispatch( 'core/edit-post' ).openGeneralSidebar( name ); -} diff --git a/edit-post/components/layout/index.js b/edit-post/components/layout/index.js index 764b64dc3b558..30de1adb50b94 100644 --- a/edit-post/components/layout/index.js +++ b/edit-post/components/layout/index.js @@ -19,6 +19,7 @@ import { } from '@wordpress/editor'; import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/element'; +import { PluginArea } from '@wordpress/plugins'; /** * Internal dependencies @@ -31,12 +32,13 @@ import VisualEditor from '../visual-editor'; import EditorModeKeyboardShortcuts from '../keyboard-shortcuts'; import MetaBoxes from '../meta-boxes'; import { getMetaBoxContainer } from '../../utils/meta-boxes'; -import PluginsPanel from '../../components/plugins-panel/index.js'; +import PluginSidebar from '../plugin-sidebar'; function Layout( { mode, editorSidebarOpened, pluginSidebarOpened, + sidebarName, publishSidebarOpened, hasFixedToolbar, closePublishSidebar, @@ -81,8 +83,9 @@ function Layout( { /> ) } { editorSidebarOpened &&