From 8a8ab97b5af27e13fc88c7d43b6321c6b6daefba Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 29 May 2020 16:46:23 -0400 Subject: [PATCH 1/9] Cleaner logic to determine which name to use --- .../src/components/colors/test/utils.js | 118 ------------------ .../plugin-document-setting-panel/index.js | 2 +- 2 files changed, 1 insertion(+), 119 deletions(-) delete mode 100644 packages/block-editor/src/components/colors/test/utils.js diff --git a/packages/block-editor/src/components/colors/test/utils.js b/packages/block-editor/src/components/colors/test/utils.js deleted file mode 100644 index 1ed18cef831c8..0000000000000 --- a/packages/block-editor/src/components/colors/test/utils.js +++ /dev/null @@ -1,118 +0,0 @@ -/** - * Internal dependencies - */ -import { - getColorObjectByAttributeValues, - getColorObjectByColorValue, - getColorClassName, -} from '../utils'; - -describe( 'color utils', () => { - describe( 'getColorObjectByAttributeValues', () => { - it( 'should return the custom color object when there is no definedColor', () => { - const colors = [ - { slug: 'red' }, - { slug: 'green' }, - { slug: 'blue' }, - ]; - const customColor = '#ffffff'; - - expect( - getColorObjectByAttributeValues( - colors, - undefined, - customColor - ) - ).toEqual( { - color: customColor, - } ); - } ); - - it( 'should return the custom color object when definedColor was not found', () => { - const colors = [ - { slug: 'red' }, - { slug: 'green' }, - { slug: 'blue' }, - ]; - const definedColor = 'purple'; - const customColor = '#ffffff'; - - expect( - getColorObjectByAttributeValues( - colors, - definedColor, - customColor - ) - ).toEqual( { - color: customColor, - } ); - } ); - - it( 'should return the found color object', () => { - const colors = [ - { slug: 'red' }, - { slug: 'green' }, - { slug: 'blue' }, - ]; - const definedColor = 'blue'; - const customColor = '#ffffff'; - - expect( - getColorObjectByAttributeValues( - colors, - definedColor, - customColor - ) - ).toEqual( { - slug: 'blue', - } ); - } ); - } ); - - describe( 'getColorObjectByColorValue', () => { - it( 'should return undefined if the given color was not found', () => { - const colors = [ - { slug: 'red', color: '#ff0000' }, - { slug: 'green', color: '#00ff00' }, - { slug: 'blue', color: '#0000ff' }, - ]; - - expect( - getColorObjectByColorValue( colors, '#ffffff' ) - ).toBeUndefined(); - } ); - - it( 'should return a color object for the given color value', () => { - const colors = [ - { slug: 'red', color: '#ff0000' }, - { slug: 'green', color: '#00ff00' }, - { slug: 'blue', color: '#0000ff' }, - ]; - - expect( getColorObjectByColorValue( colors, '#00ff00' ) ).toEqual( { - slug: 'green', - color: '#00ff00', - } ); - } ); - } ); - - describe( 'getColorClassName', () => { - it( 'should return undefined if colorContextName is missing', () => { - expect( - getColorClassName( undefined, 'Light Purple' ) - ).toBeUndefined(); - } ); - - it( 'should return undefined if colorSlug is missing', () => { - expect( - getColorClassName( 'background', undefined ) - ).toBeUndefined(); - } ); - - it( 'should return a class name with the color slug in kebab case', () => { - expect( getColorClassName( 'background', 'Light Purple' ) ).toBe( - 'has-light-purple-background' - ); - } ); - } ); -} ); diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js index 56133e8162aad..8707209ed151d 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 @@ -106,7 +106,7 @@ const PluginDocumentSettingPanel = compose( withPluginContext( ( context, ownProps ) => { return { icon: ownProps.icon || context.icon, - panelName: `${ context.name }/${ ownProps.name }`, + panelName: ownProps.name || context.name }; } ), withSelect( ( select, { panelName } ) => { From 12c4f20d55a3c9841cbd79101e8107bb3c8a27c0 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Fri, 29 May 2020 16:46:55 -0400 Subject: [PATCH 2/9] Adding trailing comma --- .../components/sidebar/plugin-document-setting-panel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 8707209ed151d..84a8833573881 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 @@ -106,7 +106,7 @@ const PluginDocumentSettingPanel = compose( withPluginContext( ( context, ownProps ) => { return { icon: ownProps.icon || context.icon, - panelName: ownProps.name || context.name + panelName: ownProps.name || context.name, }; } ), withSelect( ( select, { panelName } ) => { From c7065b4422ae5a7ebe6a69ecb4075f0799090076 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 15 Jun 2020 22:05:29 -0400 Subject: [PATCH 3/9] Adding a warning to the slotfill and update docs. --- .../slotfills/plugin-document-setting-panel.md | 10 ++++++++++ package-lock.json | 1 + packages/edit-post/package.json | 1 + .../sidebar/plugin-document-setting-panel/index.js | 6 +++++- 4 files changed, 17 insertions(+), 1 deletion(-) diff --git a/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md b/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md index 25a5ab915cb54..89abcfd51e727 100644 --- a/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md +++ b/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md @@ -30,3 +30,13 @@ registerPlugin( 'plugin-document-setting-panel-demo', { icon: 'palmtree', } ); ``` +## Accessing a panel programmatically + +Custom panels are namespaced with the plugin name that was passed to `registerPlugin`. +In order to access the panels using function such as `wp.data.dispatch('core/edit-post').toggleEditorPanelOpened` or wp.data.dispatch('core/edit-post').toggleEditorPanelToggle` be sure to prepend the namepace. + +To programmatically toggle the custom panel added in the example above, use the following: + +```js +wp.data.dispatch('core/edit-post').toggleEditorPanelToggle('plugin-document-setting-panel-demo/custom-panel'); +``` \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 1224a12c0cf1e..91381d3c2a86e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10839,6 +10839,7 @@ "@wordpress/primitives": "file:packages/primitives", "@wordpress/url": "file:packages/url", "@wordpress/viewport": "file:packages/viewport", + "@wordpress/warning": "file:packages/warning", "classnames": "^2.2.5", "lodash": "^4.17.15", "memize": "^1.1.0", diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index 12b0758a3ea8d..bb2ffd25d20b0 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -52,6 +52,7 @@ "@wordpress/primitives": "file:../primitives", "@wordpress/url": "file:../url", "@wordpress/viewport": "file:../viewport", + "@wordpress/warning": "file:../warning", "classnames": "^2.2.5", "lodash": "^4.17.15", "memize": "^1.1.0", diff --git a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js index 84a8833573881..8ed863da20d96 100644 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js @@ -9,6 +9,7 @@ import { createSlotFill, PanelBody } from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { withPluginContext } from '@wordpress/plugins'; import { withDispatch, withSelect } from '@wordpress/data'; +import warning from '@wordpress/warning'; /** * Internal dependencies @@ -104,9 +105,12 @@ const PluginDocumentSettingFill = ( { */ const PluginDocumentSettingPanel = compose( withPluginContext( ( context, ownProps ) => { + if ( undefined !== ownProps.name ) { + warning( 'PluginDocumentSettingPanel requires a name property' ); + } return { icon: ownProps.icon || context.icon, - panelName: ownProps.name || context.name, + panelName: `${ context.name }/${ ownProps.name }`, }; } ), withSelect( ( select, { panelName } ) => { From 69a09b822923a3aa8640bb912ad0ce4d86f851b6 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Mon, 15 Jun 2020 22:10:15 -0400 Subject: [PATCH 4/9] Adding missing period. --- .../components/sidebar/plugin-document-setting-panel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 8ed863da20d96..f2bcf49a584ba 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 @@ -106,7 +106,7 @@ const PluginDocumentSettingFill = ( { const PluginDocumentSettingPanel = compose( withPluginContext( ( context, ownProps ) => { if ( undefined !== ownProps.name ) { - warning( 'PluginDocumentSettingPanel requires a name property' ); + warning( 'PluginDocumentSettingPanel requires a name property.' ); } return { icon: ownProps.icon || context.icon, From 9515519f65afbe52d09f73c323be8b132b79bef3 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Jun 2020 09:26:04 -0400 Subject: [PATCH 5/9] Update docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Greg Ziółkowski --- .../developers/slotfills/plugin-document-setting-panel.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md b/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md index 89abcfd51e727..f67f6d8c78a98 100644 --- a/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md +++ b/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md @@ -33,10 +33,10 @@ registerPlugin( 'plugin-document-setting-panel-demo', { ## Accessing a panel programmatically Custom panels are namespaced with the plugin name that was passed to `registerPlugin`. -In order to access the panels using function such as `wp.data.dispatch('core/edit-post').toggleEditorPanelOpened` or wp.data.dispatch('core/edit-post').toggleEditorPanelToggle` be sure to prepend the namepace. +In order to access the panels using function such as `wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelOpened` or `wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelToggle` be sure to prepend the namepace. To programmatically toggle the custom panel added in the example above, use the following: ```js wp.data.dispatch('core/edit-post').toggleEditorPanelToggle('plugin-document-setting-panel-demo/custom-panel'); -``` \ No newline at end of file +``` From aaf6053158c0cd26a126f2394c5c5cfd4c01f201 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Jun 2020 09:26:15 -0400 Subject: [PATCH 6/9] Update docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Greg Ziółkowski --- .../developers/slotfills/plugin-document-setting-panel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md b/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md index f67f6d8c78a98..f9d1364517703 100644 --- a/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md +++ b/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md @@ -38,5 +38,5 @@ In order to access the panels using function such as `wp.data.dispatch( 'core/ed To programmatically toggle the custom panel added in the example above, use the following: ```js -wp.data.dispatch('core/edit-post').toggleEditorPanelToggle('plugin-document-setting-panel-demo/custom-panel'); +wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelToggle( 'plugin-document-setting-panel-demo/custom-panel' ); ``` From 4d2770e326455324ff762fb887ac74aeea471f01 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Jun 2020 09:33:11 -0400 Subject: [PATCH 7/9] Re-add file removed in error --- .../src/components/colors/test/utils.js | 118 ++++++++++++++++++ 1 file changed, 118 insertions(+) create mode 100644 packages/block-editor/src/components/colors/test/utils.js diff --git a/packages/block-editor/src/components/colors/test/utils.js b/packages/block-editor/src/components/colors/test/utils.js new file mode 100644 index 0000000000000..1ed18cef831c8 --- /dev/null +++ b/packages/block-editor/src/components/colors/test/utils.js @@ -0,0 +1,118 @@ +/** + * Internal dependencies + */ +import { + getColorObjectByAttributeValues, + getColorObjectByColorValue, + getColorClassName, +} from '../utils'; + +describe( 'color utils', () => { + describe( 'getColorObjectByAttributeValues', () => { + it( 'should return the custom color object when there is no definedColor', () => { + const colors = [ + { slug: 'red' }, + { slug: 'green' }, + { slug: 'blue' }, + ]; + const customColor = '#ffffff'; + + expect( + getColorObjectByAttributeValues( + colors, + undefined, + customColor + ) + ).toEqual( { + color: customColor, + } ); + } ); + + it( 'should return the custom color object when definedColor was not found', () => { + const colors = [ + { slug: 'red' }, + { slug: 'green' }, + { slug: 'blue' }, + ]; + const definedColor = 'purple'; + const customColor = '#ffffff'; + + expect( + getColorObjectByAttributeValues( + colors, + definedColor, + customColor + ) + ).toEqual( { + color: customColor, + } ); + } ); + + it( 'should return the found color object', () => { + const colors = [ + { slug: 'red' }, + { slug: 'green' }, + { slug: 'blue' }, + ]; + const definedColor = 'blue'; + const customColor = '#ffffff'; + + expect( + getColorObjectByAttributeValues( + colors, + definedColor, + customColor + ) + ).toEqual( { + slug: 'blue', + } ); + } ); + } ); + + describe( 'getColorObjectByColorValue', () => { + it( 'should return undefined if the given color was not found', () => { + const colors = [ + { slug: 'red', color: '#ff0000' }, + { slug: 'green', color: '#00ff00' }, + { slug: 'blue', color: '#0000ff' }, + ]; + + expect( + getColorObjectByColorValue( colors, '#ffffff' ) + ).toBeUndefined(); + } ); + + it( 'should return a color object for the given color value', () => { + const colors = [ + { slug: 'red', color: '#ff0000' }, + { slug: 'green', color: '#00ff00' }, + { slug: 'blue', color: '#0000ff' }, + ]; + + expect( getColorObjectByColorValue( colors, '#00ff00' ) ).toEqual( { + slug: 'green', + color: '#00ff00', + } ); + } ); + } ); + + describe( 'getColorClassName', () => { + it( 'should return undefined if colorContextName is missing', () => { + expect( + getColorClassName( undefined, 'Light Purple' ) + ).toBeUndefined(); + } ); + + it( 'should return undefined if colorSlug is missing', () => { + expect( + getColorClassName( 'background', undefined ) + ).toBeUndefined(); + } ); + + it( 'should return a class name with the color slug in kebab case', () => { + expect( getColorClassName( 'background', 'Light Purple' ) ).toBe( + 'has-light-purple-background' + ); + } ); + } ); +} ); From a1e2819af79f2e39ecb24684315171e69bb025c5 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Jun 2020 10:35:16 -0400 Subject: [PATCH 8/9] Correct logic checking for missing name prop. --- .../components/sidebar/plugin-document-setting-panel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f2bcf49a584ba..c83b42f2bee57 100644 --- a/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js +++ b/packages/edit-post/src/components/sidebar/plugin-document-setting-panel/index.js @@ -105,7 +105,7 @@ const PluginDocumentSettingFill = ( { */ const PluginDocumentSettingPanel = compose( withPluginContext( ( context, ownProps ) => { - if ( undefined !== ownProps.name ) { + if ( undefined === ownProps.name ) { warning( 'PluginDocumentSettingPanel requires a name property.' ); } return { From b847966324988e2a176d89ac885b4ae043efcb8a Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Tue, 16 Jun 2020 10:35:39 -0400 Subject: [PATCH 9/9] Update docs to use correct function name. --- .../developers/slotfills/plugin-document-setting-panel.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md b/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md index f9d1364517703..b0bb15e5363d9 100644 --- a/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md +++ b/docs/designers-developers/developers/slotfills/plugin-document-setting-panel.md @@ -33,10 +33,10 @@ registerPlugin( 'plugin-document-setting-panel-demo', { ## Accessing a panel programmatically Custom panels are namespaced with the plugin name that was passed to `registerPlugin`. -In order to access the panels using function such as `wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelOpened` or `wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelToggle` be sure to prepend the namepace. +In order to access the panels using function such as `wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelOpened` or `wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelEnabled` be sure to prepend the namepace. To programmatically toggle the custom panel added in the example above, use the following: ```js -wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelToggle( 'plugin-document-setting-panel-demo/custom-panel' ); +wp.data.dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'plugin-document-setting-panel-demo/custom-panel' ); ```