Experiment - try adding a shortcut for hiding the block toolbar and outline

packages/block-editor/src/components/block-list/content.scss

@@ -86,7 +86,7 @@
 	}
 
 	// Block focus.
-	.block-editor-block-list__block:not([contenteditable]):focus {
+	.block-editor-block-list__block:not([contenteditable]):not(.hide-block-border):focus {
 		outline: none;
 
 		// We're using a pseudo element to overflow placeholder borders
@@ -266,7 +266,7 @@
 	}
 }
 
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline):not(.hide-block-border) {
 	&.is-hovered {
 		cursor: default;
 

packages/block-editor/src/components/block-list/use-block-props/use-block-class-names.js

@@ -13,6 +13,7 @@ import { isReusableBlock, getBlockType } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 /**
  * Returns the class names used for the different states of the block.
@@ -26,6 +27,7 @@ export function useBlockClassNames( clientId ) {
 		( select ) => {
 			const {
 				isBlockBeingDragged,
+				isBlockInterfaceHidden,
 				isBlockHighlighted,
 				isBlockSelected,
 				isBlockMultiSelected,
@@ -35,7 +37,7 @@ export function useBlockClassNames( clientId ) {
 				isTyping,
 				__unstableIsFullySelected,
 				__unstableSelectionHasUnmergeableBlock,
-			} = select( blockEditorStore );
+			} = unlock( select( blockEditorStore ) );
 			const { outlineMode } = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
 			const isSelected = isBlockSelected( clientId );
@@ -47,6 +49,7 @@ export function useBlockClassNames( clientId ) {
 				checkDeep
 			);
 			const isMultiSelected = isBlockMultiSelected( clientId );
+
 			return classnames( {
 				'is-selected': isSelected,
 				'is-highlighted': isBlockHighlighted( clientId ),
@@ -59,6 +62,7 @@ export function useBlockClassNames( clientId ) {
 				'is-dragging': isDragging,
 				'has-child-selected': isAncestorOfSelectedBlock,
 				'remove-outline': isSelected && outlineMode && isTyping(),
+				'hide-block-border': isBlockInterfaceHidden(),
 			} );
 		},
 		[ clientId ]

packages/block-editor/src/hooks/dimensions.js

@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { useState, useEffect, useCallback } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
+import { usePrevious } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 
 /**
@@ -28,16 +29,18 @@ export const AXIAL_SIDES = [ 'vertical', 'horizontal' ];
 
 function useVisualizer() {
 	const [ property, setProperty ] = useState( false );
+	const previousProperty = usePrevious( property );
 	const { hideBlockInterface, showBlockInterface } = unlock(
 		useDispatch( blockEditorStore )
 	);
 	useEffect( () => {
-		if ( ! property ) {
+		if ( ! property && previousProperty ) {
 			showBlockInterface();
-		} else {
+		}
+		if ( property && ! previousProperty ) {
 			hideBlockInterface();
 		}
-	}, [ property, showBlockInterface, hideBlockInterface ] );
+	}, [ property, previousProperty, showBlockInterface, hideBlockInterface ] );
 
 	return [ property, setProperty ];
 }

packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js

@@ -14,6 +14,10 @@ import { createBlock } from '@wordpress/blocks';
 import { store as editSiteStore } from '../../store';
 import { SIDEBAR_BLOCK } from '../sidebar-edit-mode/constants';
 import { STORE_NAME } from '../../store/constants';
+/**
+ * External dependencies
+ */
+import { unlock } from '../../private-apis';
 
 function KeyboardShortcutsEditMode() {
 	const { getEditorMode } = useSelect( editSiteStore );
@@ -34,7 +38,9 @@ function KeyboardShortcutsEditMode() {
 	const { enableComplementaryArea, disableComplementaryArea } =
 		useDispatch( interfaceStore );
 
-	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { hideBlockInterface, showBlockInterface, replaceBlocks } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
 		useSelect( blockEditorStore );
 
@@ -92,6 +98,33 @@ function KeyboardShortcutsEditMode() {
 		}
 	} );
 
+	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 );
+		}
+	} );
+
+	useShortcut(
+		'core/edit-site/peek',
+		( event ) => {
+			if ( event.target.closest( '.block-editor-block-toolbar' ) ) {
+				return;
+			}
+			hideBlockInterface();
+		},
+		{
+			onKeyUp() {
+				showBlockInterface();
+			},
+		}
+	);
+
 	useShortcut( 'core/edit-site/toggle-mode', () => {
 		switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
 	} );

packages/edit-site/src/components/keyboard-shortcuts/register.js

