From c16ceec3729d94dfad3950cd71fdfc492ffc2a8c Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 17 Jan 2019 13:25:54 -0500 Subject: [PATCH 01/32] Create new file for the plugin --- .../sidebar/plugin-settings-sidebar/index.js | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js diff --git a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js new file mode 100644 index 0000000000000..a59c81ca1cab4 --- /dev/null +++ b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js @@ -0,0 +1,22 @@ +/** + * Defines as extensibility slot for the Settings sidebar + */ + +/** + * WordPress dependencies + */ +import { createSlotFill, PanelRow } from '@wordpress/components'; + +export const { Fill, Slot } = createSlotFill( 'PluginSettingsSidebar' ); + +const PluginSettingsSidebar = ( { children, className } ) => ( + + + { children } + + +); + +PluginSettingsSidebar.Slot = Slot; + +export default PluginSettingsSidebar; From ffe0dc7211c8c01e7fc1b5d8e5eb4fc31a7cead0 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 17 Jan 2019 14:59:10 -0500 Subject: [PATCH 02/32] Adding new slotfill --- .../sidebar/plugin-settings-sidebar/index.js | 10 ++----- .../sidebar/settings-sidebar/index.js | 28 +++++++++++-------- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js index a59c81ca1cab4..3299ce5e0ec9e 100644 --- a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js @@ -5,16 +5,12 @@ /** * WordPress dependencies */ -import { createSlotFill, PanelRow } from '@wordpress/components'; +import { createSlotFill } from '@wordpress/components'; export const { Fill, Slot } = createSlotFill( 'PluginSettingsSidebar' ); -const PluginSettingsSidebar = ( { children, className } ) => ( - - - { children } - - +const PluginSettingsSidebar = ( { children } ) => ( + { children } ); PluginSettingsSidebar.Slot = Slot; diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index 3d4fa8dfb0ced..a96e68e7c5493 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -21,6 +21,7 @@ import PostLink from '../post-link'; import DiscussionPanel from '../discussion-panel'; import PageAttributes from '../page-attributes'; import MetaBoxes from '../../meta-boxes'; +import PluginSettingsSidebar from '../plugin-settings-sidebar'; const SettingsSidebar = ( { sidebarName } ) => ( ( { sidebarName === 'edit-post/document' && ( - - - - - - - - - - - + + { ( fills ) => ( + + + { fills } + + + + + + + + + + ) } + ) } { sidebarName === 'edit-post/block' && ( From 352783bdf0264f2f3c9eaa125397403f38fe28f9 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 17 Jan 2019 15:20:01 -0500 Subject: [PATCH 03/32] Adds tests --- .../test/__snapshots__/index.js.snap | 3 ++ .../plugin-settings-sidebar/test/index.js | 29 +++++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/__snapshots__/index.js.snap create mode 100644 packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/index.js diff --git a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/__snapshots__/index.js.snap new file mode 100644 index 0000000000000..ffd32f5a47f10 --- /dev/null +++ b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/__snapshots__/index.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PluginSettingsSidebar renders fill properly 1`] = `"My panel content"`; diff --git a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/index.js b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/index.js new file mode 100644 index 0000000000000..5735aacc5eea5 --- /dev/null +++ b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/index.js @@ -0,0 +1,29 @@ +/** + * WordPress dependencies + */ +import { SlotFillProvider } from '@wordpress/components'; +import { render } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import PluginSettingsSidebar from '../'; + +jest.mock( '../../../../../../components/src/button' ); + +describe( 'PluginSettingsSidebar', () => { + test( 'renders fill properly', () => { + const div = document.createElement( 'div' ); + render( + + + My panel content + + + , + div + ); + + expect( div.innerHTML ).toMatchSnapshot(); + } ); +} ); From ed2fe85348bb10ccaaeee8e443a81840575a78aa Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 17 Jan 2019 15:53:59 -0500 Subject: [PATCH 04/32] Ensuring that the slot wraps in a PanelBody and updates tests --- .../test/__snapshots__/index.js.snap | 3 --- .../sidebar/plugin-settings-sidebar/index.js | 14 +++++++++++--- .../test/__snapshots__/index.js.snap | 2 +- .../sidebar/plugin-settings-sidebar/test/index.js | 5 ++++- 4 files changed, 16 insertions(+), 8 deletions(-) delete mode 100644 packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap deleted file mode 100644 index df197d90cc84c..0000000000000 --- a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PluginPrePublishPanel renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js index 3299ce5e0ec9e..395e2ae0c00e9 100644 --- a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js @@ -5,12 +5,20 @@ /** * WordPress dependencies */ -import { createSlotFill } from '@wordpress/components'; +import { createSlotFill, PanelBody } from '@wordpress/components'; export const { Fill, Slot } = createSlotFill( 'PluginSettingsSidebar' ); -const PluginSettingsSidebar = ( { children } ) => ( - { children } +const PluginSettingsSidebar = ( { children, className, title, initialOpen } ) => ( + + + { children } + + ); PluginSettingsSidebar.Slot = Slot; diff --git a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/__snapshots__/index.js.snap index ffd32f5a47f10..b4f5b3f08b8d4 100644 --- a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/__snapshots__/index.js.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PluginSettingsSidebar renders fill properly 1`] = `"My panel content"`; +exports[`PluginSettingsSidebar renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/index.js b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/index.js index 5735aacc5eea5..e2dfc0b239799 100644 --- a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/index.js @@ -16,7 +16,10 @@ describe( 'PluginSettingsSidebar', () => { const div = document.createElement( 'div' ); render( - + My panel content From dbdb17b18148c460642038c9cee25b85b4d8f9dd Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 17 Jan 2019 16:40:56 -0500 Subject: [PATCH 05/32] Adds unintentionally deleted snapshot --- .../plugin-pre-publish-panel/test/__snapshots__/index.js.snap | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap diff --git a/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap new file mode 100644 index 0000000000000..df197d90cc84c --- /dev/null +++ b/packages/edit-post/src/components/sidebar/plugin-pre-publish-panel/test/__snapshots__/index.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PluginPrePublishPanel renders fill properly 1`] = `"

My panel content
"`; From 0c10e9e114bd5416dcf34e72b5dcff4be95ca1ab Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 6 May 2019 10:55:16 -0400 Subject: [PATCH 06/32] Changes as per Riad --- .../index.js | 6 +++--- .../test/__snapshots__/index.js.snap | 3 +++ .../test/index.js | 10 +++++----- .../test/__snapshots__/index.js.snap | 3 --- .../src/components/sidebar/settings-sidebar/index.js | 6 +++--- 5 files changed, 14 insertions(+), 14 deletions(-) rename packages/edit-post/src/components/sidebar/{plugin-settings-sidebar => plugin-document-setting}/index.js (75%) create mode 100644 packages/edit-post/src/components/sidebar/plugin-document-setting/test/__snapshots__/index.js.snap rename packages/edit-post/src/components/sidebar/{plugin-settings-sidebar => plugin-document-setting}/test/index.js (76%) delete mode 100644 packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/__snapshots__/index.js.snap diff --git a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js similarity index 75% rename from packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js rename to packages/edit-post/src/components/sidebar/plugin-document-setting/index.js index 395e2ae0c00e9..7f2bea8c0fb44 100644 --- a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js @@ -9,7 +9,7 @@ import { createSlotFill, PanelBody } from '@wordpress/components'; export const { Fill, Slot } = createSlotFill( 'PluginSettingsSidebar' ); -const PluginSettingsSidebar = ( { children, className, title, initialOpen } ) => ( +const PluginDocumentSetting = ( { children, className, title, initialOpen } ) => ( ); -PluginSettingsSidebar.Slot = Slot; +PluginDocumentSetting.Slot = Slot; -export default PluginSettingsSidebar; +export default PluginDocumentSetting; diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-document-setting/test/__snapshots__/index.js.snap new file mode 100644 index 0000000000000..732e4c9750603 --- /dev/null +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting/test/__snapshots__/index.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PluginDocumentSetting renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting/test/index.js similarity index 76% rename from packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/index.js rename to packages/edit-post/src/components/sidebar/plugin-document-setting/test/index.js index e2dfc0b239799..ec3413f21d765 100644 --- a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting/test/index.js @@ -7,22 +7,22 @@ import { render } from '@wordpress/element'; /** * Internal dependencies */ -import PluginSettingsSidebar from '../'; +import PluginDocumentSetting from '../'; jest.mock( '../../../../../../components/src/button' ); -describe( 'PluginSettingsSidebar', () => { +describe( 'PluginDocumentSetting', () => { test( 'renders fill properly', () => { const div = document.createElement( 'div' ); render( - My panel content - - + + , div ); diff --git a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/__snapshots__/index.js.snap deleted file mode 100644 index b4f5b3f08b8d4..0000000000000 --- a/packages/edit-post/src/components/sidebar/plugin-settings-sidebar/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PluginSettingsSidebar renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index 594630f283ab4..b2f00e61c642a 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -21,7 +21,7 @@ import PostLink from '../post-link'; import DiscussionPanel from '../discussion-panel'; import PageAttributes from '../page-attributes'; import MetaBoxes from '../../meta-boxes'; -import PluginSettingsSidebar from '../plugin-settings-sidebar'; +import PluginDocumentSetting from '../plugin-document-setting'; const SettingsSidebar = ( { sidebarName } ) => ( ( { sidebarName === 'edit-post/document' && ( - + { ( fills ) => ( @@ -46,7 +46,7 @@ const SettingsSidebar = ( { sidebarName } ) => ( ) } - + ) } { sidebarName === 'edit-post/block' && ( From 42c74b7d890a2b2544c9593e8af77f39daae927e Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 6 May 2019 12:40:39 -0400 Subject: [PATCH 07/32] Exporting the new slot on the EditPost global --- packages/edit-post/src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index cf8070c8c7b4e..24fba765582b4 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -103,3 +103,4 @@ export { default as PluginPostStatusInfo } from './components/sidebar/plugin-pos 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 PluginDocumentSetting } from './components/sidebar/plugin-document-setting'; From 739c0add81311a8181563f49296d3af53cf89891 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 6 May 2019 13:04:40 -0400 Subject: [PATCH 08/32] Adds e2e test for the new slot --- packages/e2e-tests/plugins/plugins-api.php | 13 +++++ .../plugins/plugins-api/document-setting.js | 20 ++++++++ .../specs/plugins/plugins-api.test.js | 8 +++ packages/edit-post/README.md | 50 +++++++++++++++++++ .../sidebar/plugin-document-setting/index.js | 45 +++++++++++++++++ 5 files changed, 136 insertions(+) create mode 100644 packages/e2e-tests/plugins/plugins-api/document-setting.js diff --git a/packages/e2e-tests/plugins/plugins-api.php b/packages/e2e-tests/plugins/plugins-api.php index 75c1180e44afc..52a53fdf18f96 100644 --- a/packages/e2e-tests/plugins/plugins-api.php +++ b/packages/e2e-tests/plugins/plugins-api.php @@ -72,6 +72,19 @@ function enqueue_plugins_api_plugin_scripts() { filemtime( plugin_dir_path( __FILE__ ) . 'plugins-api/annotations-sidebar.js' ), true ); + + wp_enqueue_script( + 'gutenberg-test-plugins-api-document-setting', + plugins_url( 'plugins-api/document-setting.js', __FILE__ ), + array( + 'wp-edit-post', + 'wp-element', + 'wp-i18n', + 'wp-plugins', + ), + filemtime( plugin_dir_path( __FILE__ ) . 'plugins-api/document-setting.js' ), + true + ); } add_action( 'init', 'enqueue_plugins_api_plugin_scripts' ); diff --git a/packages/e2e-tests/plugins/plugins-api/document-setting.js b/packages/e2e-tests/plugins/plugins-api/document-setting.js new file mode 100644 index 0000000000000..00ef23c383bfd --- /dev/null +++ b/packages/e2e-tests/plugins/plugins-api/document-setting.js @@ -0,0 +1,20 @@ +( function() { + var el = wp.element.createElement; + var __ = wp.i18n.__; + var registerPlugin = wp.plugins.registerPlugin; + var PluginDocumentSetting = wp.editPost.PluginPostStatusInfo; + + function MyDocumentSettingPlugin() { + return el( + PluginDocumentSetting, + { + className: 'my-document-setting-plugin', + }, + __( 'My Document Setting Panel' ) + ); + } + + registerPlugin( 'my-document-setting-plugin', { + render: MyDocumentSettingPlugin + } ); +} )(); diff --git a/packages/e2e-tests/specs/plugins/plugins-api.test.js b/packages/e2e-tests/specs/plugins/plugins-api.test.js index d264bb736ed08..fb98300dfb5d2 100644 --- a/packages/e2e-tests/specs/plugins/plugins-api.test.js +++ b/packages/e2e-tests/specs/plugins/plugins-api.test.js @@ -76,4 +76,12 @@ describe( 'Using Plugins API', () => { expect( pluginSidebarClosed ).toBeNull(); } ); } ); + + describe( 'Document Setting Custom Panel', () => { + it( 'Should render a custom panel inside Document Setting sidebar', async () => { + await openDocumentSettingsSidebar(); + const pluginPostStatusInfoText = await page.$eval( '.edit-post-sidebar .my-document-setting-plugin', ( el ) => el.innerText ); + expect( pluginPostStatusInfoText ).toBe( 'My Document Setting Panel' ); + } ); + } ); } ); diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 4c2c8e46b2cfb..09481a6a81615 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -100,6 +100,56 @@ _Returns_ - `WPElement`: The WPElement to be rendered. +# **PluginDocumentSetting** + +Renders items below the Status & Availability panel in the Document Sidebar. + +_Usage_ + +```js +// Using ES5 syntax +var el = wp.element.createElement; +var __ = wp.i18n.__; +var registerPlugin = wp.plugins.registerPlugin; +var PluginDocumentSetting = wp.editPost.PluginPostStatusInfo; +function MyDocumentSettingPlugin() { + return el( + PluginDocumentSetting, + { + className: 'my-document-setting-plugin', + }, + __( 'My Document Setting Panel' ) + ); + } + + registerPlugin( 'my-document-setting-plugin', { + render: MyDocumentSettingPlugin + } ); +``` + +```jsx +// Using ESNext syntax +const { registerPlugin } = wp.plugins; +const { PluginDocumentSetting } = wp.editPost; + +const MyDocumentSettingTest = () => ( + +

My Document Setting Panel

+ +); + + registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } ); +``` + +_Parameters_ + +- _props_ `Object`: Component properties. +- _props.className_ `[string]`: An optional class name added to the row. + +_Returns_ + +- `WPElement`: The WPElement to be rendered. + # **PluginMoreMenuItem** Renders a menu item in `Plugins` group in `More Menu` drop down, and can be used to as a button or link depending on the props provided. diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js index 7f2bea8c0fb44..3f13f8fd71f4b 100644 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js @@ -9,6 +9,51 @@ import { createSlotFill, PanelBody } from '@wordpress/components'; export const { Fill, Slot } = createSlotFill( 'PluginSettingsSidebar' ); +/** + * Renders items below the Status & Availability panel in the Document Sidebar. + * + * @param {Object} props Component properties. + * @param {string} [props.className] An optional class name added to the row. + * + * @example ES5 + * ```js + * // Using ES5 syntax + * var el = wp.element.createElement; + * var __ = wp.i18n.__; + * var registerPlugin = wp.plugins.registerPlugin; + * var PluginDocumentSetting = wp.editPost.PluginPostStatusInfo; + * function MyDocumentSettingPlugin() { + * return el( + * PluginDocumentSetting, + * { + * className: 'my-document-setting-plugin', + * }, + * __( 'My Document Setting Panel' ) + * ); + * } + * + * registerPlugin( 'my-document-setting-plugin', { + * render: MyDocumentSettingPlugin + * } ); + * ``` + * + * @example ESNext + * ```jsx + * // Using ESNext syntax + * const { registerPlugin } = wp.plugins; + * const { PluginDocumentSetting } = wp.editPost; + * + * const MyDocumentSettingTest = () => ( + * + *

My Document Setting Panel

+ * + * ); + * + * registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } ); + * ``` + * + * @return {WPElement} The WPElement to be rendered. + */ const PluginDocumentSetting = ( { children, className, title, initialOpen } ) => ( Date: Mon, 6 May 2019 14:47:57 -0400 Subject: [PATCH 09/32] Fixes PHPCS error with whitespace --- packages/e2e-tests/plugins/plugins-api.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/plugins/plugins-api.php b/packages/e2e-tests/plugins/plugins-api.php index 52a53fdf18f96..84a5ef9270cb4 100644 --- a/packages/e2e-tests/plugins/plugins-api.php +++ b/packages/e2e-tests/plugins/plugins-api.php @@ -72,7 +72,7 @@ function enqueue_plugins_api_plugin_scripts() { filemtime( plugin_dir_path( __FILE__ ) . 'plugins-api/annotations-sidebar.js' ), true ); - + wp_enqueue_script( 'gutenberg-test-plugins-api-document-setting', plugins_url( 'plugins-api/document-setting.js', __FILE__ ), From b41b60a0c76005a552b1bb8171e3c3759d2fbc5a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 7 May 2019 07:14:34 -0400 Subject: [PATCH 10/32] Updates to whitespace and docs as per gziolo --- .../sidebar/plugin-document-setting/index.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js index 3f13f8fd71f4b..291cd0c434354 100644 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js @@ -14,6 +14,8 @@ export const { Fill, Slot } = createSlotFill( 'PluginSettingsSidebar' ); * * @param {Object} props Component properties. * @param {string} [props.className] An optional class name added to the row. + * @param {string} [props.title] The title of the panel + * @param {boolean} [props.initialOpen] The initial opened state for the panel. * * @example ES5 * ```js @@ -22,15 +24,16 @@ export const { Fill, Slot } = createSlotFill( 'PluginSettingsSidebar' ); * var __ = wp.i18n.__; * var registerPlugin = wp.plugins.registerPlugin; * var PluginDocumentSetting = wp.editPost.PluginPostStatusInfo; + * * function MyDocumentSettingPlugin() { * return el( * PluginDocumentSetting, * { * className: 'my-document-setting-plugin', * }, - * __( 'My Document Setting Panel' ) + * __( 'My Document Setting Panel' ) * ); - * } + * }; * * registerPlugin( 'my-document-setting-plugin', { * render: MyDocumentSettingPlugin @@ -44,9 +47,9 @@ export const { Fill, Slot } = createSlotFill( 'PluginSettingsSidebar' ); * const { PluginDocumentSetting } = wp.editPost; * * const MyDocumentSettingTest = () => ( - * - *

My Document Setting Panel

- * + * + *

My Document Setting Panel

+ * * ); * * registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } ); From 7f84a0e0c33382b6bd097996fe539b2f754aa59f Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 7 May 2019 07:15:25 -0400 Subject: [PATCH 11/32] Docs updates --- packages/edit-post/README.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 09481a6a81615..0a302decfe4a4 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -112,15 +112,16 @@ var el = wp.element.createElement; var __ = wp.i18n.__; var registerPlugin = wp.plugins.registerPlugin; var PluginDocumentSetting = wp.editPost.PluginPostStatusInfo; + function MyDocumentSettingPlugin() { return el( PluginDocumentSetting, { className: 'my-document-setting-plugin', }, - __( 'My Document Setting Panel' ) + __( 'My Document Setting Panel' ) ); - } + }; registerPlugin( 'my-document-setting-plugin', { render: MyDocumentSettingPlugin @@ -133,9 +134,9 @@ const { registerPlugin } = wp.plugins; const { PluginDocumentSetting } = wp.editPost; const MyDocumentSettingTest = () => ( - -

My Document Setting Panel

- + +

My Document Setting Panel

+ ); registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } ); @@ -145,6 +146,8 @@ _Parameters_ - _props_ `Object`: Component properties. - _props.className_ `[string]`: An optional class name added to the row. +- _props.title_ `[string]`: The title of the panel +- _props.initialOpen_ `[boolean]`: The initial opened state for the panel. _Returns_ From 5fde5a1f9ef7663bcd343f92f2bd65eb4f56b5d5 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 20 May 2019 08:20:53 -0400 Subject: [PATCH 12/32] Uses correct slotfill. --- packages/e2e-tests/plugins/plugins-api/document-setting.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/plugins/plugins-api/document-setting.js b/packages/e2e-tests/plugins/plugins-api/document-setting.js index 00ef23c383bfd..1194b5d62d64e 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 @@ var el = wp.element.createElement; var __ = wp.i18n.__; var registerPlugin = wp.plugins.registerPlugin; - var PluginDocumentSetting = wp.editPost.PluginPostStatusInfo; + var PluginDocumentSetting = wp.editPost.PluginDocumentSetting; function MyDocumentSettingPlugin() { return el( From fd8f007c615d56080b054775a7375bc3fe185694 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 4 Jun 2019 12:49:01 -0400 Subject: [PATCH 13/32] Simplifies the Slot render --- .../sidebar/settings-sidebar/index.js | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index b2f00e61c642a..93b67f891670c 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -31,22 +31,18 @@ const SettingsSidebar = ( { sidebarName } ) => ( { sidebarName === 'edit-post/document' && ( - - { ( fills ) => ( - - - { fills } - - - - - - - - - - ) } - + + + + + + + + + + + + ) } { sidebarName === 'edit-post/block' && ( From 28984f1dc767979d99ff69b851a6790e10a23d5a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 4 Jun 2019 12:50:58 -0400 Subject: [PATCH 14/32] Updates Slot show the icon if passed as part of register_plugin. Ensures that each fill has a PanelBody --- packages/edit-post/README.md | 51 +------------------ .../sidebar/plugin-document-setting/index.js | 22 ++++++-- 2 files changed, 18 insertions(+), 55 deletions(-) diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 0a302decfe4a4..d85bd20a4ce97 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -102,56 +102,7 @@ _Returns_ # **PluginDocumentSetting** -Renders items below the Status & Availability panel in the Document Sidebar. - -_Usage_ - -```js -// Using ES5 syntax -var el = wp.element.createElement; -var __ = wp.i18n.__; -var registerPlugin = wp.plugins.registerPlugin; -var PluginDocumentSetting = wp.editPost.PluginPostStatusInfo; - -function MyDocumentSettingPlugin() { - return el( - PluginDocumentSetting, - { - className: 'my-document-setting-plugin', - }, - __( 'My Document Setting Panel' ) - ); - }; - - registerPlugin( 'my-document-setting-plugin', { - render: MyDocumentSettingPlugin - } ); -``` - -```jsx -// Using ESNext syntax -const { registerPlugin } = wp.plugins; -const { PluginDocumentSetting } = wp.editPost; - -const MyDocumentSettingTest = () => ( - -

My Document Setting Panel

- -); - - registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } ); -``` - -_Parameters_ - -- _props_ `Object`: Component properties. -- _props.className_ `[string]`: An optional class name added to the row. -- _props.title_ `[string]`: The title of the panel -- _props.initialOpen_ `[boolean]`: The initial opened state for the panel. - -_Returns_ - -- `WPElement`: The WPElement to be rendered. +Undocumented declaration. # **PluginMoreMenuItem** diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js index 291cd0c434354..786e692a6b3c0 100644 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js @@ -6,8 +6,10 @@ * WordPress dependencies */ import { createSlotFill, PanelBody } from '@wordpress/components'; +import { compose } from '@wordpress/compose'; +import { withPluginContext } from '@wordpress/plugins'; -export const { Fill, Slot } = createSlotFill( 'PluginSettingsSidebar' ); +export const { Fill, Slot } = createSlotFill( 'PluginDocumentSetting' ); /** * Renders items below the Status & Availability panel in the Document Sidebar. @@ -15,7 +17,8 @@ export const { Fill, Slot } = createSlotFill( 'PluginSettingsSidebar' ); * @param {Object} props Component properties. * @param {string} [props.className] An optional class name added to the row. * @param {string} [props.title] The title of the panel - * @param {boolean} [props.initialOpen] The initial opened state for the panel. + * @param {boolean} [props.isOpen] The open state of the panel. Optional. + * @param {func} [props.onTogglePanel] The function that is run when the panel is toggled. Optional * * @example ES5 * ```js @@ -57,18 +60,27 @@ export const { Fill, Slot } = createSlotFill( 'PluginSettingsSidebar' ); * * @return {WPElement} The WPElement to be rendered. */ -const PluginDocumentSetting = ( { children, className, title, initialOpen } ) => ( +const PluginDocumentSettingFill = ( { className, title, children, isOpened, onTogglePanel, ...props } ) => ( { children } ); -PluginDocumentSetting.Slot = Slot; +const PluginDocumentSetting = compose( + withPluginContext( ( context, ownProps ) => { + return { + icon: ownProps.icon || context.icon, + }; + } ), +)( PluginDocumentSettingFill ); +PluginDocumentSetting.Slot = Slot; export default PluginDocumentSetting; From 11e6281052124b154e07cea1edf81803ead28b43 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 4 Jun 2019 12:55:20 -0400 Subject: [PATCH 15/32] Updates e2e tests --- packages/e2e-tests/specs/plugins/plugins-api.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/plugins/plugins-api.test.js b/packages/e2e-tests/specs/plugins/plugins-api.test.js index fb98300dfb5d2..2773112d6bb60 100644 --- a/packages/e2e-tests/specs/plugins/plugins-api.test.js +++ b/packages/e2e-tests/specs/plugins/plugins-api.test.js @@ -80,8 +80,8 @@ describe( 'Using Plugins API', () => { describe( 'Document Setting Custom Panel', () => { it( 'Should render a custom panel inside Document Setting sidebar', async () => { await openDocumentSettingsSidebar(); - const pluginPostStatusInfoText = await page.$eval( '.edit-post-sidebar .my-document-setting-plugin', ( el ) => el.innerText ); - expect( pluginPostStatusInfoText ).toBe( 'My Document Setting Panel' ); + const pluginDocumentSettingsText = await page.$eval( '.edit-post-sidebar .my-document-setting-plugin', ( el ) => el.innerText ); + expect( pluginDocumentSettingsText ).toBe( 'My Document Setting Panel' ); } ); } ); } ); From c56219fb7310bbbcb0b661cc9382112ca82bb606 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 12 Jun 2019 23:04:07 -0400 Subject: [PATCH 16/32] Updates src order --- .../sidebar/plugin-document-setting/index.js | 36 +++++++++---------- packages/edit-post/src/index.js | 2 +- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js index 786e692a6b3c0..b04caa3a30e1c 100644 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js @@ -9,7 +9,21 @@ import { createSlotFill, PanelBody } from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { withPluginContext } from '@wordpress/plugins'; -export const { Fill, Slot } = createSlotFill( 'PluginDocumentSetting' ); +export const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' ); + +const PluginDocumentSettingFill = ( { className, title, children, isOpened, onTogglePanel, ...props } ) => ( + + + { children } + + +); /** * Renders items below the Status & Availability panel in the Document Sidebar. @@ -60,21 +74,7 @@ export const { Fill, Slot } = createSlotFill( 'PluginDocumentSetting' ); * * @return {WPElement} The WPElement to be rendered. */ -const PluginDocumentSettingFill = ( { className, title, children, isOpened, onTogglePanel, ...props } ) => ( - - - { children } - - -); - -const PluginDocumentSetting = compose( +const PluginDocumentSettingPanel = compose( withPluginContext( ( context, ownProps ) => { return { icon: ownProps.icon || context.icon, @@ -82,5 +82,5 @@ const PluginDocumentSetting = compose( } ), )( PluginDocumentSettingFill ); -PluginDocumentSetting.Slot = Slot; -export default PluginDocumentSetting; +PluginDocumentSettingPanel.Slot = Slot; +export default PluginDocumentSettingPanel; diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index 24fba765582b4..f34b00c96ca80 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -97,10 +97,10 @@ export function initializeEditor( id, postType, postId, settings, initialEdits ) } export { default as PluginBlockSettingsMenuItem } from './components/block-settings-menu/plugin-block-settings-menu-item'; +export { default as PluginDocumentSetting } from './components/sidebar/plugin-document-setting'; 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'; 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 PluginDocumentSetting } from './components/sidebar/plugin-document-setting'; From 628436bbc5c485661e5274b3e74078cca5efcb50 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 12 Jun 2019 23:07:56 -0400 Subject: [PATCH 17/32] Updates docs --- packages/edit-post/README.md | 52 ++++++++++++++++++- .../sidebar/plugin-document-setting/index.js | 8 +-- 2 files changed, 55 insertions(+), 5 deletions(-) diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index d85bd20a4ce97..96f6eb2801370 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -102,7 +102,57 @@ _Returns_ # **PluginDocumentSetting** -Undocumented declaration. +Renders items below the Status & Availability panel in the Document Sidebar. + +_Usage_ + +```js +// Using ES5 syntax +var el = wp.element.createElement; +var __ = wp.i18n.__; +var registerPlugin = wp.plugins.registerPlugin; +var PluginDocumentSetting = wp.editPost.PluginPostStatusInfo; + +function MyDocumentSettingPlugin() { + return el( + PluginDocumentSetting, + { + className: 'my-document-setting-plugin', + }, + __( 'My Document Setting Panel' ) + ); + }; + + registerPlugin( 'my-document-setting-plugin', { + render: MyDocumentSettingPlugin + } ); +``` + +```jsx +// Using ESNext syntax +const { registerPlugin } = wp.plugins; +const { PluginDocumentSetting } = wp.editPost; + +const MyDocumentSettingTest = () => ( + +

My Document Setting Panel

+ +); + + registerPlugin( 'document-setting-test', { render: MyDocumentSettingTest } ); +``` + +_Parameters_ + +- _props_ `Object`: Component properties. +- _props.className_ `[string]`: An optional class name added to the row. +- _props.title_ `[string]`: The title of the panel +- _props.isOpen_ `[boolean]`: The open state of the panel. Optional. +- _props.onTogglePanel_ `[func]`: The function that is run when the panel is toggled. Optional + +_Returns_ + +- `WPElement`: The WPElement to be rendered. # **PluginMoreMenuItem** diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js index b04caa3a30e1c..458db6a04f314 100644 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js @@ -40,11 +40,11 @@ const PluginDocumentSettingFill = ( { className, title, children, isOpened, onTo * var el = wp.element.createElement; * var __ = wp.i18n.__; * var registerPlugin = wp.plugins.registerPlugin; - * var PluginDocumentSetting = wp.editPost.PluginPostStatusInfo; + * var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel; * * function MyDocumentSettingPlugin() { * return el( - * PluginDocumentSetting, + * PluginDocumentSettingPanel, * { * className: 'my-document-setting-plugin', * }, @@ -61,10 +61,10 @@ const PluginDocumentSettingFill = ( { className, title, children, isOpened, onTo * ```jsx * // Using ESNext syntax * const { registerPlugin } = wp.plugins; - * const { PluginDocumentSetting } = wp.editPost; + * const { PluginDocumentSettingPanel } = wp.editPost; * * const MyDocumentSettingTest = () => ( - * + * *

My Document Setting Panel

* * ); From 7d83a36087b259ec0889474afc9a3997303b1c12 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 12 Jun 2019 23:08:51 -0400 Subject: [PATCH 18/32] Updated docs --- packages/edit-post/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 96f6eb2801370..716304997bf69 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -111,11 +111,11 @@ _Usage_ var el = wp.element.createElement; var __ = wp.i18n.__; var registerPlugin = wp.plugins.registerPlugin; -var PluginDocumentSetting = wp.editPost.PluginPostStatusInfo; +var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel; function MyDocumentSettingPlugin() { return el( - PluginDocumentSetting, + PluginDocumentSettingPanel, { className: 'my-document-setting-plugin', }, @@ -131,10 +131,10 @@ function MyDocumentSettingPlugin() { ```jsx // Using ESNext syntax const { registerPlugin } = wp.plugins; -const { PluginDocumentSetting } = wp.editPost; +const { PluginDocumentSettingPanel } = wp.editPost; const MyDocumentSettingTest = () => ( - +

My Document Setting Panel

 ); From 26bca283a31d54addb059fe42f148a7a672a4712 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Wed, 12 Jun 2019 23:16:38 -0400 Subject: [PATCH 19/32] Removes unneeded mock and component --- .../sidebar/plugin-document-setting/test/index.js | 10 ++++------ .../src/components/sidebar/settings-sidebar/index.js | 5 ++--- 2 files changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting/test/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting/test/index.js index ec3413f21d765..c2425df308f0d 100644 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting/test/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting/test/index.js @@ -7,22 +7,20 @@ import { render } from '@wordpress/element'; /** * Internal dependencies */ -import PluginDocumentSetting from '../'; - -jest.mock( '../../../../../../components/src/button' ); +import PluginDocumentSettingPanel from '../'; describe( 'PluginDocumentSetting', () => { test( 'renders fill properly', () => { const div = document.createElement( 'div' ); render( - My panel content - - + + , div ); diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index 93b67f891670c..650c0e3dc70a5 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -5,7 +5,6 @@ import { Panel, PanelBody } from '@wordpress/components'; import { compose, ifCondition } from '@wordpress/compose'; import { withSelect } from '@wordpress/data'; import { BlockInspector } from '@wordpress/block-editor'; -import { Fragment } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -31,7 +30,7 @@ const SettingsSidebar = ( { sidebarName } ) => ( { sidebarName === 'edit-post/document' && ( - + <> @@ -42,7 +41,7 @@ const SettingsSidebar = ( { sidebarName } ) => ( - + ) } { sidebarName === 'edit-post/block' && ( From cca35710e3e3eb0c4c274d952f7d1581e14c22ce Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 14 Jun 2019 22:26:00 -0400 Subject: [PATCH 20/32] Fixes misnamed export and adds toggle handling to the slot --- packages/edit-post/README.md | 2 +- .../index.js | 15 +++++++++++++-- .../test/__snapshots__/index.js.snap | 3 +++ .../test/index.js | 4 +++- .../test/__snapshots__/index.js.snap | 3 --- .../components/sidebar/settings-sidebar/index.js | 2 +- packages/edit-post/src/index.js | 2 +- 7 files changed, 22 insertions(+), 9 deletions(-) rename packages/edit-post/src/components/sidebar/{plugin-document-setting => plugin-document-setting-panel}/index.js (84%) create mode 100644 packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/__snapshots__/index.js.snap rename packages/edit-post/src/components/sidebar/{plugin-document-setting => plugin-document-setting-panel}/test/index.js (92%) delete mode 100644 packages/edit-post/src/components/sidebar/plugin-document-setting/test/__snapshots__/index.js.snap diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 716304997bf69..e8762e059c7e6 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -100,7 +100,7 @@ _Returns_ - `WPElement`: The WPElement to be rendered. -# **PluginDocumentSetting** +# **PluginDocumentSettingPanel** Renders items below the Status & Availability panel in the Document Sidebar. diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js similarity index 84% rename from packages/edit-post/src/components/sidebar/plugin-document-setting/index.js rename to packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js index 458db6a04f314..59181546ef978 100644 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js @@ -8,15 +8,15 @@ import { createSlotFill, PanelBody } from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { withPluginContext } from '@wordpress/plugins'; +import { withDispatch, withSelect } from '@wordpress/data'; export const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' ); -const PluginDocumentSettingFill = ( { className, title, children, isOpened, onTogglePanel, ...props } ) => ( +const PluginDocumentSettingFill = ( { className, title, children, onTogglePanel, ...props } ) => ( @@ -78,8 +78,19 @@ const PluginDocumentSettingPanel = compose( withPluginContext( ( context, ownProps ) => { return { icon: ownProps.icon || context.icon, + panelName: `${ context.name }/${ ownProps.name }`, }; } ), + withSelect( ( select, { panelName } ) => { + return ( + { isOpened: select( 'core/edit-post' ).isEditorPanelOpened( panelName ) } + ); + } ), + withDispatch( ( dispatch, { panelName } ) => ( { + onTogglePanel() { + return dispatch( 'core/edit-post' ).toggleEditorPanelOpened( panelName ); + }, + } ) ), )( PluginDocumentSettingFill ); PluginDocumentSettingPanel.Slot = Slot; diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/__snapshots__/index.js.snap new file mode 100644 index 0000000000000..0a126af3f8a12 --- /dev/null +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/__snapshots__/index.js.snap @@ -0,0 +1,3 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PluginDocumentSetting renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting/test/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/index.js similarity index 92% rename from packages/edit-post/src/components/sidebar/plugin-document-setting/test/index.js rename to packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/index.js index c2425df308f0d..77553aa9c6cb1 100644 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting/test/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/index.js @@ -17,7 +17,9 @@ describe( 'PluginDocumentSetting', () => { + initialOpen={ true } + icon="smiley" + > My panel content diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-document-setting/test/__snapshots__/index.js.snap deleted file mode 100644 index 732e4c9750603..0000000000000 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PluginDocumentSetting renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index 650c0e3dc70a5..0e31624db3f66 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -20,7 +20,7 @@ import PostLink from '../post-link'; import DiscussionPanel from '../discussion-panel'; import PageAttributes from '../page-attributes'; import MetaBoxes from '../../meta-boxes'; -import PluginDocumentSetting from '../plugin-document-setting'; +import PluginDocumentSetting from '../plugin-document-setting-panel'; const SettingsSidebar = ( { sidebarName } ) => ( Date: Fri, 14 Jun 2019 22:44:12 -0400 Subject: [PATCH 21/32] Cleaning up the Slot properties --- .../sidebar/plugin-document-setting-panel/index.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) 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 59181546ef978..a937b5f18842b 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 @@ -12,12 +12,12 @@ import { withDispatch, withSelect } from '@wordpress/data'; export const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' ); -const PluginDocumentSettingFill = ( { className, title, children, onTogglePanel, ...props } ) => ( +const PluginDocumentSettingFill = ( { name, className, title, children, ...props } ) => ( { children } @@ -31,8 +31,6 @@ const PluginDocumentSettingFill = ( { className, title, children, onTogglePanel, * @param {Object} props Component properties. * @param {string} [props.className] An optional class name added to the row. * @param {string} [props.title] The title of the panel - * @param {boolean} [props.isOpen] The open state of the panel. Optional. - * @param {func} [props.onTogglePanel] The function that is run when the panel is toggled. Optional * * @example ES5 * ```js @@ -83,11 +81,11 @@ const PluginDocumentSettingPanel = compose( } ), withSelect( ( select, { panelName } ) => { return ( - { isOpened: select( 'core/edit-post' ).isEditorPanelOpened( panelName ) } + { opened: select( 'core/edit-post' ).isEditorPanelOpened( panelName ) } ); } ), withDispatch( ( dispatch, { panelName } ) => ( { - onTogglePanel() { + onToggle() { return dispatch( 'core/edit-post' ).toggleEditorPanelOpened( panelName ); }, } ) ), From 2bc05def1839a65cf0664f9851c10ab53c7df6e4 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 14 Jun 2019 22:44:34 -0400 Subject: [PATCH 22/32] Doc updates --- packages/edit-post/README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index e8762e059c7e6..4cb6bd1e4f19b 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -147,8 +147,6 @@ _Parameters_ - _props_ `Object`: Component properties. - _props.className_ `[string]`: An optional class name added to the row. - _props.title_ `[string]`: The title of the panel -- _props.isOpen_ `[boolean]`: The open state of the panel. Optional. -- _props.onTogglePanel_ `[func]`: The function that is run when the panel is toggled. Optional _Returns_ From 6b57e00f5509da6a6be8e898284724546c6a1d60 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 14 Jun 2019 22:46:39 -0400 Subject: [PATCH 23/32] Doc updates 2: Docs harder --- packages/edit-post/README.md | 1 + .../components/sidebar/plugin-document-setting-panel/index.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 4cb6bd1e4f19b..8ad101d15d015 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -145,6 +145,7 @@ const MyDocumentSettingTest = () => ( _Parameters_ - _props_ `Object`: Component properties. +- _props.name_ `[string]`: The 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 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 a937b5f18842b..b72067f8e7d72 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 @@ -29,6 +29,7 @@ const PluginDocumentSettingFill = ( { name, className, title, children, ...props * Renders items below the Status & Availability panel in the Document Sidebar. * * @param {Object} props Component properties. + * @param {string} [props.name] The machine-friendly name for the panel. * @param {string} [props.className] An optional class name added to the row. * @param {string} [props.title] The title of the panel * From 797ced87a6ba0e31eb855882ea829754475c56f8 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 14 Jun 2019 23:00:01 -0400 Subject: [PATCH 24/32] Adds logic to allow removal of panel using removeEditorPanel --- .../plugin-document-setting-panel/index.js | 34 ++++++++++++------- 1 file changed, 21 insertions(+), 13 deletions(-) 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 b72067f8e7d72..e9ef58bdee29f 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 @@ -12,18 +12,23 @@ import { withDispatch, withSelect } from '@wordpress/data'; export const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' ); -const PluginDocumentSettingFill = ( { name, className, title, children, ...props } ) => ( - - - { children } - - -); +const PluginDocumentSettingFill = ( { isEnabled, name, className, title, children, ...props } ) => { + if ( ! isEnabled ) { + return null; + } + return ( + + + { children } + + + ); +}; /** * Renders items below the Status & Availability panel in the Document Sidebar. @@ -82,7 +87,10 @@ const PluginDocumentSettingPanel = compose( } ), withSelect( ( select, { panelName } ) => { return ( - { opened: select( 'core/edit-post' ).isEditorPanelOpened( panelName ) } + { + opened: select( 'core/edit-post' ).isEditorPanelOpened( panelName ), + isEnabled: select( 'core/edit-post' ).isEditorPanelEnabled( panelName ), + } ); } ), withDispatch( ( dispatch, { panelName } ) => ( { From f4f25ef71442ca7b6e4b26455c5d83732e16cc22 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 14 Jun 2019 23:24:19 -0400 Subject: [PATCH 25/32] Removes snapshot tests due to strange failures --- .../test/__snapshots__/index.js.snap | 3 -- .../test/index.js | 32 ------------------- 2 files changed, 35 deletions(-) delete mode 100644 packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/__snapshots__/index.js.snap delete mode 100644 packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/index.js diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/__snapshots__/index.js.snap deleted file mode 100644 index 0a126af3f8a12..0000000000000 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,3 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`PluginDocumentSetting renders fill properly 1`] = `"

My panel content
"`; diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/index.js deleted file mode 100644 index 77553aa9c6cb1..0000000000000 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/test/index.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * WordPress dependencies - */ -import { SlotFillProvider } from '@wordpress/components'; -import { render } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import PluginDocumentSettingPanel from '../'; - -describe( 'PluginDocumentSetting', () => { - test( 'renders fill properly', () => { - const div = document.createElement( 'div' ); - render( - - - My panel content - - - , - div - ); - - expect( div.innerHTML ).toMatchSnapshot(); - } ); -} ); From b1954c55aa667854eee7868b0f635de0c20f1958 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 14 Jun 2019 23:41:46 -0400 Subject: [PATCH 26/32] Updates e2e test --- packages/e2e-tests/plugins/plugins-api/document-setting.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/plugins/plugins-api/document-setting.js b/packages/e2e-tests/plugins/plugins-api/document-setting.js index 1194b5d62d64e..b244800c25809 100644 --- a/packages/e2e-tests/plugins/plugins-api/document-setting.js +++ b/packages/e2e-tests/plugins/plugins-api/document-setting.js @@ -2,13 +2,14 @@ var el = wp.element.createElement; var __ = wp.i18n.__; var registerPlugin = wp.plugins.registerPlugin; - var PluginDocumentSetting = wp.editPost.PluginDocumentSetting; + var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel; function MyDocumentSettingPlugin() { return el( - PluginDocumentSetting, + PluginDocumentSettingPanel, { className: 'my-document-setting-plugin', + title: 'My Custom Panel' }, __( 'My Document Setting Panel' ) ); From 3ccdbfcf46b0f8fd2aa4d831c8667abcec98539e Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 20 Jun 2019 21:34:55 -0400 Subject: [PATCH 27/32] Explicitly using props instead of ...props --- .../sidebar/plugin-document-setting-panel/index.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) 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 e9ef58bdee29f..b8ed39e6605e3 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 @@ -12,17 +12,18 @@ import { withDispatch, withSelect } from '@wordpress/data'; export const { Fill, Slot } = createSlotFill( 'PluginDocumentSettingPanel' ); -const PluginDocumentSettingFill = ( { isEnabled, name, className, title, children, ...props } ) => { +const PluginDocumentSettingFill = ( { isEnabled, opened, onToggle, className, title, icon, children } ) => { if ( ! isEnabled ) { return null; } return ( { children } @@ -37,6 +38,7 @@ const PluginDocumentSettingFill = ( { isEnabled, name, className, title, childre * @param {string} [props.name] The machine-friendly name for the panel. * @param {string} [props.className] An optional class name added to the row. * @param {string} [props.title] The title of the panel + * @param {string|Element} [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 when the sidebar is pinned to toolbar. * * @example ES5 * ```js From f71ae7df8f5543f7227de1852b48faebd5720242 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 20 Jun 2019 21:35:33 -0400 Subject: [PATCH 28/32] Docs updated and correctly naming import --- packages/edit-post/README.md | 1 + .../src/components/sidebar/settings-sidebar/index.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 8ad101d15d015..3d5105664acbc 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -148,6 +148,7 @@ _Parameters_ - _props.name_ `[string]`: The 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_ `[(string|Element)]`: 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. _Returns_ diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index 0e31624db3f66..49bb45eec0ce3 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -20,7 +20,7 @@ import PostLink from '../post-link'; import DiscussionPanel from '../discussion-panel'; import PageAttributes from '../page-attributes'; import MetaBoxes from '../../meta-boxes'; -import PluginDocumentSetting from '../plugin-document-setting-panel'; +import PluginDocumentSettingPanel from '../plugin-document-setting-panel'; const SettingsSidebar = ( { sidebarName } ) => ( ( { sidebarName === 'edit-post/document' && ( <> - + From b1e1f7f1b5817cee5c1706bd739d27a13df7441d Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 20 Jun 2019 21:39:01 -0400 Subject: [PATCH 29/32] Updates tests --- packages/e2e-tests/specs/plugins/plugins-api.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/e2e-tests/specs/plugins/plugins-api.test.js b/packages/e2e-tests/specs/plugins/plugins-api.test.js index 2773112d6bb60..c2e4bff1b9641 100644 --- a/packages/e2e-tests/specs/plugins/plugins-api.test.js +++ b/packages/e2e-tests/specs/plugins/plugins-api.test.js @@ -82,6 +82,7 @@ describe( 'Using Plugins API', () => { await openDocumentSettingsSidebar(); const pluginDocumentSettingsText = await page.$eval( '.edit-post-sidebar .my-document-setting-plugin', ( el ) => el.innerText ); expect( pluginDocumentSettingsText ).toBe( 'My Document Setting Panel' ); + expect( pluginDocumentSettingsText ).toMatchSnapshot(); } ); } ); } ); From 1744eeca14c07ae1b781990378d0944a2e8b587f Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 1 Jul 2019 15:32:01 -0400 Subject: [PATCH 30/32] Fixes doc indents --- packages/edit-post/README.md | 14 +++++++------- .../sidebar/plugin-document-setting-panel/index.js | 14 +++++++------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md index 3d5105664acbc..6b895c79e75fb 100644 --- a/packages/edit-post/README.md +++ b/packages/edit-post/README.md @@ -116,16 +116,16 @@ var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel; function MyDocumentSettingPlugin() { return el( PluginDocumentSettingPanel, - { + { className: 'my-document-setting-plugin', }, - __( 'My Document Setting Panel' ) - ); - }; + __( 'My Document Setting Panel' ) + ); +} - registerPlugin( 'my-document-setting-plugin', { - render: MyDocumentSettingPlugin - } ); +registerPlugin( 'my-document-setting-plugin', { + render: MyDocumentSettingPlugin +} ); ``` ```jsx 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 b8ed39e6605e3..a4ba4b924273b 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 @@ -51,16 +51,16 @@ const PluginDocumentSettingFill = ( { isEnabled, opened, onToggle, className, ti * function MyDocumentSettingPlugin() { * return el( * PluginDocumentSettingPanel, - * { + * { * className: 'my-document-setting-plugin', * }, - * __( 'My Document Setting Panel' ) - * ); - * }; + * __( 'My Document Setting Panel' ) + * ); + * } * - * registerPlugin( 'my-document-setting-plugin', { - * render: MyDocumentSettingPlugin - * } ); + * registerPlugin( 'my-document-setting-plugin', { + * render: MyDocumentSettingPlugin + * } ); * ``` * * @example ESNext From 7c8a6ab6532a0bdc2ee61a5c74fa3b4ec3b957d6 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 1 Jul 2019 15:49:15 -0400 Subject: [PATCH 31/32] Updates e2e test to use snapshot --- packages/e2e-tests/specs/plugins/plugins-api.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/e2e-tests/specs/plugins/plugins-api.test.js b/packages/e2e-tests/specs/plugins/plugins-api.test.js index c2e4bff1b9641..904fcaf0914e0 100644 --- a/packages/e2e-tests/specs/plugins/plugins-api.test.js +++ b/packages/e2e-tests/specs/plugins/plugins-api.test.js @@ -81,7 +81,6 @@ describe( 'Using Plugins API', () => { it( 'Should render a custom panel inside Document Setting sidebar', async () => { await openDocumentSettingsSidebar(); const pluginDocumentSettingsText = await page.$eval( '.edit-post-sidebar .my-document-setting-plugin', ( el ) => el.innerText ); - expect( pluginDocumentSettingsText ).toBe( 'My Document Setting Panel' ); expect( pluginDocumentSettingsText ).toMatchSnapshot(); } ); } ); From ddb50289082b9a040f2b3555920333ce4d370cc1 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 1 Jul 2019 16:00:04 -0400 Subject: [PATCH 32/32] Updates snapshot for plugins --- .../specs/plugins/__snapshots__/plugins-api.test.js.snap | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/e2e-tests/specs/plugins/__snapshots__/plugins-api.test.js.snap b/packages/e2e-tests/specs/plugins/__snapshots__/plugins-api.test.js.snap index a3dda4545d67d..0d8533597b041 100644 --- a/packages/e2e-tests/specs/plugins/__snapshots__/plugins-api.test.js.snap +++ b/packages/e2e-tests/specs/plugins/__snapshots__/plugins-api.test.js.snap @@ -1,3 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Using Plugins API Document Setting Custom Panel Should render a custom panel inside Document Setting sidebar 1`] = ` +" +My Custom Panel +" +`; + exports[`Using Plugins API Sidebar Should open plugins sidebar using More Menu item and render content 1`] = `"
(no title)
Sidebar title plugin
"`;