diff --git a/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md b/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md index 25a5ab915cb54..b0bb15e5363d9 100644 --- a/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md +++ b/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md @@ -30,3 +30,13 @@ registerPlugin( 'plugin-document-setting-panel-demo', { icon: 'palmtree', } ); ``` +## Accessing a panel programmatically + +Custom panels are namespaced with the plugin name that was passed to `registerPlugin`. +In order to access the panels using function such as `wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelOpened` or `wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelEnabled` be sure to prepend the namepace. + +To programmatically toggle the custom panel added in the example above, use the following: + +```js +wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'plugin-document-setting-panel-demo/custom-panel' ); +``` diff --git a/package-lock.json b/package-lock.json index 1224a12c0cf1e..91381d3c2a86e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10839,6 +10839,7 @@ "@wordpress/primitives": "file:packages/primitives", "@wordpress/url": "file:packages/url", "@wordpress/viewport": "file:packages/viewport", + "@wordpress/warning": "file:packages/warning", "classnames": "^2.2.5", "lodash": "^4.17.15", "memize": "^1.1.0", diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index 12b0758a3ea8d..bb2ffd25d20b0 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -52,6 +52,7 @@ "@wordpress/primitives": "file:../primitives", "@wordpress/url": "file:../url", "@wordpress/viewport": "file:../viewport", + "@wordpress/warning": "file:../warning", "classnames": "^2.2.5", "lodash": "^4.17.15", "memize": "^1.1.0", diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js index 56133e8162aad..c83b42f2bee57 100644 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js @@ -9,6 +9,7 @@ import { createSlotFill, PanelBody } from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { withPluginContext } from '@wordpress/plugins'; import { withDispatch, withSelect } from '@wordpress/data'; +import warning from '@wordpress/warning'; /** * Internal dependencies @@ -104,6 +105,9 @@ const PluginDocumentSettingFill = ( { */ const PluginDocumentSettingPanel = compose( withPluginContext( ( context, ownProps ) => { + if ( undefined === ownProps.name ) { + warning( 'PluginDocumentSettingPanel requires a name property.' ); + } return { icon: ownProps.icon || context.icon, panelName: `${ context.name }/${ ownProps.name }`,