@@ -73,6 +73,17 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
+		registerShortcut( {
+			name: 'core/edit-site/peek',
+			category: 'global',
+			description: __(
+				'Hold to hide the block toolbar and see blocks more clearly.'
+			),
+			keyCombination: {
+				modifier: 'alt',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/edit-site/keyboard-shortcuts',
 			category: 'main',

packages/keyboard-shortcuts/README.md

@@ -49,7 +49,8 @@ _Parameters_
 -   _name_ `string`: Shortcut name.
 -   _callback_ `Function`: Shortcut callback.
 -   _options_ `Object`: Shortcut options.
--   _options.isDisabled_ `boolean`: Whether to disable to shortut.
+-   _options.isDisabled_ `boolean`: Whether to disable to shortcut.
+-   _options.onKeyUp_ `Function`: An event handler triggered when the shortcut key is released.
 
 <!-- END TOKEN(Autogenerated API docs) -->
 

packages/keyboard-shortcuts/src/components/shortcut-provider.js

@@ -24,14 +24,22 @@ export function ShortcutProvider( props ) {
 		if ( props.onKeyDown ) props.onKeyDown( event );
 
 		for ( const keyboardShortcut of keyboardShortcuts.current ) {
-			keyboardShortcut( event );
+			keyboardShortcut.onKeyDown( event );
+		}
+	}
+
+	function onKeyUp( event ) {
+		if ( props.onKeyUp ) props.onKeyUp( event );
+
+		for ( const keyboardShortcut of keyboardShortcuts.current ) {
+			keyboardShortcut.onKeyUp( event );
 		}
 	}
 
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<Provider value={ keyboardShortcuts }>
-			<div { ...props } onKeyDown={ onKeyDown } />
+			<div { ...props } onKeyDown={ onKeyDown } onKeyUp={ onKeyUp } />
 		</Provider>
 	);
 	/* eslint-enable jsx-a11y/no-static-element-interactions */

packages/keyboard-shortcuts/src/hooks/use-shortcut.js

@@ -15,28 +15,45 @@ import { context } from '../context';
  * @param {string}   name               Shortcut name.
  * @param {Function} callback           Shortcut callback.
  * @param {Object}   options            Shortcut options.
- * @param {boolean}  options.isDisabled Whether to disable to shortut.
+ * @param {boolean}  options.isDisabled Whether to disable to shortcut.
+ * @param {Function} options.onKeyUp    An event handler triggered when the shortcut key is released.
  */
-export default function useShortcut( name, callback, { isDisabled } = {} ) {
+export default function useShortcut(
+	name,
+	callback,
+	{ isDisabled, onKeyUp } = {}
+) {
 	const shortcuts = useContext( context );
 	const isMatch = useShortcutEventMatch();
-	const callbackRef = useRef();
-	callbackRef.current = callback;
+	const shortcutWasDown = useRef();
+	const onKeyDownRef = useRef();
+	const onKeyUpRef = useRef();
+	onKeyDownRef.current = callback;
+	onKeyUpRef.current = onKeyUp;
 
 	useEffect( () => {
 		if ( isDisabled ) {
 			return;
 		}
 
-		function _callback( event ) {
-			if ( isMatch( name, event ) ) {
-				callbackRef.current( event );
-			}
-		}
+		const shortcut = {
+			onKeyDown( event ) {
+				if ( isMatch( name, event ) ) {
+					shortcutWasDown.current = name;
+					onKeyDownRef.current( event );
+				}
+			},
+			onKeyUp( event ) {
+				if ( onKeyUpRef.current && shortcutWasDown.current === name ) {
+					onKeyUpRef.current( event );
+				}
+				shortcutWasDown.current = undefined;
+			},
+		};
 
-		shortcuts.current.add( _callback );
+		shortcuts.current.add( shortcut );
 		return () => {
-			shortcuts.current.delete( _callback );
+			shortcuts.current.delete( shortcut );
 		};
 	}, [ name, isDisabled ] );
 }

packages/keycodes/src/index.js

@@ -260,6 +260,10 @@ export const displayShortcutList = mapValues(
 				/** @type {string[]} */ ( [] )
 			);
 
+			if ( ! character ) {
+				return modifierKeys;
+			}
+
 			// Symbols (~`,.) are removed by the default regular expression,
 			// so override the rule to allow symbols used for shortcuts.
 			// see: https://github.com/blakeembrey/change-case#options
@@ -333,7 +337,11 @@ export const shortcutAriaLabel = mapValues(
 				'~': __( 'Tilde' ),
 			};
 
-			return [ ...modifier( _isApple ), character ]
+			const shortcutChars = character
+				? [ ...modifier( _isApple ), character ]
+				: modifier( _isApple );
+
+			return shortcutChars
 				.map( ( key ) =>
 					capitalCase( replacementKeyMap[ key ] ?? key )
 				)