From f85db183be569c5e7b984d65609f5ed5880a99f0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 18 Apr 2024 10:59:02 +0100 Subject: [PATCH] Editor: Unify PluginSidebarMoreMenuItem --- .../plugin-sidebar-more-menu-item.md | 2 +- packages/e2e-tests/plugins/plugins-api.php | 10 +-- .../plugins-api/annotations-sidebar.js | 4 +- .../plugins/plugins-api/document-setting.js | 2 +- .../plugins/plugins-api/post-status-info.js | 2 +- .../plugins/plugins-api/publish-panel.js | 4 +- .../e2e-tests/plugins/plugins-api/sidebar.js | 4 +- packages/edit-post/README.md | 45 +----------- packages/edit-post/src/index.js | 3 +- .../plugin-sidebar-more-menu-item/index.js | 71 ------------------- packages/edit-site/src/index.js | 3 +- packages/editor/README.md | 47 ++++++++++++ packages/editor/src/components/index.js | 1 + .../plugin-sidebar-more-menu-item/index.js | 13 +--- packages/plugins/README.md | 6 +- packages/plugins/src/api/index.ts | 6 +- 16 files changed, 76 insertions(+), 147 deletions(-) delete mode 100644 packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js rename packages/{edit-post/src/components/header => editor/src/components}/plugin-sidebar-more-menu-item/index.js (83%) diff --git a/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md index 4d32d754578cc4..76fb3018de7b68 100644 --- a/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md +++ b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md @@ -7,7 +7,7 @@ This is done by setting the `target` on `` to match t ```js import { registerPlugin } from '@wordpress/plugins'; -import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post'; +import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor'; import { image } from '@wordpress/icons'; const PluginSidebarMoreMenuItemTest = () => ( diff --git a/packages/e2e-tests/plugins/plugins-api.php b/packages/e2e-tests/plugins/plugins-api.php index 1accfb3fc718da..fb8054924cebb0 100644 --- a/packages/e2e-tests/plugins/plugins-api.php +++ b/packages/e2e-tests/plugins/plugins-api.php @@ -15,7 +15,7 @@ function enqueue_plugins_api_plugin_scripts() { 'gutenberg-test-plugins-api-post-status-info', plugins_url( 'plugins-api/post-status-info.js', __FILE__ ), array( - 'wp-edit-post', + 'wp-editor', 'wp-element', 'wp-i18n', 'wp-plugins', @@ -28,7 +28,7 @@ function enqueue_plugins_api_plugin_scripts() { 'gutenberg-test-plugins-api-publish-pane;', plugins_url( 'plugins-api/publish-panel.js', __FILE__ ), array( - 'wp-edit-post', + 'wp-editor', 'wp-element', 'wp-i18n', 'wp-plugins', @@ -44,7 +44,7 @@ function enqueue_plugins_api_plugin_scripts() { 'wp-components', 'wp-compose', 'wp-data', - 'wp-edit-post', + 'wp-editor', 'wp-block-editor', 'wp-editor', 'wp-element', @@ -63,7 +63,7 @@ function enqueue_plugins_api_plugin_scripts() { 'wp-components', 'wp-compose', 'wp-data', - 'wp-edit-post', + 'wp-editor', 'wp-block-editor', 'wp-element', 'wp-i18n', @@ -78,7 +78,7 @@ function enqueue_plugins_api_plugin_scripts() { 'gutenberg-test-plugins-api-document-setting', plugins_url( 'plugins-api/document-setting.js', __FILE__ ), array( - 'wp-edit-post', + 'wp-editor', 'wp-element', 'wp-i18n', 'wp-plugins', diff --git a/packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js b/packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js index f73ad5c68013b6..0f7e15afaa8169 100644 --- a/packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js +++ b/packages/e2e-tests/plugins/plugins-api/annotations-sidebar.js @@ -8,8 +8,8 @@ const Component = wp.element.Component; const __ = wp.i18n.__; const registerPlugin = wp.plugins.registerPlugin; - const PluginSidebar = wp.editPost.PluginSidebar; - const PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem; + const PluginSidebar = wp.editor.PluginSidebar; + const PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem; class SidebarContents extends Component { constructor( props ) { diff --git a/packages/e2e-tests/plugins/plugins-api/document-setting.js b/packages/e2e-tests/plugins/plugins-api/document-setting.js index be1aa491244b66..e591d5256207b6 100644 --- a/packages/e2e-tests/plugins/plugins-api/document-setting.js +++ b/packages/e2e-tests/plugins/plugins-api/document-setting.js @@ -2,7 +2,7 @@ const el = wp.element.createElement; const __ = wp.i18n.__; const registerPlugin = wp.plugins.registerPlugin; - const PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel; + const PluginDocumentSettingPanel = wp.editor.PluginDocumentSettingPanel; function MyDocumentSettingPlugin() { return el( diff --git a/packages/e2e-tests/plugins/plugins-api/post-status-info.js b/packages/e2e-tests/plugins/plugins-api/post-status-info.js index 9782de8e5c2561..73f4228a9f3171 100644 --- a/packages/e2e-tests/plugins/plugins-api/post-status-info.js +++ b/packages/e2e-tests/plugins/plugins-api/post-status-info.js @@ -2,7 +2,7 @@ const el = wp.element.createElement; const __ = wp.i18n.__; const registerPlugin = wp.plugins.registerPlugin; - const PluginPostStatusInfo = wp.editPost.PluginPostStatusInfo; + const PluginPostStatusInfo = wp.editor.PluginPostStatusInfo; function MyPostStatusInfoPlugin() { return el( diff --git a/packages/e2e-tests/plugins/plugins-api/publish-panel.js b/packages/e2e-tests/plugins/plugins-api/publish-panel.js index 9a9df3f8efc7c0..79e44e0af7d573 100644 --- a/packages/e2e-tests/plugins/plugins-api/publish-panel.js +++ b/packages/e2e-tests/plugins/plugins-api/publish-panel.js @@ -3,8 +3,8 @@ const Fragment = wp.element.Fragment; const __ = wp.i18n.__; const registerPlugin = wp.plugins.registerPlugin; - const PluginPostPublishPanel = wp.editPost.PluginPostPublishPanel; - const PluginPrePublishPanel = wp.editPost.PluginPrePublishPanel; + const PluginPostPublishPanel = wp.editor.PluginPostPublishPanel; + const PluginPrePublishPanel = wp.editor.PluginPrePublishPanel; function PanelContent() { return el( 'p', {}, __( 'Here is the panel content!' ) ); diff --git a/packages/e2e-tests/plugins/plugins-api/sidebar.js b/packages/e2e-tests/plugins/plugins-api/sidebar.js index 01e0a80de78363..fe7d76126683f6 100644 --- a/packages/e2e-tests/plugins/plugins-api/sidebar.js +++ b/packages/e2e-tests/plugins/plugins-api/sidebar.js @@ -10,8 +10,8 @@ const el = wp.element.createElement; const __ = wp.i18n.__; const registerPlugin = wp.plugins.registerPlugin; - const PluginSidebar = wp.editPost.PluginSidebar; - const PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem; + const PluginSidebar = wp.editor.PluginSidebar; + const PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem; function SidebarContents() { const postTitle = useSelect( ( select ) => diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 4afc1f1f945ddd..65e31953e1ae57 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -99,50 +99,7 @@ Undocumented declaration. ### PluginSidebarMoreMenuItem -Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to activate the corresponding `PluginSidebar` component. The text within the component appears as the menu item label. - -_Usage_ - -```js -// Using ES5 syntax -var __ = wp.i18n.__; -var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem; -var moreIcon = React.createElement( 'svg' ); //... svg element. - -function MySidebarMoreMenuItem() { - return React.createElement( - PluginSidebarMoreMenuItem, - { - target: 'my-sidebar', - icon: moreIcon, - }, - __( 'My sidebar title' ) - ); -} -``` - -```jsx -// Using ESNext syntax -import { __ } from '@wordpress/i18n'; -import { PluginSidebarMoreMenuItem } from '@wordpress/edit-post'; -import { more } from '@wordpress/icons'; - -const MySidebarMoreMenuItem = () => ( - - { __( 'My sidebar title' ) } - -); -``` - -_Parameters_ - -- _props_ `Object`: Component props. -- _props.target_ `string`: A string identifying the target sidebar you wish to be activated by this menu item. Must be the same as the `name` prop you have given to that sidebar. -- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label. - -_Returns_ - -- `Component`: The component to be rendered. +Undocumented declaration. ### reinitializeEditor diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index a01fd0ef366454..b9555f6590d711 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -20,6 +20,7 @@ import { PluginMoreMenuItem, PluginPostStatusInfo, PluginSidebar, + PluginSidebarMoreMenuItem, privateApis as editorPrivateApis, store as editorStore, } from '@wordpress/editor'; @@ -170,9 +171,9 @@ export { PluginDocumentSettingPanel }; export { PluginMoreMenuItem }; export { PluginPostStatusInfo }; export { PluginSidebar }; +export { PluginSidebarMoreMenuItem }; export { default as PluginPostPublishPanel } from './components/sidebar/plugin-post-publish-panel'; export { default as PluginPrePublishPanel } from './components/sidebar/plugin-pre-publish-panel'; -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'; export { __experimentalPluginPostExcerpt }; diff --git a/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js b/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js deleted file mode 100644 index fa0428bea73036..00000000000000 --- a/packages/edit-site/src/components/header-edit-mode/plugin-sidebar-more-menu-item/index.js +++ /dev/null @@ -1,71 +0,0 @@ -/** - * WordPress dependencies - */ -import { privateApis as editorPrivateApis } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; - -const { ComplementaryAreaMoreMenuItem } = unlock( editorPrivateApis ); - -/** - * Renders a menu item in `Plugins` group in `More Menu` drop down, - * and can be used to activate the corresponding `PluginSidebar` component. - * The text within the component appears as the menu item label. - * - * @param {Object} props Component props. - * @param {string} props.target A string identifying the target sidebar you wish to be activated by this menu item. Must be the same as the `name` prop you have given to that sidebar. - * @param {WPBlockTypeIconRender} [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 to the left of the menu item label. - * - * @example - * ```js - * // Using ES5 syntax - * var __ = wp.i18n.__; - * var PluginSidebarMoreMenuItem = wp.editSite.PluginSidebarMoreMenuItem; - * var moreIcon = wp.element.createElement( 'svg' ); //... svg element. - * - * function MySidebarMoreMenuItem() { - * return wp.element.createElement( - * PluginSidebarMoreMenuItem, - * { - * target: 'my-sidebar', - * icon: moreIcon, - * }, - * __( 'My sidebar title' ) - * ) - * } - * ``` - * - * @example - * ```jsx - * // Using ESNext syntax - * import { __ } from '@wordpress/i18n'; - * import { PluginSidebarMoreMenuItem } from '@wordpress/edit-site'; - * import { more } from '@wordpress/icons'; - * - * const MySidebarMoreMenuItem = () => ( - * - * { __( 'My sidebar title' ) } - * - * ); - * ``` - * - * @return {Component} The component to be rendered. - */ - -export default function PluginSidebarMoreMenuItem( props ) { - return ( - - ); -} diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index f8d4159d465380..7bac4bca10b649 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -13,6 +13,7 @@ import { createRoot } from '@wordpress/element'; import { PluginMoreMenuItem, PluginSidebar, + PluginSidebarMoreMenuItem, store as editorStore, } from '@wordpress/editor'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -103,6 +104,6 @@ export function reinitializeEditor() { export { PluginMoreMenuItem }; export { PluginSidebar }; -export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item'; +export { PluginSidebarMoreMenuItem }; export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel'; export { store } from './store'; diff --git a/packages/editor/README.md b/packages/editor/README.md index 972c747f3678f5..03d42c5a8b9b48 100644 --- a/packages/editor/README.md +++ b/packages/editor/README.md @@ -746,6 +746,53 @@ _Parameters_ - _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. +### PluginSidebarMoreMenuItem + +Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to activate the corresponding `PluginSidebar` component. The text within the component appears as the menu item label. + +_Usage_ + +```js +// Using ES5 syntax +var __ = wp.i18n.__; +var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem; +var moreIcon = React.createElement( 'svg' ); //... svg element. + +function MySidebarMoreMenuItem() { + return React.createElement( + PluginSidebarMoreMenuItem, + { + target: 'my-sidebar', + icon: moreIcon, + }, + __( 'My sidebar title' ) + ); +} +``` + +```jsx +// Using ESNext syntax +import { __ } from '@wordpress/i18n'; +import { PluginSidebarMoreMenuItem } from '@wordpress/editor'; +import { more } from '@wordpress/icons'; + +const MySidebarMoreMenuItem = () => ( + + { __( 'My sidebar title' ) } + +); +``` + +_Parameters_ + +- _props_ `Object`: Component props. +- _props.target_ `string`: A string identifying the target sidebar you wish to be activated by this menu item. Must be the same as the `name` prop you have given to that sidebar. +- _props.icon_ `[WPBlockTypeIconRender]`: The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered to the left of the menu item label. + +_Returns_ + +- `Component`: The component to be rendered. + ### PostAuthor Undocumented declaration. diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index faa16f1ec9d11b..e84942345fb322 100644 --- a/packages/editor/src/components/index.js +++ b/packages/editor/src/components/index.js @@ -33,6 +33,7 @@ export { default as PluginPostPublishPanel } from './plugin-post-publish-panel'; export { default as PluginPostStatusInfo } from './plugin-post-status-info'; export { default as PluginPrePublishPanel } from './plugin-pre-publish-panel'; export { default as PluginSidebar } from './plugin-sidebar'; +export { default as PluginSidebarMoreMenuItem } from './plugin-sidebar-more-menu-item'; 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/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js b/packages/editor/src/components/plugin-sidebar-more-menu-item/index.js similarity index 83% rename from packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js rename to packages/editor/src/components/plugin-sidebar-more-menu-item/index.js index 1b0f122b9154ba..0d7695c9abfe12 100644 --- a/packages/edit-post/src/components/header/plugin-sidebar-more-menu-item/index.js +++ b/packages/editor/src/components/plugin-sidebar-more-menu-item/index.js @@ -1,14 +1,7 @@ /** * WordPress dependencies */ -import { privateApis as editorPrivateApis } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../../lock-unlock'; - -const { ComplementaryAreaMoreMenuItem } = unlock( editorPrivateApis ); +import { ComplementaryAreaMoreMenuItem } from '@wordpress/interface'; /** * Renders a menu item in `Plugins` group in `More Menu` drop down, @@ -23,7 +16,7 @@ const { ComplementaryAreaMoreMenuItem } = unlock( editorPrivateApis ); * ```js * // Using ES5 syntax * var __ = wp.i18n.__; - * var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem; + * var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem; * var moreIcon = React.createElement( 'svg' ); //... svg element. * * function MySidebarMoreMenuItem() { @@ -42,7 +35,7 @@ const { ComplementaryAreaMoreMenuItem } = unlock( editorPrivateApis ); * ```jsx * // Using ESNext syntax * import { __ } from '@wordpress/i18n'; - * import { PluginSidebarMoreMenuItem } from '@wordpress/edit-post'; + * import { PluginSidebarMoreMenuItem } from '@wordpress/editor'; * import { more } from '@wordpress/icons'; * * const MySidebarMoreMenuItem = () => ( diff --git a/packages/plugins/README.md b/packages/plugins/README.md index e9e5a704aeca71..bbf70fed553d32 100644 --- a/packages/plugins/README.md +++ b/packages/plugins/README.md @@ -88,8 +88,8 @@ _Usage_ // Using ES5 syntax var el = React.createElement; var Fragment = wp.element.Fragment; -var PluginSidebar = wp.editPost.PluginSidebar; -var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem; +var PluginSidebar = wp.editor.PluginSidebar; +var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem; var registerPlugin = wp.plugins.registerPlugin; var moreIcon = React.createElement( 'svg' ); //... svg element. @@ -123,7 +123,7 @@ registerPlugin( 'plugin-name', { ```js // Using ESNext syntax -import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post'; +import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor'; import { registerPlugin } from '@wordpress/plugins'; import { more } from '@wordpress/icons'; diff --git a/packages/plugins/src/api/index.ts b/packages/plugins/src/api/index.ts index 45c8f931634198..932628ddd623db 100644 --- a/packages/plugins/src/api/index.ts +++ b/packages/plugins/src/api/index.ts @@ -58,8 +58,8 @@ const plugins = {} as Record< string, WPPlugin >; * // Using ES5 syntax * var el = React.createElement; * var Fragment = wp.element.Fragment; - * var PluginSidebar = wp.editPost.PluginSidebar; - * var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem; + * var PluginSidebar = wp.editor.PluginSidebar; + * var PluginSidebarMoreMenuItem = wp.editor.PluginSidebarMoreMenuItem; * var registerPlugin = wp.plugins.registerPlugin; * var moreIcon = React.createElement( 'svg' ); //... svg element. * @@ -94,7 +94,7 @@ const plugins = {} as Record< string, WPPlugin >; * @example * ```js * // Using ESNext syntax - * import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post'; + * import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/editor'; * import { registerPlugin } from '@wordpress/plugins'; * import { more } from '@wordpress/icons'; *