From eb0a9468a2242d366708f26f18a33616a2366503 Mon Sep 17 00:00:00 2001 From: JR Tashjian Date: Sun, 27 Aug 2023 14:09:33 -0400 Subject: [PATCH 1/6] Add new command palette context for block selection --- .../edit-site/src/components/layout/index.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 80950d130a0a1..b8790b2ba65a3 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -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'; @@ -80,6 +81,7 @@ export default function Layout() { const { isDistractionFree, hasFixedToolbar, + hasBlockSelected, canvasMode, previousShortcut, nextShortcut, @@ -104,6 +106,8 @@ export default function Layout() { 'core/edit-site', 'distractionFree' ), + hasBlockSelected: + select( blockEditorStore ).getBlockSelectionStart(), }; }, [] ); const isEditing = canvasMode === 'edit'; @@ -150,10 +154,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' ); From 36650760b8d9750f8407e0e142671ee497a50aca Mon Sep 17 00:00:00 2001 From: JR Tashjian Date: Sun, 27 Aug 2023 14:10:37 -0400 Subject: [PATCH 2/6] Take advantage of useCommand in edit-post like edit-site --- .../edit-post/src/components/layout/index.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index c0018d40d6ef8..0d82e6b820ebb 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -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'; @@ -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 */ @@ -124,7 +131,9 @@ function useEditorStyles() { } function Layout() { + useCommands(); useBlockCommands(); + const isMobileViewport = useViewportMatch( 'medium', '<' ); const isHugeViewport = useViewportMatch( 'huge', '>=' ); const isLargeViewport = useViewportMatch( 'large' ); @@ -184,9 +193,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 = () => From 1ff24bd2b605af1865deb39b135d40f355d4f2e4 Mon Sep 17 00:00:00 2001 From: JR Tashjian Date: Sun, 27 Aug 2023 14:11:04 -0400 Subject: [PATCH 3/6] Apply new context to blockActions commands --- packages/block-editor/src/components/use-block-commands/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/use-block-commands/index.js b/packages/block-editor/src/components/use-block-commands/index.js index bb7b7d97c3190..5d61407c8d726 100644 --- a/packages/block-editor/src/components/use-block-commands/index.js +++ b/packages/block-editor/src/components/use-block-commands/index.js @@ -280,5 +280,6 @@ export const useBlockCommands = () => { useCommandLoader( { name: 'core/block-editor/blockActions', hook: useActionsCommands, + context: 'block-selection-edit', } ); }; From 5e9662994463d561964c2355c3887a868878f480 Mon Sep 17 00:00:00 2001 From: JR Tashjian Date: Wed, 13 Sep 2023 08:40:23 -0400 Subject: [PATCH 4/6] Remove duplicate useCommands call. --- packages/edit-post/src/components/layout/index.js | 2 ++ packages/edit-post/src/editor.js | 5 ----- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index b465b9fa2bd75..dd1d539c8e0a5 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -63,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 ); @@ -132,6 +133,7 @@ function useEditorStyles() { function Layout() { useCommands(); + useCommonCommands(); useBlockCommands(); const isMobileViewport = useViewportMatch( 'medium', '<' ); diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index 6668001b76773..d1ef111e7dc4c 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -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 @@ -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, From 9d5ad9e85662ef8260bae728348496cf8d1bf57e Mon Sep 17 00:00:00 2001 From: JR Tashjian Date: Wed, 13 Sep 2023 23:06:04 -0400 Subject: [PATCH 5/6] reorder block commands --- .../components/use-block-commands/index.js | 71 ++++++++++--------- 1 file changed, 39 insertions(+), 32 deletions(-) diff --git a/packages/block-editor/src/components/use-block-commands/index.js b/packages/block-editor/src/components/use-block-commands/index.js index 8f544df25a277..e85e7069da215 100644 --- a/packages/block-editor/src/components/use-block-commands/index.js +++ b/packages/block-editor/src/components/use-block-commands/index.js @@ -201,32 +201,61 @@ const useActionsCommands = () => { 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 ( isGroupable ) { + commands.push( { + name: 'Group', + label: __( 'Group' ), + callback: onGroup, + icon: group, + } ); + } + + if ( isUngroupable ) { + commands.push( { + name: 'ungroup', + label: __( 'Ungroup' ), + callback: onUngroup, + icon: ungroup, + } ); + } + if ( canRemove ) { commands.push( { name: 'remove', @@ -235,14 +264,7 @@ const useActionsCommands = () => { icon: remove, } ); } - if ( canDuplicate ) { - commands.push( { - name: 'duplicate', - label: __( 'Duplicate' ), - callback: () => duplicateBlocks( clientIds, true ), - icon: copy, - } ); - } + if ( canMove ) { commands.push( { name: 'move-to', @@ -255,22 +277,7 @@ const useActionsCommands = () => { icon: move, } ); } - if ( isUngroupable ) { - commands.push( { - name: 'ungroup', - label: __( 'Ungroup' ), - callback: onUngroup, - icon: ungroup, - } ); - } - if ( isGroupable ) { - commands.push( { - name: 'Group', - label: __( 'Group' ), - callback: onGroup, - icon: group, - } ); - } + return { isLoading: false, commands: commands.map( ( command ) => ( { From 8e2ed22c48f4888245a175c6f911f106c3281f7b Mon Sep 17 00:00:00 2001 From: JR Tashjian Date: Wed, 13 Sep 2023 23:21:13 -0400 Subject: [PATCH 6/6] Split contextual commands into a "QuickActions" hook. --- .../components/use-block-commands/index.js | 79 ++++++++++++++----- 1 file changed, 58 insertions(+), 21 deletions(-) diff --git a/packages/block-editor/src/components/use-block-commands/index.js b/packages/block-editor/src/components/use-block-commands/index.js index e85e7069da215..9dfc4a6df9ff9 100644 --- a/packages/block-editor/src/components/use-block-commands/index.js +++ b/packages/block-editor/src/components/use-block-commands/index.js @@ -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, @@ -130,9 +184,7 @@ const useActionsCommands = () => { canInsertBlockType, getBlockRootClientId, getBlocksByClientId, - canMoveBlocks, canRemoveBlocks, - getBlockCount, } = useSelect( blockEditorStore ); const { getDefaultBlockName, getGroupingBlockName } = useSelect( blocksStore ); @@ -145,9 +197,6 @@ const useActionsCommands = () => { duplicateBlocks, insertAfterBlock, insertBeforeBlock, - setBlockMovingClientId, - setNavigationMode, - selectBlock, } = useDispatch( blockEditorStore ); const onGroup = () => { @@ -196,9 +245,6 @@ const useActionsCommands = () => { ); } ); const canRemove = canRemoveBlocks( clientIds, rootClientId ); - const canMove = - canMoveBlocks( clientIds, rootClientId ) && - getBlockCount( rootClientId ) !== 1; const commands = []; @@ -265,19 +311,6 @@ const useActionsCommands = () => { } ); } - 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 ) => ( { @@ -299,6 +332,10 @@ export const useBlockCommands = () => { useCommandLoader( { name: 'core/block-editor/blockActions', hook: useActionsCommands, + } ); + useCommandLoader( { + name: 'core/block-editor/blockQuickActions', + hook: useQuickActionsCommands, context: 'block-selection-edit', } ); };