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 (
+
+ );
+}
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;