Skip to content

Commit

Permalink
Add new Insert Before/After menu items and shortcuts (#8909)
Browse files Browse the repository at this point in the history 
Adds the following keyboard shortcuts for those actions:

Option+Cmd+T (Mac) / Ctrl+Alt+T - Insert Before
Option+Cmd+Y (Mac) / Ctrl+Alt+Y - Insert After

Changes:
* Add basic insert before and insert after buttons to block settings menu

* Add keyboard shortcuts for insert before and insert after

* Change insert before/after shortcuts to meta+alt+t and meta+alt+y

* Add comment explaining use of preventDefault

* Add insert before/after shortcuts to keyboard help

* Do not show Insert Before/After menu items when a block is template locked

* Disallow block settings actions that can be triggered through shortcuts and should not be possible when template locking is active

* Tidy up comments

  - Add full-stops
  - Remove comment that no longer seems relevant (component is not a DropDown)
  • Loading branch information
@talldan
talldan authored Aug 15, 2018
1 parent 1759c92 commit a6ae71e
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 13 deletions.
18 changes: 13 additions & 5 deletions edit-post/components/keyboard-shortcut-help-modal/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ import { displayShortcutList } from '@wordpress/keycodes';
import { __ } from '@wordpress/i18n';

const {
// Cmd+<key> on a mac, Ctrl+<key> elsewhere
// Cmd+<key> on a mac, Ctrl+<key> elsewhere.
primary,
// Shift+Cmd+<key> on a mac, Ctrl+Shift+<key> elsewhere
// Shift+Cmd+<key> on a mac, Ctrl+Shift+<key> elsewhere.
primaryShift,
// Alt+Cmd+<key> on a mac, Ctrl+Alt+<key> elsewhere
// Option+Cmd+<key> on a mac, Ctrl+Alt+<key> elsewhere.
primaryAlt,
// Shift+Alt+Cmd+<key> on a mac, Ctrl+Shift+Akt+<key> elsewhere
// Shift+Alt+Cmd+<key> on a mac, Ctrl+Shift+Akt+<key> elsewhere.
secondary,
// Ctrl+Alt+<key> on a mac, Shift+Alt+<key> elsewhere
// Ctrl+Alt+<key> on a mac, Shift+Alt+<key> elsewhere.
access,
ctrl,
ctrlShift,
Expand Down Expand Up @@ -91,6 +91,14 @@ const blockShortcuts = {
keyCombination: primaryAlt( 'backspace' ),
description: __( 'Remove the selected block(s).' ),
},
{
keyCombination: primaryAlt( 't' ),
description: __( 'Insert a new block before the selected block(s).' ),
},
{
keyCombination: primaryAlt( 'y' ),
description: __( 'Insert a new block after the selected block(s).' ),
},
{
keyCombination: '/',
description: __( `Change the block type after adding a new paragraph.` ),
Expand Down
20 changes: 20 additions & 0 deletions edit-post/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,26 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
"Backspace",
],
},
Object {
"description": "Insert a new block before the selected block(s).",
"keyCombination": Array [
"Ctrl",
"+",
"Alt",
"+",
"T",
],
},
Object {
"description": "Insert a new block after the selected block(s).",
"keyCombination": Array [
"Ctrl",
"+",
"Alt",
"+",
"Y",
],
},
Object {
"description": "Change the block type after adding a new paragraph.",
"keyCombination": "/",
Expand Down
81 changes: 73 additions & 8 deletions packages/editor/src/components/block-settings-menu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { castArray, first, last, every, flow } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { Component, Fragment } from '@wordpress/element';
import { IconButton, Dropdown, NavigableMenu, MenuItem, KeyboardShortcuts } from '@wordpress/components';
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
Expand Down Expand Up @@ -40,6 +40,14 @@ const shortcuts = {
raw: rawShortcut.primaryAlt( 'backspace' ),
display: displayShortcut.primaryAlt( 'bksp' ),
},
insertBefore: {
raw: rawShortcut.primaryAlt( 't' ),
display: displayShortcut.primaryAlt( 't' ),
},
insertAfter: {
raw: rawShortcut.primaryAlt( 'y' ),
display: displayShortcut.primaryAlt( 'y' ),
},
};

export class BlockSettingsMenu extends Component {
Expand Down Expand Up @@ -72,6 +80,8 @@ export class BlockSettingsMenu extends Component {
isHidden,
onDuplicate,
onRemove,
onInsertBefore,
onInsertAfter,
canDuplicate,
isLocked,
} = this.props;
Expand All @@ -90,8 +100,15 @@ export class BlockSettingsMenu extends Component {
[ shortcuts.duplicate.raw ]: flow( preventDefault, onDuplicate ),

// Does not clash with any known browser/native shortcuts, but preventDefault
// is used to prevent any obscure unknown shortcuts from triggering
// is used to prevent any obscure unknown shortcuts from triggering.
[ shortcuts.removeBlock.raw ]: flow( preventDefault, onRemove ),

// Prevent 'view recently closed tabs' in Opera using preventDefault.
[ shortcuts.insertBefore.raw ]: flow( preventDefault, onInsertBefore ),

// Does not clash with any known browser/native shortcuts, but preventDefault
// is used to prevent any obscure unknown shortcuts from triggering.
[ shortcuts.insertAfter.raw ]: flow( preventDefault, onInsertAfter ),
} }
/>
<Dropdown
Expand Down Expand Up @@ -123,7 +140,6 @@ export class BlockSettingsMenu extends Component {
);
} }
renderContent={ ( { onClose } ) => (
// Should this just use a DropdownMenu instead of a DropDown ?
<NavigableMenu className="editor-block-settings-menu__content">
<_BlockSettingsMenuFirstItem.Slot fillProps={ { onClose } } />
{ count === 1 && (
Expand All @@ -146,6 +162,26 @@ export class BlockSettingsMenu extends Component {
{ __( 'Duplicate' ) }
</MenuItem>
) }
{ ! isLocked && (
<Fragment>
<MenuItem
className="editor-block-settings-menu__control"
onClick={ onInsertBefore }
icon="insert-before"
shortcut={ shortcuts.insertBefore.display }
>
{ __( 'Insert Before' ) }
</MenuItem>
<MenuItem
className="editor-block-settings-menu__control"
onClick={ onInsertAfter }
icon="insert-after"
shortcut={ shortcuts.insertAfter.display }
>
{ __( 'Insert After' ) }
</MenuItem>
</Fragment>
) }
{ count === 1 && (
<BlockModeToggle
clientId={ firstBlockClientId }
Expand Down Expand Up @@ -199,15 +235,32 @@ export default compose( [
} );

return {
index: getBlockIndex( last( castArray( clientIds ) ), rootClientId ),
firstSelectedIndex: getBlockIndex( first( castArray( clientIds ) ), rootClientId ),
lastSelectedIndex: getBlockIndex( last( castArray( clientIds ) ), rootClientId ),
isLocked: !! getTemplateLock( rootClientId ),
blocks,
canDuplicate,
shortcuts,
};
} ),
withDispatch( ( dispatch, { clientIds, rootClientId, blocks, index, isLocked, canDuplicate } ) => {
const { insertBlocks, multiSelect, removeBlocks, selectBlock } = dispatch( 'core/editor' );
withDispatch( ( dispatch, props ) => {
const {
clientIds,
rootClientId,
blocks,
firstSelectedIndex,
lastSelectedIndex,
isLocked,
canDuplicate,
} = props;

const {
insertBlocks,
multiSelect,
removeBlocks,
selectBlock,
insertDefaultBlock,
} = dispatch( 'core/editor' );

return {
onDuplicate() {
Expand All @@ -218,7 +271,7 @@ export default compose( [
const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
insertBlocks(
clonedBlocks,
index + 1,
lastSelectedIndex + 1,
rootClientId
);
if ( clonedBlocks.length > 1 ) {
Expand All @@ -229,7 +282,19 @@ export default compose( [
}
},
onRemove() {
removeBlocks( clientIds );
if ( ! isLocked ) {
removeBlocks( clientIds );
}
},
onInsertBefore() {
if ( ! isLocked ) {
insertDefaultBlock( {}, rootClientId, firstSelectedIndex );
}
},
onInsertAfter() {
if ( ! isLocked ) {
insertDefaultBlock( {}, rootClientId, lastSelectedIndex + 1 );
}
},
onSelect( clientId ) {
selectBlock( clientId );
Expand Down

0 comments on commit a6ae71e

Please sign in to comment.