Abstract keyboard shorcuts for heading to paragraph transform and vic…

…e-versa.
WordPress · Apr 9, 2024 · f957fdb · f957fdb
1 parent 49babf2
commit f957fdb
Show file tree

Hide file tree

Showing 12 changed files with 113 additions and 286 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -193,6 +193,10 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md>
 
+### BlockKeyboardShortcuts
+
+Undocumented declaration.
+
 ### BlockList
 
 Undocumented declaration.

diff --git a/packages/block-editor/src/components/block-keyboard-shortcuts/index.js b/packages/block-editor/src/components/block-keyboard-shortcuts/index.js
@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { __ } from '@wordpress/i18n';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+function BlockKeyboardShortcuts() {
+	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { getBlockName, getSelectedBlockClientId, getBlockAttributes } =
+		useSelect( blockEditorStore );
+
+	const handleTransformHeadingAndParagraph = ( 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 attributes = getBlockAttributes( currentClientId );
+		const textAlign =
+			blockName === 'core/paragraph' ? 'align' : 'textAlign';
+		const destinationTextAlign =
+			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+
+		replaceBlocks(
+			currentClientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: attributes.content,
+				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
+			} )
+		);
+	};
+
+	useEffect( () => {
+		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(
+		'core/block-editor/transform-heading-to-paragraph',
+		( event ) => handleTransformHeadingAndParagraph( 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 ) => handleTransformHeadingAndParagraph( event, level )
+		);
+	} );
+
+	return null;
+}
+
+export default BlockKeyboardShortcuts;
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -24,6 +24,7 @@ export {
 export { default as BlockColorsStyleSelector } from './color-style-selector';
 export { default as BlockEdit, useBlockEditContext } from './block-edit';
 export { default as BlockIcon } from './block-icon';
+export { default as BlockKeyboardShortcuts } from './block-keyboard-shortcuts';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { default as BlockStyles } from './block-styles';
 export { default as HeadingLevelDropdown } from './block-heading-level-dropdown';

diff --git a/packages/customize-widgets/src/components/keyboard-shortcuts/index.js b/packages/customize-widgets/src/components/keyboard-shortcuts/index.js
@@ -7,44 +7,10 @@ import {
 	store as keyboardShortcutsStore,
 } from '@wordpress/keyboard-shortcuts';
 import { isAppleOS } from '@wordpress/keycodes';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { createBlock } from '@wordpress/blocks';
 
 function KeyboardShortcuts( { undo, redo, save } ) {
-	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 attributes = getBlockAttributes( currentClientId );
-		const textAlign =
-			blockName === 'core/paragraph' ? 'align' : 'textAlign';
-		const destinationTextAlign =
-			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
-
-		replaceBlocks(
-			currentClientId,
-			createBlock( destinationBlockName, {
-				level,
-				content: attributes.content,
-				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
-			} )
-		);
-	};
-
 	useShortcut( 'core/customize-widgets/undo', ( event ) => {
 		undo();
 		event.preventDefault();
@@ -60,21 +26,6 @@ function KeyboardShortcuts( { undo, redo, save } ) {
 		save();
 	} );
 
-	useShortcut(
-		'core/customize-widgets/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/customize-widgets/transform-paragraph-to-heading-${ level }`,
-			( event ) => handleTextLevelShortcut( event, level )
-		);
-	} );
-
 	return null;
 }
 
