Extensibility: support the PluginDocumentSettingPanel slot in the sit…

…e editor (#59985) Co-authored-by: youknowriad <[email protected]> Co-authored-by: fabiankaegy <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: gziolo <[email protected]>
WordPress · Mar 20, 2024 · 87a2044 · 87a2044
1 parent 72582c9
commit 87a2044
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 71 deletions.
diff --git a/docs/reference-guides/slotfills/plugin-document-setting-panel.md b/docs/reference-guides/slotfills/plugin-document-setting-panel.md
@@ -13,7 +13,7 @@ This SlotFill allows registering a UI to edit Document settings.
 
 ```js
 import { registerPlugin } from '@wordpress/plugins';
-import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
+import { PluginDocumentSettingPanel } from '@wordpress/editor';
 
 const PluginDocumentSettingPanelDemo = () => (
 	<PluginDocumentSettingPanel

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md
@@ -99,64 +99,7 @@ _Returns_
 
 ### PluginDocumentSettingPanel
 
-Renders items below the Status & Availability panel in the Document Sidebar.
-
-_Usage_
-
-```js
-// Using ES5 syntax
-var el = React.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 Panel',
-			name: 'my-panel',
-		},
-		__( 'My Document Setting Panel' )
-	);
-}
-
-registerPlugin( 'my-document-setting-plugin', {
-	render: MyDocumentSettingPlugin,
-} );
-```
-
-```jsx
-// Using ESNext syntax
-import { registerPlugin } from '@wordpress/plugins';
-import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
-
-const MyDocumentSettingTest = () => (
-	<PluginDocumentSettingPanel
-		className="my-document-setting-plugin"
-		title="My Panel"
-		name="my-panel"
-	>
-		<p>My Document Setting Panel</p>
-	</PluginDocumentSettingPanel>
-);
-
-registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } );
-```
-
-_Parameters_
-
--   _props_ `Object`: Component properties.
--   _props.name_ `string`: Required. A 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_ `[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.
--   _props.children_ `Element`: Children to be rendered
-
-_Returns_
-
--   `Component`: The component to be rendered.
+Undocumented declaration.
 
 ### PluginMoreMenuItem
 

diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -20,6 +20,7 @@ import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import {
 	store as editorStore,
 	PageAttributesPanel,
+	PluginDocumentSettingPanel,
 	PostDiscussionPanel,
 	PostExcerptPanel,
 	PostLastRevisionPanel,
@@ -32,7 +33,6 @@ import {
 import SettingsHeader from '../settings-header';
 import PostStatus from '../post-status';
 import MetaBoxes from '../../meta-boxes';
-import PluginDocumentSettingPanel from '../plugin-document-setting-panel';
 import PluginSidebarEditPost from '../plugin-sidebar';
 import TemplateSummary from '../template-summary';
 import { store as editPostStore } from '../../../store';

diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
@@ -15,6 +15,7 @@ import {
 	registerWidgetGroupBlock,
 } from '@wordpress/widgets';
 import {
+	PluginDocumentSettingPanel,
 	privateApis as editorPrivateApis,
 	store as editorStore,
 } from '@wordpress/editor';
@@ -161,7 +162,7 @@ export function reinitializeEditor() {
 }
 
 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 { PluginDocumentSettingPanel };
 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';

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
@@ -14,6 +14,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import {
 	PageAttributesPanel,
+	PluginDocumentSettingPanel,
 	PostDiscussionPanel,
 	PostExcerptPanel,
 	PostLastRevisionPanel,
@@ -96,6 +97,7 @@ export default function PagePanels() {
 					postType={ type }
 				/>
 			</PanelBody>
+			<PluginDocumentSettingPanel.Slot />
 			{ renderingMode !== 'post-only' && (
 				<PanelBody title={ __( 'Content' ) }>
 					<PageContent />

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -54,12 +54,14 @@
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/patterns": "file:../patterns",
+		"@wordpress/plugins": "file:../plugins",
 		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/server-side-render": "file:../server-side-render",
 		"@wordpress/url": "file:../url",
+		"@wordpress/warning": "file:../warning",
 		"@wordpress/wordcount": "file:../wordcount",
 		"classnames": "^2.3.1",
 		"date-fns": "^2.28.0",

diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js
@@ -26,6 +26,7 @@ export { default as PageAttributesOrder } from './page-attributes/order';
 export { default as PageAttributesPanel } from './page-attributes/panel';
 export { default as PageAttributesParent } from './page-attributes/parent';
 export { default as PageTemplate } from './post-template/classic-theme';
+export { default as PluginDocumentSettingPanel } from './plugin-document-setting-panel';
 export { default as PostTemplatePanel } from './post-template/panel';
 export { default as PostAuthor } from './post-author';
 export { default as PostAuthorCheck } from './post-author/check';

diff --git a/...ar/plugin-document-setting-panel/index.js → ...ts/plugin-document-setting-panel/index.js b/...ar/plugin-document-setting-panel/index.js → ...ts/plugin-document-setting-panel/index.js
@@ -5,18 +5,14 @@ import { createSlotFill, PanelBody } from '@wordpress/components';
 import { usePluginContext } from '@wordpress/plugins';
 import { useDispatch, useSelect } from '@wordpress/data';
 import warning from '@wordpress/warning';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../../../lock-unlock';
+import EnablePluginDocumentSettingPanelOption from '../preferences-modal/enable-plugin-document-setting-panel';
+import { store as editorStore } from '../../store';
 
 const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' );
-const { EnablePluginDocumentSettingPanelOption } = unlock( editorPrivateApis );
 
 /**
  * Renders items below the Status & Availability panel in the Document Sidebar.
@@ -34,7 +30,7 @@ const { EnablePluginDocumentSettingPanelOption } = unlock( editorPrivateApis );
  * var el = React.createElement;
  * var __ = wp.i18n.__;
  * var registerPlugin = wp.plugins.registerPlugin;
- * var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
+ * var PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel;
  *
  * function MyDocumentSettingPlugin() {
  * 	return el(
@@ -57,7 +53,7 @@ const { EnablePluginDocumentSettingPanelOption } = unlock( editorPrivateApis );
  * ```jsx
  * // Using ESNext syntax
  * import { registerPlugin } from '@wordpress/plugins';
- * import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
+ * import { PluginDocumentSettingPanel } from '@wordpress/editor';
  *
  * const MyDocumentSettingTest = () => (
  * 		<PluginDocumentSettingPanel className="my-document-setting-plugin" title="My Panel" name="my-panel">

diff --git a/packages/editor/src/private-apis.js b/packages/editor/src/private-apis.js
@@ -4,7 +4,6 @@
 import EditorCanvas from './components/editor-canvas';
 import { ExperimentalEditorProvider } from './components/provider';
 import { lock } from './lock-unlock';
-import EnablePluginDocumentSettingPanelOption from './components/preferences-modal/enable-plugin-document-setting-panel';
 import { EntitiesSavedStatesExtensible } from './components/entities-saved-states';
 import useBlockEditorSettings from './components/provider/use-block-editor-settings';
 import DocumentTools from './components/document-tools';
@@ -22,7 +21,6 @@ lock( privateApis, {
 	DocumentTools,
 	EditorCanvas,
 	ExperimentalEditorProvider,
-	EnablePluginDocumentSettingPanelOption,
 	EntitiesSavedStatesExtensible,
 	InserterSidebar,
 	ListViewSidebar,