Skip to content

Commit

Permalink
Apply keyboard shortcut conversions between paragraphs and headings t…
Browse files Browse the repository at this point in the history 
…o all editor instances (#47972)

* Apply keyboard shortcut conversions between paragraphs and headings to all editor instances

* Try to fix e2e tests

* Try to fix e2e tests

* Add comment

* Remove unnecessary files

* Use toMatchObject instead of toBe

* Temporarily apply #48093 changes

* Fix test
  • Loading branch information
@t-hamano
t-hamano authored Feb 21, 2023
1 parent 73711ad commit 8b024a5
Show file tree
Hide file tree
Showing 8 changed files with 351 additions and 13 deletions.
10 changes: 10 additions & 0 deletions packages/customize-widgets/src/components/keyboard-shortcut-help-modal/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.'
),
},
];
73 changes: 72 additions & 1 deletion packages/customize-widgets/src/components/keyboard-shortcuts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,44 @@ import {
store as keyboardShortcutsStore,
} from '@wordpress/keyboard-shortcuts';
import { isAppleOS } from '@wordpress/keycodes';
import { useDispatch } from '@wordpress/data';
import { useDispatch, useSelect } 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();
Expand All @@ -26,6 +60,21 @@ 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;
}

Expand Down Expand Up @@ -77,6 +126,28 @@ 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' );
Expand Down
24 changes: 13 additions & 11 deletions packages/edit-post/src/components/keyboard-shortcuts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,15 +70,18 @@ function KeyboardShortcuts() {
if ( blockName !== 'core/paragraph' && blockName !== 'core/heading' ) {
return;
}
const currentAttributes = getBlockAttributes( currentClientId );
const { content: currentContent, align: currentAlign } =
currentAttributes;
const attributes = getBlockAttributes( currentClientId );
const textAlign =
blockName === 'core/paragraph' ? 'align' : 'textAlign';
const destinationTextAlign =
destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';

replaceBlocks(
currentClientId,
createBlock( destinationBlockName, {
level,
content: currentContent,
align: currentAlign,
content: attributes.content,
...{ [ destinationTextAlign ]: attributes[ textAlign ] },
} )
);
};
Expand Down Expand Up @@ -181,7 +184,7 @@ function KeyboardShortcuts() {
} );

registerShortcut( {
name: `core/block-editor/transform-heading-to-paragraph`,
name: `core/edit-post/transform-heading-to-paragraph`,
category: 'block-library',
description: __( 'Transform heading to paragraph.' ),
keyCombination: {
Expand All @@ -192,7 +195,7 @@ function KeyboardShortcuts() {

[ 1, 2, 3, 4, 5, 6 ].forEach( ( level ) => {
registerShortcut( {
name: `core/block-editor/transform-paragraph-to-heading-${ level }`,
name: `core/edit-post/transform-paragraph-to-heading-${ level }`,
category: 'block-library',
description: __( 'Transform paragraph to heading.' ),
keyCombination: {
Expand Down Expand Up @@ -257,17 +260,16 @@ function KeyboardShortcuts() {
}
} );

useShortcut(
'core/block-editor/transform-heading-to-paragraph',
( event ) => handleTextLevelShortcut( event, 0 )
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/block-editor/transform-paragraph-to-heading-${ level }`,
`core/edit-post/transform-paragraph-to-heading-${ level }`,
( event ) => handleTextLevelShortcut( event, level )
);
} );
Expand Down
10 changes: 10 additions & 0 deletions packages/edit-site/src/components/keyboard-shortcut-help-modal/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.'
),
},
];
70 changes: 70 additions & 0 deletions packages/edit-site/src/components/keyboard-shortcuts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ import { isAppleOS } from '@wordpress/keycodes';
import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { store as coreStore } from '@wordpress/core-data';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { store as interfaceStore } from '@wordpress/interface';
import { createBlock } from '@wordpress/blocks';

/**
* Internal dependencies
Expand Down Expand Up @@ -41,6 +43,38 @@ function KeyboardShortcuts() {
useDispatch( interfaceStore );
const { setIsSaveViewOpened } = useDispatch( editSiteStore );

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/edit-site/save', ( event ) => {
event.preventDefault();

Expand Down Expand Up @@ -85,6 +119,20 @@ function KeyboardShortcuts() {
switchEditorMode( getEditorMode() === 'visual' ? 'text' : 'visual' );
} );

useShortcut( 'core/edit-site/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-site/transform-paragraph-to-heading-${ level }`,
( event ) => handleTextLevelShortcut( event, level )
);
} );

return null;
}

Expand Down Expand Up @@ -208,6 +256,28 @@ function KeyboardShortcutsRegister() {
character: 'm',
},
} );

registerShortcut( {
name: `core/edit-site/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-site/transform-paragraph-to-heading-${ level }`,
category: 'block-library',
description: __( 'Transform paragraph to heading.' ),
keyCombination: {
modifier: 'access',
character: `${ level }`,
},
} );
} );
}, [ registerShortcut ] );

return null;
Expand Down
10 changes: 10 additions & 0 deletions packages/edit-widgets/src/components/keyboard-shortcut-help-modal/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.'
),
},
];
Loading

1 comment on commit 8b024a5

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 8b024a5.
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/4229553484
📝 Reported issues:

Please sign in to comment.