Move shortcuts code to BlockTools.

WordPress · Apr 10, 2024 · adc45ec · adc45ec
1 parent 679554c
commit adc45ec
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 118 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -193,10 +193,6 @@ _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
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -6,6 +6,7 @@ import { isTextField } from '@wordpress/dom';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -64,8 +65,12 @@ export default function BlockTools( {
 		[]
 	);
 	const isMatch = useShortcutEventMatch();
-	const { getSelectedBlockClientIds, getBlockRootClientId } =
-		useSelect( blockEditorStore );
+	const {
+		getSelectedBlockClientIds,
+		getBlockRootClientId,
+		getBlockName,
+		getBlockAttributes,
+	} = useSelect( blockEditorStore );
 
 	const {
 		showEmptyBlockSideInserter,
@@ -82,8 +87,37 @@ export default function BlockTools( {
 		moveBlocksUp,
 		moveBlocksDown,
 		expandBlock,
+		replaceBlocks,
 	} = unlock( useDispatch( blockEditorStore ) );
 
+	const handleTransformHeadingAndParagraph = ( event, level ) => {
+		event.preventDefault();
+		const destinationBlockName =
+			level === 0 ? 'core/paragraph' : 'core/heading';
+
+		if ( clientId === null ) {
+			return;
+		}
+		const blockName = getBlockName( clientId );
+		if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
+			return;
+		}
+		const attributes = getBlockAttributes( clientId );
+		const textAlign =
+			blockName === 'core/paragraph' ? 'align' : 'textAlign';
+		const destinationTextAlign =
+			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+
+		replaceBlocks(
+			clientId,
+			createBlock( destinationBlockName, {
+				level,
+				content: attributes.content,
+				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
+			} )
+		);
+	};
+
 	function onKeyDown( event ) {
 		if ( event.defaultPrevented ) return;
 
@@ -157,7 +191,22 @@ export default function BlockTools( {
 			}
 			event.preventDefault();
 			expandBlock( clientId );
+		} else if (
+			isMatch( 'core/block-editor/transform-heading-to-paragraph', event )
+		) {
+			handleTransformHeadingAndParagraph( event, 0 );
 		}
+
+		[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
+			if (
+				isMatch(
+					`core/block-editor/transform-paragraph-to-heading-${ level }`,
+					event
+				)
+			) {
+				handleTransformHeadingAndParagraph( event, level );
+			}
+		} );
 	}
 
 	const blockToolbarRef = usePopoverScroll( __unstableContentRef );

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -24,7 +24,6 @@ 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/block-editor/src/components/keyboard-shortcuts/index.js b/packages/block-editor/src/components/keyboard-shortcuts/index.js
@@ -143,6 +143,34 @@ function KeyboardShortcutsRegister() {
 				character: 'l',
 			},
 		} );
+
+		registerShortcut( {
+			name: 'core/block-editor/transform-heading-to-paragraph',
+			category: 'block-library',
+			description: __( 'Transform heading to paragraph.' ),
+			keyCombination: {
+				modifier: 'access',
+				character: '0',
+			},
+			aliases: [
+				{
+					modifier: 'access',
+					character: '7',
+				},
+			],
+		} );
+
+		[ 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 }`,
+				},
+			} );
+		} );
 	}, [ registerShortcut ] );
 
 	return null;

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,7 +11,6 @@ import {
 	BlockInspector,
 	privateApis as blockEditorPrivateApis,
 	__unstableBlockSettingsMenuFirstItem,
-	BlockKeyboardShortcuts,
 } from '@wordpress/block-editor';
 import { uploadMedia } from '@wordpress/media-utils';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -100,7 +99,6 @@ export default function SidebarBlockEditor( {
 	return (
 		<>
 			<KeyboardShortcuts.Register />
-			<BlockKeyboardShortcuts />
 
 			<SidebarEditorProvider sidebar={ sidebar } settings={ settings }>
 				<KeyboardShortcuts

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -23,7 +23,6 @@ import {
 	BlockToolbar,
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
-	BlockKeyboardShortcuts,
 } from '@wordpress/block-editor';
 import { Button, ScrollLock } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
@@ -295,7 +294,6 @@ 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,7 +23,6 @@ import {
 	BlockToolbar,
 	store as blockEditorStore,
 	BlockInspector,
-	BlockKeyboardShortcuts,
 } from '@wordpress/block-editor';
 import {
 	InterfaceSkeleton,
@@ -283,7 +282,6 @@ export default function Editor( { isLoading, onClick } ) {
 										<KeyboardShortcutsEditMode />
 										<EditorKeyboardShortcutsRegister />
 										<EditorKeyboardShortcuts />
-										<BlockKeyboardShortcuts />
 									</>
 								) }
 							</>

diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
@@ -11,10 +11,7 @@ import {
 	useResourcePermissions,
 } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
-import {
-	privateApis as blockEditorPrivateApis,
-	BlockKeyboardShortcuts,
-} from '@wordpress/block-editor';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -114,7 +111,6 @@ export default function WidgetAreasBlockEditorProvider( {
 	return (
 		<SlotFillProvider>
 			<KeyboardShortcuts.Register />
-			<BlockKeyboardShortcuts />
 			<ExperimentalBlockEditorProvider
 				value={ blocks }
 				onInput={ onInput }