From b470bad58505aa1c8865098e7f62e3777573fe99 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 10 Sep 2024 10:26:23 +0100 Subject: [PATCH 1/5] Add toggle to block --- .../hooks/block-settings-inspector-toggle.js | 63 +++++++++++++++++++ packages/editor/src/hooks/index.js | 1 + 2 files changed, 64 insertions(+) create mode 100644 packages/editor/src/hooks/block-settings-inspector-toggle.js diff --git a/packages/editor/src/hooks/block-settings-inspector-toggle.js b/packages/editor/src/hooks/block-settings-inspector-toggle.js new file mode 100644 index 0000000000000..939f9f3448873 --- /dev/null +++ b/packages/editor/src/hooks/block-settings-inspector-toggle.js @@ -0,0 +1,63 @@ +/** + * WordPress dependencies + */ +import { addFilter } from '@wordpress/hooks'; +import { createHigherOrderComponent } from '@wordpress/compose'; +import { __unstableBlockSettingsMenuFirstItem as BlockSettingsMenuFirstItem } from '@wordpress/block-editor'; +import { MenuItem } from '@wordpress/components'; +import { store as interfaceStore } from '@wordpress/interface'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { __, isRTL } from '@wordpress/i18n'; +import { drawerLeft, drawerRight } from '@wordpress/icons'; + +/** + * Override the default edit UI to include a new block inspector control for + * assigning a partial syncing controls to supported blocks in the pattern editor. + * Currently, only the `core/paragraph` block is supported. + * + * @param {Component} BlockEdit Original component. + * + * @return {Component} Wrapped component. + */ +const withBlockToolbar = createHigherOrderComponent( + ( BlockEdit ) => ( props ) => { + return ( + <> + + { props.isSelected && } + + ); + }, + 'withBlockToolbar' +); + +const BlockInspectorToggle = () => { + const { enableComplementaryArea } = useDispatch( interfaceStore ); + + const isOpen = useSelect( + ( select ) => + select( interfaceStore ).getActiveComplementaryArea( 'core' ) === + 'edit-post/block', + [] + ); + + return ( + + { + enableComplementaryArea( 'core', 'edit-post/block' ); + } } + icon={ isRTL() ? drawerLeft : drawerRight } + disabled={ isOpen } + > + { __( 'Open Block settings' ) } + + + ); +}; + +addFilter( + 'editor.BlockEdit', + 'core/editor/with-block-settings-inspector-toggle', + withBlockToolbar +); diff --git a/packages/editor/src/hooks/index.js b/packages/editor/src/hooks/index.js index 6001d53f65c10..e0e3ad3f5d9a1 100644 --- a/packages/editor/src/hooks/index.js +++ b/packages/editor/src/hooks/index.js @@ -5,3 +5,4 @@ import './custom-sources-backwards-compatibility'; import './default-autocompleters'; import './media-upload'; import './pattern-overrides'; +import './block-settings-inspector-toggle'; From 7a87eb15db644adabaf538ddc9df5f5f74914fc7 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 10 Sep 2024 10:37:02 +0100 Subject: [PATCH 2/5] Correct component name --- .../editor/src/hooks/block-settings-inspector-toggle.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/hooks/block-settings-inspector-toggle.js b/packages/editor/src/hooks/block-settings-inspector-toggle.js index 939f9f3448873..68b23127432fa 100644 --- a/packages/editor/src/hooks/block-settings-inspector-toggle.js +++ b/packages/editor/src/hooks/block-settings-inspector-toggle.js @@ -19,7 +19,7 @@ import { drawerLeft, drawerRight } from '@wordpress/icons'; * * @return {Component} Wrapped component. */ -const withBlockToolbar = createHigherOrderComponent( +const withBlockSettingsInspectorToggle = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { return ( <> @@ -28,7 +28,7 @@ const withBlockToolbar = createHigherOrderComponent( ); }, - 'withBlockToolbar' + 'withBlockSettingsInspectorToggle' ); const BlockInspectorToggle = () => { @@ -59,5 +59,5 @@ const BlockInspectorToggle = () => { addFilter( 'editor.BlockEdit', 'core/editor/with-block-settings-inspector-toggle', - withBlockToolbar + withBlockSettingsInspectorToggle ); From 7662ef5f583c14749d64a17c0b4b8660115ceeda Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 24 Sep 2024 13:43:25 +0100 Subject: [PATCH 3/5] Prefer aria-disabled --- packages/editor/src/hooks/block-settings-inspector-toggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/hooks/block-settings-inspector-toggle.js b/packages/editor/src/hooks/block-settings-inspector-toggle.js index 68b23127432fa..09b94c06488fb 100644 --- a/packages/editor/src/hooks/block-settings-inspector-toggle.js +++ b/packages/editor/src/hooks/block-settings-inspector-toggle.js @@ -48,7 +48,7 @@ const BlockInspectorToggle = () => { enableComplementaryArea( 'core', 'edit-post/block' ); } } icon={ isRTL() ? drawerLeft : drawerRight } - disabled={ isOpen } + aria-disabled={ isOpen } > { __( 'Open Block settings' ) } From b4afe2f8a94f3a579eaea1a9b34ee4f80d263974 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Sep 2024 09:44:12 +0100 Subject: [PATCH 4/5] Use wording suggested in review --- packages/editor/src/hooks/block-settings-inspector-toggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/hooks/block-settings-inspector-toggle.js b/packages/editor/src/hooks/block-settings-inspector-toggle.js index 09b94c06488fb..85c01377dcc27 100644 --- a/packages/editor/src/hooks/block-settings-inspector-toggle.js +++ b/packages/editor/src/hooks/block-settings-inspector-toggle.js @@ -50,7 +50,7 @@ const BlockInspectorToggle = () => { icon={ isRTL() ? drawerLeft : drawerRight } aria-disabled={ isOpen } > - { __( 'Open Block settings' ) } + { __( 'Block settings' ) } ); From 873f65713df01098419065654331383d8d56a8a4 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 25 Sep 2024 09:45:11 +0100 Subject: [PATCH 5/5] Correct documentation --- packages/editor/src/hooks/block-settings-inspector-toggle.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/hooks/block-settings-inspector-toggle.js b/packages/editor/src/hooks/block-settings-inspector-toggle.js index 85c01377dcc27..20fcc13604f2f 100644 --- a/packages/editor/src/hooks/block-settings-inspector-toggle.js +++ b/packages/editor/src/hooks/block-settings-inspector-toggle.js @@ -11,9 +11,8 @@ import { __, isRTL } from '@wordpress/i18n'; import { drawerLeft, drawerRight } from '@wordpress/icons'; /** - * Override the default edit UI to include a new block inspector control for - * assigning a partial syncing controls to supported blocks in the pattern editor. - * Currently, only the `core/paragraph` block is supported. + * Override the default edit UI to include a new block options menu item + * to toggle the block's inspector controls open. * * @param {Component} BlockEdit Original component. *