Skip to content

Commit

Permalink
Add block-specific commands as contextual suggestions [#53539] (#53974)
Browse files Browse the repository at this point in the history 
* Add new command palette context for block selection

* Take advantage of useCommand in edit-post like edit-site

* Apply new context to blockActions commands

* Remove duplicate useCommands call.

* reorder block commands

* Split contextual commands into a "QuickActions" hook.
  • Loading branch information
@jrtashjian
jrtashjian authored Oct 13, 2023
1 parent e21581b commit a54da2d
Show file tree
Hide file tree
Showing 4 changed files with 122 additions and 55 deletions.
137 changes: 91 additions & 46 deletions packages/block-editor/src/components/use-block-commands/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,60 @@ export const useTransformCommands = () => {
};

const useActionsCommands = () => {
const { clientIds } = useSelect( ( select ) => {
const { getSelectedBlockClientIds } = select( blockEditorStore );
const selectedBlockClientIds = getSelectedBlockClientIds();

return {
clientIds: selectedBlockClientIds,
};
}, [] );

const { getBlockRootClientId, canMoveBlocks, getBlockCount } =
useSelect( blockEditorStore );

const { setBlockMovingClientId, setNavigationMode, selectBlock } =
useDispatch( blockEditorStore );

if ( ! clientIds || clientIds.length < 1 ) {
return { isLoading: false, commands: [] };
}

const rootClientId = getBlockRootClientId( clientIds[ 0 ] );

const canMove =
canMoveBlocks( clientIds, rootClientId ) &&
getBlockCount( rootClientId ) !== 1;

const commands = [];

if ( canMove ) {
commands.push( {
name: 'move-to',
label: __( 'Move to' ),
callback: () => {
setNavigationMode( true );
selectBlock( clientIds[ 0 ] );
setBlockMovingClientId( clientIds[ 0 ] );
},
icon: move,
} );
}

return {
isLoading: false,
commands: commands.map( ( command ) => ( {
...command,
name: 'core/block-editor/action-' + command.name,
callback: ( { close } ) => {
command.callback();
close();
},
} ) ),
};
};

const useQuickActionsCommands = () => {
const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => {
const {
getSelectedBlockClientIds,
Expand All @@ -130,9 +184,7 @@ const useActionsCommands = () => {
canInsertBlockType,
getBlockRootClientId,
getBlocksByClientId,
canMoveBlocks,
canRemoveBlocks,
getBlockCount,
} = useSelect( blockEditorStore );
const { getDefaultBlockName, getGroupingBlockName } =
useSelect( blocksStore );
Expand All @@ -145,9 +197,6 @@ const useActionsCommands = () => {
duplicateBlocks,
insertAfterBlock,
insertBeforeBlock,
setBlockMovingClientId,
setNavigationMode,
selectBlock,
} = useDispatch( blockEditorStore );

const onGroup = () => {
Expand Down Expand Up @@ -196,65 +245,54 @@ const useActionsCommands = () => {
);
} );
const canRemove = canRemoveBlocks( clientIds, rootClientId );
const canMove =
canMoveBlocks( clientIds, rootClientId ) &&
getBlockCount( rootClientId ) !== 1;

const commands = [];

if ( canDuplicate ) {
commands.push( {
name: 'duplicate',
label: __( 'Duplicate' ),
callback: () => duplicateBlocks( clientIds, true ),
icon: copy,
} );
}

if ( canInsertDefaultBlock ) {
commands.push(
{
name: 'add-after',
label: __( 'Add after' ),
name: 'add-before',
label: __( 'Add before' ),
callback: () => {
const clientId = Array.isArray( clientIds )
? clientIds[ clientIds.length - 1 ]
? clientIds[ 0 ]
: clientId;
insertAfterBlock( clientId );
insertBeforeBlock( clientId );
},
icon: add,
},
{
name: 'add-before',
label: __( 'Add before' ),
name: 'add-after',
label: __( 'Add after' ),
callback: () => {
const clientId = Array.isArray( clientIds )
? clientIds[ 0 ]
? clientIds[ clientIds.length - 1 ]
: clientId;
insertBeforeBlock( clientId );
insertAfterBlock( clientId );
},
icon: add,
}
);
}
if ( canRemove ) {
commands.push( {
name: 'remove',
label: __( 'Delete' ),
callback: () => removeBlocks( clientIds, true ),
icon: remove,
} );
}
if ( canDuplicate ) {
commands.push( {
name: 'duplicate',
label: __( 'Duplicate' ),
callback: () => duplicateBlocks( clientIds, true ),
icon: copy,
} );
}
if ( canMove ) {

if ( isGroupable ) {
commands.push( {
name: 'move-to',
label: __( 'Move to' ),
callback: () => {
setNavigationMode( true );
selectBlock( clientIds[ 0 ] );
setBlockMovingClientId( clientIds[ 0 ] );
},
icon: move,
name: 'Group',
label: __( 'Group' ),
callback: onGroup,
icon: group,
} );
}

if ( isUngroupable ) {
commands.push( {
name: 'ungroup',
Expand All @@ -263,14 +301,16 @@ const useActionsCommands = () => {
icon: ungroup,
} );
}
if ( isGroupable ) {

if ( canRemove ) {
commands.push( {
name: 'Group',
label: __( 'Group' ),
callback: onGroup,
icon: group,
name: 'remove',
label: __( 'Delete' ),
callback: () => removeBlocks( clientIds, true ),
icon: remove,
} );
}

return {
isLoading: false,
commands: commands.map( ( command ) => ( {
Expand All @@ -293,4 +333,9 @@ export const useBlockCommands = () => {
name: 'core/block-editor/blockActions',
hook: useActionsCommands,
} );
useCommandLoader( {
name: 'core/block-editor/blockQuickActions',
hook: useQuickActionsCommands,
context: 'block-selection-edit',
} );
};
19 changes: 19 additions & 0 deletions packages/edit-post/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
useBlockCommands,
BlockBreadcrumb,
privateApis as blockEditorPrivateApis,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { Button, ScrollLock } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
Expand All @@ -37,6 +38,12 @@ import { useState, useEffect, useCallback, useMemo } from '@wordpress/element';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { store as noticesStore } from '@wordpress/notices';

import { privateApis as commandsPrivateApis } from '@wordpress/commands';
import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';

const { useCommands } = unlock( coreCommandsPrivateApis );
const { useCommandContext } = unlock( commandsPrivateApis );

/**
* Internal dependencies
*/
Expand All @@ -56,6 +63,7 @@ import ActionsPanel from './actions-panel';
import StartPageOptions from '../start-page-options';
import { store as editPostStore } from '../../store';
import { unlock } from '../../lock-unlock';
import useCommonCommands from '../../hooks/commands/use-common-commands';

const { getLayoutStyles } = unlock( blockEditorPrivateApis );

Expand Down Expand Up @@ -124,7 +132,10 @@ function useEditorStyles() {
}

function Layout() {
useCommands();
useCommonCommands();
useBlockCommands();

const isMobileViewport = useViewportMatch( 'medium', '<' );
const isHugeViewport = useViewportMatch( 'huge', '>=' );
const isLargeViewport = useViewportMatch( 'large' );
Expand Down Expand Up @@ -184,9 +195,17 @@ function Layout() {
),
// translators: Default label for the Document in the Block Breadcrumb.
documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
hasBlockSelected:
select( blockEditorStore ).getBlockSelectionStart(),
};
}, [] );

// Set the right context for the command palette
const commandContext = hasBlockSelected
? 'block-selection-edit'
: 'post-editor-edit';
useCommandContext( commandContext );

const styles = useEditorStyles();

const openSidebarPanel = () =>
Expand Down
5 changes: 0 additions & 5 deletions packages/edit-post/src/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { SlotFillProvider } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { store as preferencesStore } from '@wordpress/preferences';
import { CommandMenu } from '@wordpress/commands';
import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';

/**
* Internal dependencies
Expand All @@ -23,14 +22,10 @@ import Layout from './components/layout';
import EditorInitialization from './components/editor-initialization';
import { store as editPostStore } from './store';
import { unlock } from './lock-unlock';
import useCommonCommands from './hooks/commands/use-common-commands';

const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
const { useCommands } = unlock( coreCommandsPrivateApis );

function Editor( { postId, postType, settings, initialEdits, ...props } ) {
useCommands();
useCommonCommands();
const {
hasFixedToolbar,
focusMode,
Expand Down
16 changes: 12 additions & 4 deletions packages/edit-site/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
import {
privateApis as blockEditorPrivateApis,
useBlockCommands,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
Expand Down Expand Up @@ -80,6 +81,7 @@ export default function Layout() {
const {
isDistractionFree,
hasFixedToolbar,
hasBlockSelected,
canvasMode,
previousShortcut,
nextShortcut,
Expand All @@ -104,6 +106,8 @@ export default function Layout() {
'core/edit-site',
'distractionFree'
),
hasBlockSelected:
select( blockEditorStore ).getBlockSelectionStart(),
};
}, [] );
const isEditing = canvasMode === 'edit';
Expand Down Expand Up @@ -152,10 +156,14 @@ export default function Layout() {
}

// Sets the right context for the command palette
const commandContext =
canvasMode === 'edit' && isEditorPage
? 'site-editor-edit'
: 'site-editor';
let commandContext = 'site-editor';

if ( canvasMode === 'edit' && isEditorPage ) {
commandContext = 'site-editor-edit';
}
if ( hasBlockSelected ) {
commandContext = 'block-selection-edit';
}
useCommandContext( commandContext );

const [ backgroundColor ] = useGlobalStyle( 'color.background' );
Expand Down

1 comment on commit a54da2d

@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 a54da2d.
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/6509039579
📝 Reported issues:

Please sign in to comment.