Converts paragraphs to headings with keyboard shortcuts (#44681)

* adds shortcuts for heading transforms to the paragraph block

* Implements feedback on hook location, UX and usage.

- Moves the functionality from the paragraph block to the block editor package
- Implements the shortcuts for paragraph and heading allowing cycling between them
- Refactors the code in a less repetitive shape
- Adds access+0 as a way to convert headings to paragraphs
- Implements cycling through heading levels via access+[1-6]
- Registers shortcuts only once
- Adds a new prop to RichText allowing for onKeyDown custom handlers
- Removes the keyboard-shortcuts dependency from block libary

Co-authored-by: Daniel Richards <677833+talldan@users.noreply.github.com>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Dave Smith <444434+getdave@users.noreply.github.com>

* Refactors so that setting up the text level shortcuts is handled by the post editor.

* removes the old hook

* adds the text level keyboard shortcuts to the help modal of the post editor

* Removes the hook based approach and inlines every shortcut definition and handler into edit post shortcut conf file.

Co-authored-by: Daniel Richards <677833+talldan@users.noreply.github.com>

* updated snapshot for keyboard help modal

* Refactores the shortcut handler to be a bit quicker returning early for multiselection and avoiding an extra state select.

Co-authored-by: Daniel Richards <677833+talldan@users.noreply.github.com>

Co-authored-by: Daniel Richards <677833+talldan@users.noreply.github.com>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Dave Smith <444434+getdave@users.noreply.github.com>

packages/edit-post/src/components/keyboard-shortcut-help-modal/config.js

@@ -36,4 +36,14 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'x' },
 		description: __( 'Make the selected text inline code.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: '0' },
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
 ];

packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap

@@ -821,6 +821,76 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             </kbd>
           </div>
         </li>
+        <li
+          class="edit-post-keyboard-shortcut-help-modal__shortcut"
+        >
+          <div
+            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
+          >
+            Convert the current heading to a paragraph.
+          </div>
+          <div
+            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
+          >
+            <kbd
+              aria-label="Shift + Alt + 0"
+              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
+            >
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                Shift
+              </kbd>
+              +
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                Alt
+              </kbd>
+              +
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                0
+              </kbd>
+            </kbd>
+          </div>
+        </li>
+        <li
+          class="edit-post-keyboard-shortcut-help-modal__shortcut"
+        >
+          <div
+            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
+          >
+            Convert the current paragraph or heading to a heading of level 1 to 6.
+          </div>
+          <div
+            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
+          >
+            <kbd
+              aria-label="Shift + Alt + 1 6"
+              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
+            >
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                Shift
+              </kbd>
+              +
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                Alt
+              </kbd>
+              +
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                1-6
+              </kbd>
+            </kbd>
+          </div>
+        </li>
       </ul>
     </section>
   </div>

packages/edit-post/src/components/keyboard-shortcuts/index.js

@@ -12,6 +12,7 @@ import { store as editorStore } from '@wordpress/editor';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -53,6 +54,35 @@ function KeyboardShortcuts() {
 		closeGeneralSidebar();
 	};
 
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const handleTextLevelShortcut = ( event, level ) => {
+		event.preventDefault();
+		const destinationBlockName =
+			level === 0 ? 'core/paragraph' : 'core/heading';
+		const currentClientId = getSelectedBlockClientId();
+		if ( currentClientId === null ) {
+			return;
+		}
+		const blockName = getBlockName( currentClientId );
+		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
+			return;
+		}
+		const currentAttributes = getBlockAttributes( currentClientId );
+		const { content: currentContent, align: currentAlign } =
+			currentAttributes;
+		replaceBlocks(
+			currentClientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: currentContent,
+				align: currentAlign,
+			} )
+		);
+	};
+
 	useEffect( () => {
 		registerShortcut( {
 			name: 'core/edit-post/toggle-mode',
@@ -149,6 +179,28 @@ function KeyboardShortcuts() {
 				character: 'h',
 			},
 		} );
+
+		registerShortcut( {
+			name: `core/block-editor/transform-heading-to-paragraph`,
+			category: 'block-library',
+			description: __( 'Transform heading to paragraph.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: `0`,
+			},
+		} );
+
+		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+			registerShortcut( {
+				name: `core/block-editor/transform-paragraph-to-heading-${ level }`,
+				category: 'block-library',
+				description: __( 'Transform paragraph to heading.' ),
+				keyCombination: {
+					modifier: 'access',
+					character: `${ level }`,
+				},
+			} );
+		} );
 	}, [] );
 
 	useShortcut(
@@ -202,6 +254,21 @@ function KeyboardShortcuts() {
 		setIsListViewOpened( ! isListViewOpened() )
 	);
 
+	useShortcut(
+		'core/block-editor/transform-heading-to-paragraph',
+		( event ) => handleTextLevelShortcut( event, 0 )
+	);
+
+	[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+		//the loop is based off on a constant therefore
+		//the hook will execute the same way every time
+		//eslint-disable-next-line react-hooks/rules-of-hooks
+		useShortcut(
+			`core/block-editor/transform-paragraph-to-heading-${ level }`,
+			( event ) => handleTextLevelShortcut( event, level )
+		);
+	} );
+
 	return null;
 }
 

packages/keycodes/src/index.js

@@ -237,7 +237,7 @@ export const displayShortcutList = mapValues( modifiers, ( modifier ) => {
 		// so override the rule to allow symbols used for shortcuts.
 		// see: https://github.com/blakeembrey/change-case#options
 		const capitalizedCharacter = capitalCase( character, {
-			stripRegexp: /[^A-Z0-9`,\.\\]/gi,
+			stripRegexp: /[^A-Z0-9`,\.\\\-]/gi,
 		} );
 
 		return [ ...modifierKeys, capitalizedCharacter ];