Site Editor: Add show more settings to block toolbars (#31305)

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 (
+		<MenuItem
+			onClick={ () => {
+				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 }
+		</MenuItem>
+	);
+}

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 } ) {
 						/>
 					</WritingFlow>
 				</Iframe>
+				<__experimentalBlockSettingsMenuFirstItem>
+					{ ( { onClose } ) => (
+						<BlockInspectorButton onClick={ onClose } />
+					) }
+				</__experimentalBlockSettingsMenuFirstItem>
 			</div>
 		</BlockEditorProvider>
 	);

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;