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..20fcc13604f2f --- /dev/null +++ b/packages/editor/src/hooks/block-settings-inspector-toggle.js @@ -0,0 +1,62 @@ +/** + * 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 options menu item + * to toggle the block's inspector controls open. + * + * @param {Component} BlockEdit Original component. + * + * @return {Component} Wrapped component. + */ +const withBlockSettingsInspectorToggle = createHigherOrderComponent( + ( BlockEdit ) => ( props ) => { + return ( + <> + + { props.isSelected && } + + ); + }, + 'withBlockSettingsInspectorToggle' +); + +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 } + aria-disabled={ isOpen } + > + { __( 'Block settings' ) } + + + ); +}; + +addFilter( + 'editor.BlockEdit', + 'core/editor/with-block-settings-inspector-toggle', + withBlockSettingsInspectorToggle +); 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';