diff --git a/packages/edit-site/src/components/block-editor/block-inspector-button.js b/packages/edit-site/src/components/block-editor/block-inspector-button.js new file mode 100644 index 00000000000000..1d29d1b737cb10 --- /dev/null +++ b/packages/edit-site/src/components/block-editor/block-inspector-button.js @@ -0,0 +1,63 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { speak } from '@wordpress/a11y'; +import { MenuItem } from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { store as interfaceStore } from '@wordpress/interface'; +import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; + +/** + * Internal dependencies + */ +import { store as editSiteStore } from '../../store'; +import { STORE_NAME } from '../../store/constants'; +import { SIDEBAR_BLOCK } from '../sidebar/constants'; + +export default function BlockInspectorButton( { onClick = () => {} } ) { + const { shortcut, isBlockInspectorOpen } = useSelect( + ( select ) => ( { + shortcut: select( + keyboardShortcutsStore + ).getShortcutRepresentation( + 'core/edit-site/toggle-block-settings-sidebar' + ), + isBlockInspectorOpen: + select( interfaceStore ).getActiveComplementaryArea( + editSiteStore.name + ) === SIDEBAR_BLOCK, + } ), + [] + ); + const { enableComplementaryArea, disableComplementaryArea } = useDispatch( + interfaceStore + ); + + const label = isBlockInspectorOpen + ? __( 'Hide more settings' ) + : __( 'Show more settings' ); + + return ( + { + if ( isBlockInspectorOpen ) { + disableComplementaryArea( STORE_NAME ); + speak( __( 'Block settings closed' ) ); + } else { + enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK ); + speak( + __( + 'Additional settings are now available in the Editor block settings sidebar' + ) + ); + } + // Close dropdown menu. + onClick(); + } } + shortcut={ shortcut } + > + { label } + + ); +} diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index 10887d31275903..b195e7ea562714 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -11,6 +11,7 @@ import { BlockInspector, WritingFlow, BlockList, + __experimentalBlockSettingsMenuFirstItem, __experimentalUseResizeCanvas as useResizeCanvas, __unstableUseBlockSelectionClearer as useBlockSelectionClearer, __unstableUseTypingObserver as useTypingObserver, @@ -28,6 +29,7 @@ import TemplatePartConverter from '../template-part-converter'; import NavigateToLink from '../navigate-to-link'; import { SidebarInspectorFill } from '../sidebar'; import { store as editSiteStore } from '../../store'; +import BlockInspectorButton from './block-inspector-button'; export default function BlockEditor( { setIsInserterOpen } ) { const { settings, templateType, page, deviceType } = useSelect( @@ -112,6 +114,11 @@ export default function BlockEditor( { setIsInserterOpen } ) { /> + <__experimentalBlockSettingsMenuFirstItem> + { ( { onClose } ) => ( + + ) } + ); diff --git a/packages/edit-site/src/components/keyboard-shortcuts/index.js b/packages/edit-site/src/components/keyboard-shortcuts/index.js index 7c39e40d0eda08..a248b0b3337ef3 100644 --- a/packages/edit-site/src/components/keyboard-shortcuts/index.js +++ b/packages/edit-site/src/components/keyboard-shortcuts/index.js @@ -9,18 +9,31 @@ import { import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { store as coreStore } from '@wordpress/core-data'; +import { store as interfaceStore } from '@wordpress/interface'; /** * Internal dependencies */ import { store as editSiteStore } from '../../store'; +import { SIDEBAR_BLOCK } from '../sidebar/constants'; +import { STORE_NAME } from '../../store/constants'; function KeyboardShortcuts() { const isListViewOpen = useSelect( ( select ) => select( editSiteStore ).isListViewOpened() ); + const isBlockInspectorOpen = useSelect( + ( select ) => + select( interfaceStore ).getActiveComplementaryArea( + editSiteStore.name + ) === SIDEBAR_BLOCK, + [] + ); const { redo, undo } = useDispatch( coreStore ); const { setIsListViewOpened } = useDispatch( editSiteStore ); + const { enableComplementaryArea, disableComplementaryArea } = useDispatch( + interfaceStore + ); useShortcut( 'core/edit-site/undo', @@ -48,6 +61,22 @@ function KeyboardShortcuts() { { bindGlobal: true } ); + useShortcut( + 'core/edit-site/toggle-block-settings-sidebar', + ( event ) => { + // This shortcut has no known clashes, but use preventDefault to prevent any + // obscure shortcuts from triggering. + event.preventDefault(); + + if ( isBlockInspectorOpen ) { + disableComplementaryArea( STORE_NAME ); + } else { + enableComplementaryArea( STORE_NAME, SIDEBAR_BLOCK ); + } + }, + { bindGlobal: true } + ); + return null; } function KeyboardShortcutsRegister() { @@ -83,6 +112,16 @@ function KeyboardShortcutsRegister() { character: 'o', }, } ); + + registerShortcut( { + name: 'core/edit-site/toggle-block-settings-sidebar', + category: 'global', + description: __( 'Show or hide the block settings sidebar.' ), + keyCombination: { + modifier: 'primaryShift', + character: ',', + }, + } ); }, [ registerShortcut ] ); return null;