@@ -126,28 +77,6 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
-		registerShortcut( {
-			name: 'core/customize-widgets/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/customize-widgets/transform-paragraph-to-heading-${ level }`,
-				category: 'block-library',
-				description: __( 'Transform paragraph to heading.' ),
-				keyCombination: {
-					modifier: 'access',
-					character: `${ level }`,
-				},
-			} );
-		} );
-
 		return () => {
 			unregisterShortcut( 'core/customize-widgets/undo' );
 			unregisterShortcut( 'core/customize-widgets/redo' );

diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/index.js b/packages/customize-widgets/src/components/sidebar-block-editor/index.js
@@ -11,6 +11,7 @@ import {
 	BlockInspector,
 	privateApis as blockEditorPrivateApis,
 	__unstableBlockSettingsMenuFirstItem,
+	BlockKeyboardShortcuts,
 } from '@wordpress/block-editor';
 import { uploadMedia } from '@wordpress/media-utils';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -99,6 +100,7 @@ export default function SidebarBlockEditor( {
 	return (
 		<>
 			<KeyboardShortcuts.Register />
+			<BlockKeyboardShortcuts />
 
 			<SidebarEditorProvider sidebar={ sidebar } settings={ settings }>
 				<KeyboardShortcuts

diff --git a/packages/edit-post/src/components/keyboard-shortcuts/index.js b/packages/edit-post/src/components/keyboard-shortcuts/index.js
@@ -9,7 +9,6 @@ import {
 } from '@wordpress/keyboard-shortcuts';
 import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -21,41 +20,7 @@ function KeyboardShortcuts() {
 	const { openGeneralSidebar, closeGeneralSidebar, toggleFeature } =
 		useDispatch( editPostStore );
 	const { registerShortcut } = useDispatch( keyboardShortcutsStore );
-	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const {
-		getBlockName,
-		getSelectedBlockClientId,
-		getBlockAttributes,
-		getBlockSelectionStart,
-	} = 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 attributes = getBlockAttributes( currentClientId );
-		const textAlign =
-			blockName === 'core/paragraph' ? 'align' : 'textAlign';
-		const destinationTextAlign =
-			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
-
-		replaceBlocks(
-			currentClientId,
-			createBlock( destinationBlockName, {
-				level,
-				content: attributes.content,
-				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
-			} )
-		);
-	};
+	const { getBlockSelectionStart } = useSelect( blockEditorStore );
 
 	useEffect( () => {
 		registerShortcut( {
@@ -123,28 +88,6 @@ function KeyboardShortcuts() {
 				character: 'h',
 			},
 		} );
-
-		registerShortcut( {
-			name: 'core/edit-post/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/edit-post/transform-paragraph-to-heading-${ level }`,
-				category: 'block-library',
-				description: __( 'Transform paragraph to heading.' ),
-				keyCombination: {
-					modifier: 'access',
-					character: `${ level }`,
-				},
-			} );
-		} );
 	}, [] );
 
 	useShortcut( 'core/edit-post/toggle-fullscreen', () => {
@@ -166,20 +109,6 @@ function KeyboardShortcuts() {
 		}
 	} );
 
-	useShortcut( 'core/edit-post/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/edit-post/transform-paragraph-to-heading-${ level }`,
-			( event ) => handleTextLevelShortcut( event, level )
-		);
-	} );
-
 	return null;
 }
 

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -23,6 +23,7 @@ import {
 	BlockToolbar,
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
+	BlockKeyboardShortcuts,
 } from '@wordpress/block-editor';
 import { Button, ScrollLock } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
@@ -294,6 +295,7 @@ function Layout( { initialPost } ) {
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
 			<EditorKeyboardShortcuts />
+			<BlockKeyboardShortcuts />
 
 			<InterfaceSkeleton
 				isDistractionFree={ isDistractionFree && isWideViewport }

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -23,6 +23,7 @@ import {
 	BlockToolbar,
 	store as blockEditorStore,
 	BlockInspector,
+	BlockKeyboardShortcuts,
 } from '@wordpress/block-editor';
 import {
 	InterfaceSkeleton,
@@ -282,6 +283,7 @@ export default function Editor( { isLoading, onClick } ) {
 										<KeyboardShortcutsEditMode />
 										<EditorKeyboardShortcutsRegister />
 										<EditorKeyboardShortcuts />
+										<BlockKeyboardShortcuts />
 									</>
 								) }
 							</>