-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Abstract keyboard shorcuts for heading to paragraph transform and vic…
…e-versa (#60606) * Abstract keyboard shorcuts for heading to paragraph transform and vice-versa. * Add alias to transform heading to paragraph for consistency with classic editor. * Move code to block-library. * Make BlockKeyboardShortcuts private. * Adjust after rebase. Co-authored-by: afercia <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: ellatrix <[email protected]>
- Loading branch information
4 people
authored
Apr 22, 2024
1 parent
857cc26
commit f5c5b04
Showing
17 changed files
with
162 additions
and
300 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
96 changes: 96 additions & 0 deletions
96
packages/block-library/src/block-keyboard-shortcuts/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| /** | ||
| * 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'; | ||
| import { store as blockEditorStore } from '@wordpress/block-editor'; | ||
|
|
||
| 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', | ||
| }, | ||
| 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 }`, | ||
| }, | ||
| } ); | ||
| } ); | ||
| }, [] ); | ||
|
|
||
| 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { default as BlockKeyboardShortcuts } from './block-keyboard-shortcuts'; | ||
| import { lock } from './lock-unlock'; | ||
|
|
||
| /** | ||
| * @private | ||
| */ | ||
| export const privateApis = {}; | ||
| lock( privateApis, { | ||
| BlockKeyboardShortcuts, | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
f5c5b04There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Flaky tests detected in f5c5b04.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8782688616
📝 Reported issues:
/test/e2e/specs/site-editor/site-editor-url-navigation.spec.js