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 e739729c8f9e8..ff919710a2284 100644
--- a/packages/block-editor/src/components/use-block-commands/index.js
+++ b/packages/block-editor/src/components/use-block-commands/index.js
@@ -24,275 +24,286 @@ import {
import BlockIcon from '../block-icon';
import { store as blockEditorStore } from '../../store';
-export const useTransformCommands = () => {
- const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
- const {
- blocks,
- clientIds,
- canRemove,
- possibleBlockTransformations,
- invalidSelection,
- } = useSelect( ( select ) => {
+const getTransformCommands = () =>
+ function useTransformCommands() {
+ const { replaceBlocks, multiSelect } = useDispatch( blockEditorStore );
const {
- getBlockRootClientId,
- getBlockTransformItems,
- getSelectedBlockClientIds,
- getBlocksByClientId,
- canRemoveBlocks,
- } = select( blockEditorStore );
+ blocks,
+ clientIds,
+ canRemove,
+ possibleBlockTransformations,
+ invalidSelection,
+ } = useSelect( ( select ) => {
+ const {
+ getBlockRootClientId,
+ getBlockTransformItems,
+ getSelectedBlockClientIds,
+ getBlocksByClientId,
+ canRemoveBlocks,
+ } = select( blockEditorStore );
+
+ const selectedBlockClientIds = getSelectedBlockClientIds();
+ const selectedBlocks = getBlocksByClientId(
+ selectedBlockClientIds
+ );
+
+ // selectedBlocks can have `null`s when something tries to call `selectBlock` with an inexistent clientId.
+ // These nulls will cause fatal errors down the line.
+ // In order to prevent discrepancies between selectedBlockClientIds and selectedBlocks, we effectively treat the entire selection as invalid.
+ // @see https://github.com/WordPress/gutenberg/pull/59410#issuecomment-2006304536
+ if ( selectedBlocks.filter( ( block ) => ! block ).length > 0 ) {
+ return {
+ invalidSelection: true,
+ };
+ }
- const selectedBlockClientIds = getSelectedBlockClientIds();
- const selectedBlocks = getBlocksByClientId( selectedBlockClientIds );
+ const rootClientId = getBlockRootClientId(
+ selectedBlockClientIds[ 0 ]
+ );
+ return {
+ blocks: selectedBlocks,
+ clientIds: selectedBlockClientIds,
+ possibleBlockTransformations: getBlockTransformItems(
+ selectedBlocks,
+ rootClientId
+ ),
+ canRemove: canRemoveBlocks( selectedBlockClientIds ),
+ invalidSelection: false,
+ };
+ }, [] );
- // selectedBlocks can have `null`s when something tries to call `selectBlock` with an inexistent clientId.
- // These nulls will cause fatal errors down the line.
- // In order to prevent discrepancies between selectedBlockClientIds and selectedBlocks, we effectively treat the entire selection as invalid.
- // @see https://github.com/WordPress/gutenberg/pull/59410#issuecomment-2006304536
- if ( selectedBlocks.filter( ( block ) => ! block ).length > 0 ) {
+ if ( invalidSelection ) {
return {
- invalidSelection: true,
+ isLoading: false,
+ commands: [],
};
}
+ const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
+
+ function selectForMultipleBlocks( insertedBlocks ) {
+ if ( insertedBlocks.length > 1 ) {
+ multiSelect(
+ insertedBlocks[ 0 ].clientId,
+ insertedBlocks[ insertedBlocks.length - 1 ].clientId
+ );
+ }
+ }
- const rootClientId = getBlockRootClientId(
- selectedBlockClientIds[ 0 ]
- );
- return {
- blocks: selectedBlocks,
- clientIds: selectedBlockClientIds,
- possibleBlockTransformations: getBlockTransformItems(
- selectedBlocks,
- rootClientId
- ),
- canRemove: canRemoveBlocks( selectedBlockClientIds ),
- invalidSelection: false,
- };
- }, [] );
+ // Simple block tranformation based on the `Block Transforms` API.
+ function onBlockTransform( name ) {
+ const newBlocks = switchToBlockType( blocks, name );
+ replaceBlocks( clientIds, newBlocks );
+ selectForMultipleBlocks( newBlocks );
+ }
- if ( invalidSelection ) {
- return {
- isLoading: false,
- commands: [],
- };
- }
- const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
-
- function selectForMultipleBlocks( insertedBlocks ) {
- if ( insertedBlocks.length > 1 ) {
- multiSelect(
- insertedBlocks[ 0 ].clientId,
- insertedBlocks[ insertedBlocks.length - 1 ].clientId
- );
+ /**
+ * The `isTemplate` check is a stopgap solution here.
+ * Ideally, the Transforms API should handle this
+ * by allowing to exclude blocks from wildcard transformations.
+ */
+ const hasPossibleBlockTransformations =
+ !! possibleBlockTransformations.length && canRemove && ! isTemplate;
+
+ if (
+ ! clientIds ||
+ clientIds.length < 1 ||
+ ! hasPossibleBlockTransformations
+ ) {
+ return { isLoading: false, commands: [] };
}
- }
-
- // Simple block tranformation based on the `Block Transforms` API.
- function onBlockTransform( name ) {
- const newBlocks = switchToBlockType( blocks, name );
- replaceBlocks( clientIds, newBlocks );
- selectForMultipleBlocks( newBlocks );
- }
-
- /**
- * The `isTemplate` check is a stopgap solution here.
- * Ideally, the Transforms API should handle this
- * by allowing to exclude blocks from wildcard transformations.
- */
- const hasPossibleBlockTransformations =
- !! possibleBlockTransformations.length && canRemove && ! isTemplate;
-
- if (
- ! clientIds ||
- clientIds.length < 1 ||
- ! hasPossibleBlockTransformations
- ) {
- return { isLoading: false, commands: [] };
- }
-
- const commands = possibleBlockTransformations.map( ( transformation ) => {
- const { name, title, icon } = transformation;
- return {
- name: 'core/block-editor/transform-to-' + name.replace( '/', '-' ),
- /* translators: %s: Block or block variation name. */
- label: sprintf( __( 'Transform to %s' ), title ),
- icon: ,
- callback: ( { close } ) => {
- onBlockTransform( name );
- close();
+
+ const commands = possibleBlockTransformations.map(
+ ( transformation ) => {
+ const { name, title, icon } = transformation;
+ return {
+ name:
+ 'core/block-editor/transform-to-' +
+ name.replace( '/', '-' ),
+ /* translators: %s: Block or block variation name. */
+ label: sprintf( __( 'Transform to %s' ), title ),
+ icon: ,
+ callback: ( { close } ) => {
+ onBlockTransform( name );
+ close();
+ },
+ };
+ }
+ );
+
+ return { isLoading: false, commands };
+ };
+
+const getQuickActionsCommands = () =>
+ function useQuickActionsCommands() {
+ const { clientIds, isUngroupable, isGroupable } = useSelect(
+ ( select ) => {
+ const {
+ getSelectedBlockClientIds,
+ isUngroupable: _isUngroupable,
+ isGroupable: _isGroupable,
+ } = select( blockEditorStore );
+ const selectedBlockClientIds = getSelectedBlockClientIds();
+
+ return {
+ clientIds: selectedBlockClientIds,
+ isUngroupable: _isUngroupable(),
+ isGroupable: _isGroupable(),
+ };
},
- };
- } );
+ []
+ );
+ const {
+ canInsertBlockType,
+ getBlockRootClientId,
+ getBlocksByClientId,
+ canRemoveBlocks,
+ } = useSelect( blockEditorStore );
+ const { getDefaultBlockName, getGroupingBlockName } =
+ useSelect( blocksStore );
- return { isLoading: false, commands };
-};
+ const blocks = getBlocksByClientId( clientIds );
-const useQuickActionsCommands = () => {
- const { clientIds, isUngroupable, isGroupable } = useSelect( ( select ) => {
const {
- getSelectedBlockClientIds,
- isUngroupable: _isUngroupable,
- isGroupable: _isGroupable,
- } = select( blockEditorStore );
- const selectedBlockClientIds = getSelectedBlockClientIds();
+ removeBlocks,
+ replaceBlocks,
+ duplicateBlocks,
+ insertAfterBlock,
+ insertBeforeBlock,
+ } = useDispatch( blockEditorStore );
+
+ const onGroup = () => {
+ if ( ! blocks.length ) {
+ return;
+ }
- return {
- clientIds: selectedBlockClientIds,
- isUngroupable: _isUngroupable(),
- isGroupable: _isGroupable(),
+ const groupingBlockName = getGroupingBlockName();
+
+ // Activate the `transform` on `core/group` which does the conversion.
+ const newBlocks = switchToBlockType( blocks, groupingBlockName );
+
+ if ( ! newBlocks ) {
+ return;
+ }
+ replaceBlocks( clientIds, newBlocks );
};
- }, [] );
- const {
- canInsertBlockType,
- getBlockRootClientId,
- getBlocksByClientId,
- canRemoveBlocks,
- } = useSelect( blockEditorStore );
- const { getDefaultBlockName, getGroupingBlockName } =
- useSelect( blocksStore );
-
- const blocks = getBlocksByClientId( clientIds );
-
- const {
- removeBlocks,
- replaceBlocks,
- duplicateBlocks,
- insertAfterBlock,
- insertBeforeBlock,
- } = useDispatch( blockEditorStore );
-
- const onGroup = () => {
- if ( ! blocks.length ) {
- return;
- }
+ const onUngroup = () => {
+ if ( ! blocks.length ) {
+ return;
+ }
- const groupingBlockName = getGroupingBlockName();
+ const innerBlocks = blocks[ 0 ].innerBlocks;
- // Activate the `transform` on `core/group` which does the conversion.
- const newBlocks = switchToBlockType( blocks, groupingBlockName );
+ if ( ! innerBlocks.length ) {
+ return;
+ }
- if ( ! newBlocks ) {
- return;
- }
- replaceBlocks( clientIds, newBlocks );
- };
- const onUngroup = () => {
- if ( ! blocks.length ) {
- return;
+ replaceBlocks( clientIds, innerBlocks );
+ };
+
+ if ( ! clientIds || clientIds.length < 1 ) {
+ return { isLoading: false, commands: [] };
}
- const innerBlocks = blocks[ 0 ].innerBlocks;
+ const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+ const canInsertDefaultBlock = canInsertBlockType(
+ getDefaultBlockName(),
+ rootClientId
+ );
+ const canDuplicate = blocks.every( ( block ) => {
+ return (
+ !! block &&
+ hasBlockSupport( block.name, 'multiple', true ) &&
+ canInsertBlockType( block.name, rootClientId )
+ );
+ } );
+ const canRemove = canRemoveBlocks( clientIds );
- if ( ! innerBlocks.length ) {
- return;
+ const commands = [];
+
+ if ( canDuplicate ) {
+ commands.push( {
+ name: 'duplicate',
+ label: __( 'Duplicate' ),
+ callback: () => duplicateBlocks( clientIds, true ),
+ icon: copy,
+ } );
}
- replaceBlocks( clientIds, innerBlocks );
- };
+ if ( canInsertDefaultBlock ) {
+ commands.push(
+ {
+ name: 'add-before',
+ label: __( 'Add before' ),
+ callback: () => {
+ const clientId = Array.isArray( clientIds )
+ ? clientIds[ 0 ]
+ : clientId;
+ insertBeforeBlock( clientId );
+ },
+ icon: add,
+ },
+ {
+ name: 'add-after',
+ label: __( 'Add after' ),
+ callback: () => {
+ const clientId = Array.isArray( clientIds )
+ ? clientIds[ clientIds.length - 1 ]
+ : clientId;
+ insertAfterBlock( clientId );
+ },
+ icon: add,
+ }
+ );
+ }
- if ( ! clientIds || clientIds.length < 1 ) {
- return { isLoading: false, commands: [] };
- }
-
- const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
- const canInsertDefaultBlock = canInsertBlockType(
- getDefaultBlockName(),
- rootClientId
- );
- const canDuplicate = blocks.every( ( block ) => {
- return (
- !! block &&
- hasBlockSupport( block.name, 'multiple', true ) &&
- canInsertBlockType( block.name, rootClientId )
- );
- } );
- const canRemove = canRemoveBlocks( clientIds );
+ if ( isGroupable ) {
+ commands.push( {
+ name: 'Group',
+ label: __( 'Group' ),
+ callback: onGroup,
+ icon: group,
+ } );
+ }
- const commands = [];
+ if ( isUngroupable ) {
+ commands.push( {
+ name: 'ungroup',
+ label: __( 'Ungroup' ),
+ callback: onUngroup,
+ icon: ungroup,
+ } );
+ }
- if ( canDuplicate ) {
- commands.push( {
- name: 'duplicate',
- label: __( 'Duplicate' ),
- callback: () => duplicateBlocks( clientIds, true ),
- icon: copy,
- } );
- }
-
- if ( canInsertDefaultBlock ) {
- commands.push(
- {
- name: 'add-before',
- label: __( 'Add before' ),
- callback: () => {
- const clientId = Array.isArray( clientIds )
- ? clientIds[ 0 ]
- : clientId;
- insertBeforeBlock( clientId );
- },
- icon: add,
- },
- {
- name: 'add-after',
- label: __( 'Add after' ),
- callback: () => {
- const clientId = Array.isArray( clientIds )
- ? clientIds[ clientIds.length - 1 ]
- : clientId;
- insertAfterBlock( clientId );
+ if ( canRemove ) {
+ commands.push( {
+ name: 'remove',
+ label: __( 'Delete' ),
+ callback: () => removeBlocks( clientIds, true ),
+ icon: remove,
+ } );
+ }
+
+ return {
+ isLoading: false,
+ commands: commands.map( ( command ) => ( {
+ ...command,
+ name: 'core/block-editor/action-' + command.name,
+ callback: ( { close } ) => {
+ command.callback();
+ close();
},
- 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',
- label: __( 'Delete' ),
- callback: () => removeBlocks( clientIds, true ),
- icon: remove,
- } );
- }
-
- return {
- isLoading: false,
- commands: commands.map( ( command ) => ( {
- ...command,
- name: 'core/block-editor/action-' + command.name,
- callback: ( { close } ) => {
- command.callback();
- close();
- },
- } ) ),
+ } ) ),
+ };
};
-};
export const useBlockCommands = () => {
useCommandLoader( {
name: 'core/block-editor/blockTransforms',
- hook: useTransformCommands,
+ hook: getTransformCommands(),
} );
useCommandLoader( {
name: 'core/block-editor/blockQuickActions',
- hook: useQuickActionsCommands,
+ hook: getQuickActionsCommands(),
context: 'block-selection-edit',
} );
};
diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js
index c0d8bb084b46a..9f0883faa3c17 100644
--- a/packages/core-commands/src/admin-navigation-commands.js
+++ b/packages/core-commands/src/admin-navigation-commands.js
@@ -18,75 +18,78 @@ import { unlock } from './lock-unlock';
const { useHistory } = unlock( routerPrivateApis );
-function useAddNewPageCommand() {
- const isSiteEditor = getPath( window.location.href )?.includes(
- 'site-editor.php'
- );
- const history = useHistory();
- const isBlockBasedTheme = useSelect( ( select ) => {
- return select( coreStore ).getCurrentTheme()?.is_block_theme;
- }, [] );
- const { saveEntityRecord } = useDispatch( coreStore );
- const { createErrorNotice } = useDispatch( noticesStore );
+const getAddNewPageCommand = () =>
+ function useAddNewPageCommand() {
+ const isSiteEditor = getPath( window.location.href )?.includes(
+ 'site-editor.php'
+ );
+ const history = useHistory();
+ const isBlockBasedTheme = useSelect( ( select ) => {
+ return select( coreStore ).getCurrentTheme()?.is_block_theme;
+ }, [] );
+ const { saveEntityRecord } = useDispatch( coreStore );
+ const { createErrorNotice } = useDispatch( noticesStore );
- const createPageEntity = useCallback(
- async ( { close } ) => {
- try {
- const page = await saveEntityRecord(
- 'postType',
- 'page',
- {
- status: 'draft',
- },
- {
- throwOnError: true,
+ const createPageEntity = useCallback(
+ async ( { close } ) => {
+ try {
+ const page = await saveEntityRecord(
+ 'postType',
+ 'page',
+ {
+ status: 'draft',
+ },
+ {
+ throwOnError: true,
+ }
+ );
+ if ( page?.id ) {
+ history.push( {
+ postId: page.id,
+ postType: 'page',
+ canvas: 'edit',
+ } );
}
- );
- if ( page?.id ) {
- history.push( {
- postId: page.id,
- postType: 'page',
- canvas: 'edit',
+ } catch ( error ) {
+ const errorMessage =
+ error.message && error.code !== 'unknown_error'
+ ? error.message
+ : __(
+ 'An error occurred while creating the item.'
+ );
+
+ createErrorNotice( errorMessage, {
+ type: 'snackbar',
} );
+ } finally {
+ close();
}
- } catch ( error ) {
- const errorMessage =
- error.message && error.code !== 'unknown_error'
- ? error.message
- : __( 'An error occurred while creating the item.' );
-
- createErrorNotice( errorMessage, {
- type: 'snackbar',
- } );
- } finally {
- close();
- }
- },
- [ createErrorNotice, history, saveEntityRecord ]
- );
-
- const commands = useMemo( () => {
- const addNewPage =
- isSiteEditor && isBlockBasedTheme
- ? createPageEntity
- : () =>
- ( document.location.href =
- 'post-new.php?post_type=page' );
- return [
- {
- name: 'core/add-new-page',
- label: __( 'Add new page' ),
- icon: plus,
- callback: addNewPage,
},
- ];
- }, [ createPageEntity, isSiteEditor, isBlockBasedTheme ] );
+ [ createErrorNotice, history, saveEntityRecord ]
+ );
+
+ const commands = useMemo( () => {
+ const addNewPage =
+ isSiteEditor && isBlockBasedTheme
+ ? createPageEntity
+ : () =>
+ ( document.location.href =
+ 'post-new.php?post_type=page' );
+ return [
+ {
+ name: 'core/add-new-page',
+ label: __( 'Add new page' ),
+ icon: plus,
+ callback: addNewPage,
+ },
+ ];
+ }, [ createPageEntity, isSiteEditor, isBlockBasedTheme ] );
- return {
- isLoading: false,
- commands,
+ return {
+ isLoading: false,
+ commands,
+ };
};
-}
export function useAdminNavigationCommands() {
useCommand( {
@@ -100,6 +103,6 @@ export function useAdminNavigationCommands() {
useCommandLoader( {
name: 'core/add-new-page',
- hook: useAddNewPageCommand,
+ hook: getAddNewPageCommand(),
} );
}
diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js
index 4679d4d1523c8..2785d809d41e0 100644
--- a/packages/core-commands/src/site-editor-navigation-commands.js
+++ b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -275,159 +275,169 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
};
};
-const usePageNavigationCommandLoader =
- getNavigationCommandLoaderPerPostType( 'page' );
-const usePostNavigationCommandLoader =
- getNavigationCommandLoaderPerPostType( 'post' );
-const useTemplateNavigationCommandLoader =
- getNavigationCommandLoaderPerTemplate( 'wp_template' );
-const useTemplatePartNavigationCommandLoader =
- getNavigationCommandLoaderPerTemplate( 'wp_template_part' );
+const getSiteEditorBasicNavigationCommands = () =>
+ function useSiteEditorBasicNavigationCommands() {
+ const history = useHistory();
+ const isSiteEditor = getPath( window.location.href )?.includes(
+ 'site-editor.php'
+ );
+ const { isBlockBasedTheme, canCreateTemplate } = useSelect(
+ ( select ) => {
+ return {
+ isBlockBasedTheme:
+ select( coreStore ).getCurrentTheme()?.is_block_theme,
+ canCreateTemplate: select( coreStore ).canUser( 'create', {
+ kind: 'postType',
+ name: 'wp_template',
+ } ),
+ };
+ },
+ []
+ );
+ const commands = useMemo( () => {
+ const result = [];
-function useSiteEditorBasicNavigationCommands() {
- const history = useHistory();
- const isSiteEditor = getPath( window.location.href )?.includes(
- 'site-editor.php'
- );
- const { isBlockBasedTheme, canCreateTemplate } = useSelect( ( select ) => {
- return {
- isBlockBasedTheme:
- select( coreStore ).getCurrentTheme()?.is_block_theme,
- canCreateTemplate: select( coreStore ).canUser( 'create', {
- kind: 'postType',
- name: 'wp_template',
- } ),
- };
- }, [] );
- const commands = useMemo( () => {
- const result = [];
+ if ( canCreateTemplate && isBlockBasedTheme ) {
+ result.push( {
+ name: 'core/edit-site/open-navigation',
+ label: __( 'Navigation' ),
+ icon: navigation,
+ callback: ( { close } ) => {
+ const args = {
+ postType: 'wp_navigation',
+ };
+ const targetUrl = addQueryArgs(
+ 'site-editor.php',
+ args
+ );
+ if ( isSiteEditor ) {
+ history.push( args );
+ } else {
+ document.location = targetUrl;
+ }
+ close();
+ },
+ } );
- if ( canCreateTemplate && isBlockBasedTheme ) {
- result.push( {
- name: 'core/edit-site/open-navigation',
- label: __( 'Navigation' ),
- icon: navigation,
- callback: ( { close } ) => {
- const args = {
- postType: 'wp_navigation',
- };
- const targetUrl = addQueryArgs( 'site-editor.php', args );
- if ( isSiteEditor ) {
- history.push( args );
- } else {
- document.location = targetUrl;
- }
- close();
- },
- } );
+ result.push( {
+ name: 'core/edit-site/open-styles',
+ label: __( 'Styles' ),
+ icon: styles,
+ callback: ( { close } ) => {
+ const args = {
+ path: '/wp_global_styles',
+ };
+ const targetUrl = addQueryArgs(
+ 'site-editor.php',
+ args
+ );
+ if ( isSiteEditor ) {
+ history.push( args );
+ } else {
+ document.location = targetUrl;
+ }
+ close();
+ },
+ } );
- result.push( {
- name: 'core/edit-site/open-styles',
- label: __( 'Styles' ),
- icon: styles,
- callback: ( { close } ) => {
- const args = {
- path: '/wp_global_styles',
- };
- const targetUrl = addQueryArgs( 'site-editor.php', args );
- if ( isSiteEditor ) {
- history.push( args );
- } else {
- document.location = targetUrl;
- }
- close();
- },
- } );
+ result.push( {
+ name: 'core/edit-site/open-pages',
+ label: __( 'Pages' ),
+ icon: page,
+ callback: ( { close } ) => {
+ const args = {
+ postType: 'page',
+ };
+ const targetUrl = addQueryArgs(
+ 'site-editor.php',
+ args
+ );
+ if ( isSiteEditor ) {
+ history.push( args );
+ } else {
+ document.location = targetUrl;
+ }
+ close();
+ },
+ } );
- result.push( {
- name: 'core/edit-site/open-pages',
- label: __( 'Pages' ),
- icon: page,
- callback: ( { close } ) => {
- const args = {
- postType: 'page',
- };
- const targetUrl = addQueryArgs( 'site-editor.php', args );
- if ( isSiteEditor ) {
- history.push( args );
- } else {
- document.location = targetUrl;
- }
- close();
- },
- } );
+ result.push( {
+ name: 'core/edit-site/open-templates',
+ label: __( 'Templates' ),
+ icon: layout,
+ callback: ( { close } ) => {
+ const args = {
+ postType: 'wp_template',
+ };
+ const targetUrl = addQueryArgs(
+ 'site-editor.php',
+ args
+ );
+ if ( isSiteEditor ) {
+ history.push( args );
+ } else {
+ document.location = targetUrl;
+ }
+ close();
+ },
+ } );
+ }
result.push( {
- name: 'core/edit-site/open-templates',
- label: __( 'Templates' ),
- icon: layout,
+ name: 'core/edit-site/open-patterns',
+ label: __( 'Patterns' ),
+ icon: symbol,
callback: ( { close } ) => {
- const args = {
- postType: 'wp_template',
- };
- const targetUrl = addQueryArgs( 'site-editor.php', args );
- if ( isSiteEditor ) {
- history.push( args );
+ if ( canCreateTemplate ) {
+ const args = {
+ postType: 'wp_block',
+ };
+ const targetUrl = addQueryArgs(
+ 'site-editor.php',
+ args
+ );
+ if ( isSiteEditor ) {
+ history.push( args );
+ } else {
+ document.location = targetUrl;
+ }
+ close();
} else {
- document.location = targetUrl;
+ // If a user cannot access the site editor
+ document.location.href = 'edit.php?post_type=wp_block';
}
- close();
},
} );
- }
-
- result.push( {
- name: 'core/edit-site/open-patterns',
- label: __( 'Patterns' ),
- icon: symbol,
- callback: ( { close } ) => {
- if ( canCreateTemplate ) {
- const args = {
- postType: 'wp_block',
- };
- const targetUrl = addQueryArgs( 'site-editor.php', args );
- if ( isSiteEditor ) {
- history.push( args );
- } else {
- document.location = targetUrl;
- }
- close();
- } else {
- // If a user cannot access the site editor
- document.location.href = 'edit.php?post_type=wp_block';
- }
- },
- } );
- return result;
- }, [ history, isSiteEditor, canCreateTemplate, isBlockBasedTheme ] );
+ return result;
+ }, [ history, isSiteEditor, canCreateTemplate, isBlockBasedTheme ] );
- return {
- commands,
- isLoading: false,
+ return {
+ commands,
+ isLoading: false,
+ };
};
-}
export function useSiteEditorNavigationCommands() {
useCommandLoader( {
name: 'core/edit-site/navigate-pages',
- hook: usePageNavigationCommandLoader,
+ hook: getNavigationCommandLoaderPerPostType( 'page' ),
} );
useCommandLoader( {
name: 'core/edit-site/navigate-posts',
- hook: usePostNavigationCommandLoader,
+ hook: getNavigationCommandLoaderPerPostType( 'post' ),
} );
useCommandLoader( {
name: 'core/edit-site/navigate-templates',
- hook: useTemplateNavigationCommandLoader,
+ hook: getNavigationCommandLoaderPerTemplate( 'wp_template' ),
} );
useCommandLoader( {
name: 'core/edit-site/navigate-template-parts',
- hook: useTemplatePartNavigationCommandLoader,
+ hook: getNavigationCommandLoaderPerTemplate( 'wp_template_part' ),
} );
useCommandLoader( {
name: 'core/edit-site/basic-navigation',
- hook: useSiteEditorBasicNavigationCommands,
+ hook: getSiteEditorBasicNavigationCommands(),
context: 'site-editor',
} );
}
diff --git a/packages/edit-site/src/hooks/commands/use-common-commands.js b/packages/edit-site/src/hooks/commands/use-common-commands.js
index 536817e88d3a4..3e87f8721e116 100644
--- a/packages/edit-site/src/hooks/commands/use-common-commands.js
+++ b/packages/edit-site/src/hooks/commands/use-common-commands.js
@@ -28,282 +28,289 @@ import { store as editSiteStore } from '../../store';
const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
const { useHistory, useLocation } = unlock( routerPrivateApis );
-function useGlobalStylesOpenStylesCommands() {
- const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
- const { params } = useLocation();
- const { canvas = 'view' } = params;
- const history = useHistory();
- const isBlockBasedTheme = useSelect( ( select ) => {
- return select( coreStore ).getCurrentTheme().is_block_theme;
- }, [] );
+const getGlobalStylesOpenStylesCommands = () =>
+ function useGlobalStylesOpenStylesCommands() {
+ const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
+ const { params } = useLocation();
+ const { canvas = 'view' } = params;
+ const history = useHistory();
+ const isBlockBasedTheme = useSelect( ( select ) => {
+ return select( coreStore ).getCurrentTheme().is_block_theme;
+ }, [] );
- const commands = useMemo( () => {
- if ( ! isBlockBasedTheme ) {
- return [];
- }
+ const commands = useMemo( () => {
+ if ( ! isBlockBasedTheme ) {
+ return [];
+ }
- return [
- {
- name: 'core/edit-site/open-styles',
- label: __( 'Open styles' ),
- callback: ( { close } ) => {
- close();
- if ( ! params.postId ) {
- history.push( {
- path: '/wp_global_styles',
- canvas: 'edit',
- } );
- }
- if ( params.postId && canvas !== 'edit' ) {
- history.push(
- { ...params, canvas: 'edit' },
- undefined,
- {
- transition: 'canvas-mode-edit-transition',
- }
- );
- }
- openGeneralSidebar( 'edit-site/global-styles' );
+ return [
+ {
+ name: 'core/edit-site/open-styles',
+ label: __( 'Open styles' ),
+ callback: ( { close } ) => {
+ close();
+ if ( ! params.postId ) {
+ history.push( {
+ path: '/wp_global_styles',
+ canvas: 'edit',
+ } );
+ }
+ if ( params.postId && canvas !== 'edit' ) {
+ history.push(
+ { ...params, canvas: 'edit' },
+ undefined,
+ {
+ transition: 'canvas-mode-edit-transition',
+ }
+ );
+ }
+ openGeneralSidebar( 'edit-site/global-styles' );
+ },
+ icon: styles,
},
- icon: styles,
- },
- ];
- }, [ history, openGeneralSidebar, params, canvas, isBlockBasedTheme ] );
+ ];
+ }, [ history, openGeneralSidebar, params, canvas, isBlockBasedTheme ] );
- return {
- isLoading: false,
- commands,
+ return {
+ isLoading: false,
+ commands,
+ };
};
-}
-function useGlobalStylesToggleWelcomeGuideCommands() {
- const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
- const { params } = useLocation();
- const { canvas = 'view' } = params;
- const { set } = useDispatch( preferencesStore );
+const getGlobalStylesToggleWelcomeGuideCommands = () =>
+ function useGlobalStylesToggleWelcomeGuideCommands() {
+ const { openGeneralSidebar } = unlock( useDispatch( editSiteStore ) );
+ const { params } = useLocation();
+ const { canvas = 'view' } = params;
+ const { set } = useDispatch( preferencesStore );
- const history = useHistory();
- const isBlockBasedTheme = useSelect( ( select ) => {
- return select( coreStore ).getCurrentTheme().is_block_theme;
- }, [] );
+ const history = useHistory();
+ const isBlockBasedTheme = useSelect( ( select ) => {
+ return select( coreStore ).getCurrentTheme().is_block_theme;
+ }, [] );
- const commands = useMemo( () => {
- if ( ! isBlockBasedTheme ) {
- return [];
- }
+ const commands = useMemo( () => {
+ if ( ! isBlockBasedTheme ) {
+ return [];
+ }
- return [
- {
- name: 'core/edit-site/toggle-styles-welcome-guide',
- label: __( 'Learn about styles' ),
- callback: ( { close } ) => {
- close();
- if ( ! params.postId ) {
- history.push( {
- path: '/wp_global_styles',
- canvas: 'edit',
- } );
- }
- if ( params.postId && canvas !== 'edit' ) {
- history.push(
- {
- ...params,
+ return [
+ {
+ name: 'core/edit-site/toggle-styles-welcome-guide',
+ label: __( 'Learn about styles' ),
+ callback: ( { close } ) => {
+ close();
+ if ( ! params.postId ) {
+ history.push( {
+ path: '/wp_global_styles',
canvas: 'edit',
- },
- undefined,
- {
- transition: 'canvas-mode-edit-transition',
- }
- );
- }
- openGeneralSidebar( 'edit-site/global-styles' );
- set( 'core/edit-site', 'welcomeGuideStyles', true );
- // sometimes there's a focus loss that happens after some time
- // that closes the modal, we need to force reopening it.
- setTimeout( () => {
+ } );
+ }
+ if ( params.postId && canvas !== 'edit' ) {
+ history.push(
+ {
+ ...params,
+ canvas: 'edit',
+ },
+ undefined,
+ {
+ transition: 'canvas-mode-edit-transition',
+ }
+ );
+ }
+ openGeneralSidebar( 'edit-site/global-styles' );
set( 'core/edit-site', 'welcomeGuideStyles', true );
- }, 500 );
+ // sometimes there's a focus loss that happens after some time
+ // that closes the modal, we need to force reopening it.
+ setTimeout( () => {
+ set( 'core/edit-site', 'welcomeGuideStyles', true );
+ }, 500 );
+ },
+ icon: help,
},
- icon: help,
- },
- ];
- }, [
- history,
- openGeneralSidebar,
- canvas,
- isBlockBasedTheme,
- set,
- params,
- ] );
+ ];
+ }, [
+ history,
+ openGeneralSidebar,
+ canvas,
+ isBlockBasedTheme,
+ set,
+ params,
+ ] );
- return {
- isLoading: false,
- commands,
+ return {
+ isLoading: false,
+ commands,
+ };
};
-}
-function useGlobalStylesResetCommands() {
- const [ canReset, onReset ] = useGlobalStylesReset();
- const commands = useMemo( () => {
- if ( ! canReset ) {
- return [];
- }
+const getGlobalStylesResetCommands = () =>
+ function useGlobalStylesResetCommands() {
+ const [ canReset, onReset ] = useGlobalStylesReset();
+ const commands = useMemo( () => {
+ if ( ! canReset ) {
+ return [];
+ }
- return [
- {
- name: 'core/edit-site/reset-global-styles',
- label: __( 'Reset styles' ),
- icon: isRTL() ? rotateRight : rotateLeft,
- callback: ( { close } ) => {
- close();
- onReset();
+ return [
+ {
+ name: 'core/edit-site/reset-global-styles',
+ label: __( 'Reset styles' ),
+ icon: isRTL() ? rotateRight : rotateLeft,
+ callback: ( { close } ) => {
+ close();
+ onReset();
+ },
},
- },
- ];
- }, [ canReset, onReset ] );
+ ];
+ }, [ canReset, onReset ] );
- return {
- isLoading: false,
- commands,
+ return {
+ isLoading: false,
+ commands,
+ };
};
-}
-function useGlobalStylesOpenCssCommands() {
- const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
- useDispatch( editSiteStore )
- );
- const { params } = useLocation();
- const { canvas = 'view' } = params;
- const history = useHistory();
- const { canEditCSS } = useSelect( ( select ) => {
- const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
- select( coreStore );
+const getGlobalStylesOpenCssCommands = () =>
+ function useGlobalStylesOpenCssCommands() {
+ const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
+ useDispatch( editSiteStore )
+ );
+ const { params } = useLocation();
+ const { canvas = 'view' } = params;
+ const history = useHistory();
+ const { canEditCSS } = useSelect( ( select ) => {
+ const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+ select( coreStore );
- const globalStylesId = __experimentalGetCurrentGlobalStylesId();
- const globalStyles = globalStylesId
- ? getEntityRecord( 'root', 'globalStyles', globalStylesId )
- : undefined;
+ const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+ const globalStyles = globalStylesId
+ ? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+ : undefined;
- return {
- canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
- };
- }, [] );
+ return {
+ canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
+ };
+ }, [] );
- const commands = useMemo( () => {
- if ( ! canEditCSS ) {
- return [];
- }
+ const commands = useMemo( () => {
+ if ( ! canEditCSS ) {
+ return [];
+ }
- return [
- {
- name: 'core/edit-site/open-styles-css',
- label: __( 'Customize CSS' ),
- icon: brush,
- callback: ( { close } ) => {
- close();
- if ( ! params.postId ) {
- history.push( {
- path: '/wp_global_styles',
- canvas: 'edit',
- } );
- }
- if ( params.postId && canvas !== 'edit' ) {
- history.push(
- {
- ...params,
+ return [
+ {
+ name: 'core/edit-site/open-styles-css',
+ label: __( 'Customize CSS' ),
+ icon: brush,
+ callback: ( { close } ) => {
+ close();
+ if ( ! params.postId ) {
+ history.push( {
+ path: '/wp_global_styles',
canvas: 'edit',
- },
- undefined,
- {
- transition: 'canvas-mode-edit-transition',
- }
- );
- }
- openGeneralSidebar( 'edit-site/global-styles' );
- setEditorCanvasContainerView( 'global-styles-css' );
+ } );
+ }
+ if ( params.postId && canvas !== 'edit' ) {
+ history.push(
+ {
+ ...params,
+ canvas: 'edit',
+ },
+ undefined,
+ {
+ transition: 'canvas-mode-edit-transition',
+ }
+ );
+ }
+ openGeneralSidebar( 'edit-site/global-styles' );
+ setEditorCanvasContainerView( 'global-styles-css' );
+ },
},
- },
- ];
- }, [
- history,
- openGeneralSidebar,
- setEditorCanvasContainerView,
- canEditCSS,
- canvas,
- params,
- ] );
- return {
- isLoading: false,
- commands,
+ ];
+ }, [
+ history,
+ openGeneralSidebar,
+ setEditorCanvasContainerView,
+ canEditCSS,
+ canvas,
+ params,
+ ] );
+ return {
+ isLoading: false,
+ commands,
+ };
};
-}
-function useGlobalStylesOpenRevisionsCommands() {
- const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
- useDispatch( editSiteStore )
- );
- const { params } = useLocation();
- const { canvas = 'view' } = params;
- const history = useHistory();
- const hasRevisions = useSelect( ( select ) => {
- const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
- select( coreStore );
- const globalStylesId = __experimentalGetCurrentGlobalStylesId();
- const globalStyles = globalStylesId
- ? getEntityRecord( 'root', 'globalStyles', globalStylesId )
- : undefined;
- return !! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count;
- }, [] );
+const getGlobalStylesOpenRevisionsCommands = () =>
+ function useGlobalStylesOpenRevisionsCommands() {
+ const { openGeneralSidebar, setEditorCanvasContainerView } = unlock(
+ useDispatch( editSiteStore )
+ );
+ const { params } = useLocation();
+ const { canvas = 'view' } = params;
+ const history = useHistory();
+ const hasRevisions = useSelect( ( select ) => {
+ const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+ select( coreStore );
+ const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+ const globalStyles = globalStylesId
+ ? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+ : undefined;
+ return !! globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count;
+ }, [] );
- const commands = useMemo( () => {
- if ( ! hasRevisions ) {
- return [];
- }
+ const commands = useMemo( () => {
+ if ( ! hasRevisions ) {
+ return [];
+ }
- return [
- {
- name: 'core/edit-site/open-global-styles-revisions',
- label: __( 'Style revisions' ),
- icon: backup,
- callback: ( { close } ) => {
- close();
- if ( ! params.postId ) {
- history.push( {
- path: '/wp_global_styles',
- canvas: 'edit',
- } );
- }
- if ( params.postId && canvas !== 'edit' ) {
- history.push(
- {
- ...params,
+ return [
+ {
+ name: 'core/edit-site/open-global-styles-revisions',
+ label: __( 'Style revisions' ),
+ icon: backup,
+ callback: ( { close } ) => {
+ close();
+ if ( ! params.postId ) {
+ history.push( {
+ path: '/wp_global_styles',
canvas: 'edit',
- },
- undefined,
- {
- transition: 'canvas-mode-edit-transition',
- }
+ } );
+ }
+ if ( params.postId && canvas !== 'edit' ) {
+ history.push(
+ {
+ ...params,
+ canvas: 'edit',
+ },
+ undefined,
+ {
+ transition: 'canvas-mode-edit-transition',
+ }
+ );
+ }
+ openGeneralSidebar( 'edit-site/global-styles' );
+ setEditorCanvasContainerView(
+ 'global-styles-revisions'
);
- }
- openGeneralSidebar( 'edit-site/global-styles' );
- setEditorCanvasContainerView( 'global-styles-revisions' );
+ },
},
- },
- ];
- }, [
- hasRevisions,
- history,
- openGeneralSidebar,
- setEditorCanvasContainerView,
- canvas,
- params,
- ] );
+ ];
+ }, [
+ hasRevisions,
+ history,
+ openGeneralSidebar,
+ setEditorCanvasContainerView,
+ canvas,
+ params,
+ ] );
- return {
- isLoading: false,
- commands,
+ return {
+ isLoading: false,
+ commands,
+ };
};
-}
export function useCommonCommands() {
const homeUrl = useSelect( ( select ) => {
@@ -324,26 +331,26 @@ export function useCommonCommands() {
useCommandLoader( {
name: 'core/edit-site/open-styles',
- hook: useGlobalStylesOpenStylesCommands,
+ hook: getGlobalStylesOpenStylesCommands(),
} );
useCommandLoader( {
name: 'core/edit-site/toggle-styles-welcome-guide',
- hook: useGlobalStylesToggleWelcomeGuideCommands,
+ hook: getGlobalStylesToggleWelcomeGuideCommands(),
} );
useCommandLoader( {
name: 'core/edit-site/reset-global-styles',
- hook: useGlobalStylesResetCommands,
+ hook: getGlobalStylesResetCommands(),
} );
useCommandLoader( {
name: 'core/edit-site/open-styles-css',
- hook: useGlobalStylesOpenCssCommands,
+ hook: getGlobalStylesOpenCssCommands(),
} );
useCommandLoader( {
name: 'core/edit-site/open-styles-revisions',
- hook: useGlobalStylesOpenRevisionsCommands,
+ hook: getGlobalStylesOpenRevisionsCommands(),
} );
}
diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
index 9728304419389..da36f32e6c0d5 100644
--- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
+++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js
@@ -22,147 +22,152 @@ import { useLink } from '../../components/routes/link';
const { useHistory, useLocation } = unlock( routerPrivateApis );
-function usePageContentFocusCommands() {
- const { record: template } = useEditedEntityRecord();
- const { params } = useLocation();
- const { canvas = 'view' } = params;
- const { isPage, templateId, currentPostType } = useSelect( ( select ) => {
- const { isPage: _isPage } = unlock( select( editSiteStore ) );
- const { getCurrentPostType, getCurrentTemplateId } =
- select( editorStore );
- return {
- isPage: _isPage(),
- templateId: getCurrentTemplateId(),
- currentPostType: getCurrentPostType(),
- };
- }, [] );
-
- const { onClick: editTemplate } = useLink( {
- postType: 'wp_template',
- postId: templateId,
- } );
-
- const { setRenderingMode } = useDispatch( editorStore );
-
- if ( ! isPage || canvas !== 'edit' ) {
- return { isLoading: false, commands: [] };
- }
-
- const commands = [];
-
- if ( currentPostType !== 'wp_template' ) {
- commands.push( {
- name: 'core/switch-to-template-focus',
- label: sprintf(
- /* translators: %s: template title */
- __( 'Edit template: %s' ),
- decodeEntities( template.title )
- ),
- icon: layout,
- callback: ( { close } ) => {
- editTemplate();
- close();
- },
- } );
- } else {
- commands.push( {
- name: 'core/switch-to-page-focus',
- label: __( 'Back to page' ),
- icon: page,
- callback: ( { close } ) => {
- setRenderingMode( 'template-locked' );
- close();
+const getPageContentFocusCommands = () =>
+ function usePageContentFocusCommands() {
+ const { record: template } = useEditedEntityRecord();
+ const { params } = useLocation();
+ const { canvas = 'view' } = params;
+ const { isPage, templateId, currentPostType } = useSelect(
+ ( select ) => {
+ const { isPage: _isPage } = unlock( select( editSiteStore ) );
+ const { getCurrentPostType, getCurrentTemplateId } =
+ select( editorStore );
+ return {
+ isPage: _isPage(),
+ templateId: getCurrentTemplateId(),
+ currentPostType: getCurrentPostType(),
+ };
},
+ []
+ );
+
+ const { onClick: editTemplate } = useLink( {
+ postType: 'wp_template',
+ postId: templateId,
} );
- }
- return { isLoading: false, commands };
-}
+ const { setRenderingMode } = useDispatch( editorStore );
+
+ if ( ! isPage || canvas !== 'edit' ) {
+ return { isLoading: false, commands: [] };
+ }
+
+ const commands = [];
+
+ if ( currentPostType !== 'wp_template' ) {
+ commands.push( {
+ name: 'core/switch-to-template-focus',
+ label: sprintf(
+ /* translators: %s: template title */
+ __( 'Edit template: %s' ),
+ decodeEntities( template.title )
+ ),
+ icon: layout,
+ callback: ( { close } ) => {
+ editTemplate();
+ close();
+ },
+ } );
+ } else {
+ commands.push( {
+ name: 'core/switch-to-page-focus',
+ label: __( 'Back to page' ),
+ icon: page,
+ callback: ( { close } ) => {
+ setRenderingMode( 'template-locked' );
+ close();
+ },
+ } );
+ }
+
+ return { isLoading: false, commands };
+ };
-function useManipulateDocumentCommands() {
- const { isLoaded, record: template } = useEditedEntityRecord();
- const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
- const history = useHistory();
- const isEditingPage = useSelect(
- ( select ) =>
- select( editSiteStore ).isPage() &&
- select( editorStore ).getCurrentPostType() !== 'wp_template',
- []
- );
-
- if ( ! isLoaded ) {
- return { isLoading: true, commands: [] };
- }
-
- const commands = [];
-
- if ( isTemplateRevertable( template ) && ! isEditingPage ) {
- const label =
- template.type === TEMPLATE_POST_TYPE
- ? sprintf(
- /* translators: %s: template title */
- __( 'Reset template: %s' ),
- decodeEntities( template.title )
- )
- : sprintf(
- /* translators: %s: template part title */
- __( 'Reset template part: %s' ),
- decodeEntities( template.title )
- );
- commands.push( {
- name: 'core/reset-template',
- label,
- icon: isRTL() ? rotateRight : rotateLeft,
- callback: ( { close } ) => {
- revertTemplate( template );
- close();
- },
- } );
- }
-
- if ( isTemplateRemovable( template ) && ! isEditingPage ) {
- const label =
- template.type === TEMPLATE_POST_TYPE
- ? sprintf(
- /* translators: %s: template title */
- __( 'Delete template: %s' ),
- decodeEntities( template.title )
- )
- : sprintf(
- /* translators: %s: template part title */
- __( 'Delete template part: %s' ),
- decodeEntities( template.title )
- );
- commands.push( {
- name: 'core/remove-template',
- label,
- icon: trash,
- callback: ( { close } ) => {
- removeTemplate( template );
- // Navigate to the template list
- history.push( {
- postType: template.type,
- } );
- close();
- },
- } );
- }
+const getManipulateDocumentCommands = () =>
+ function useManipulateDocumentCommands() {
+ const { isLoaded, record: template } = useEditedEntityRecord();
+ const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
+ const history = useHistory();
+ const isEditingPage = useSelect(
+ ( select ) =>
+ select( editSiteStore ).isPage() &&
+ select( editorStore ).getCurrentPostType() !== 'wp_template',
+ []
+ );
+
+ if ( ! isLoaded ) {
+ return { isLoading: true, commands: [] };
+ }
+
+ const commands = [];
+
+ if ( isTemplateRevertable( template ) && ! isEditingPage ) {
+ const label =
+ template.type === TEMPLATE_POST_TYPE
+ ? sprintf(
+ /* translators: %s: template title */
+ __( 'Reset template: %s' ),
+ decodeEntities( template.title )
+ )
+ : sprintf(
+ /* translators: %s: template part title */
+ __( 'Reset template part: %s' ),
+ decodeEntities( template.title )
+ );
+ commands.push( {
+ name: 'core/reset-template',
+ label,
+ icon: isRTL() ? rotateRight : rotateLeft,
+ callback: ( { close } ) => {
+ revertTemplate( template );
+ close();
+ },
+ } );
+ }
+
+ if ( isTemplateRemovable( template ) && ! isEditingPage ) {
+ const label =
+ template.type === TEMPLATE_POST_TYPE
+ ? sprintf(
+ /* translators: %s: template title */
+ __( 'Delete template: %s' ),
+ decodeEntities( template.title )
+ )
+ : sprintf(
+ /* translators: %s: template part title */
+ __( 'Delete template part: %s' ),
+ decodeEntities( template.title )
+ );
+ commands.push( {
+ name: 'core/remove-template',
+ label,
+ icon: trash,
+ callback: ( { close } ) => {
+ removeTemplate( template );
+ // Navigate to the template list
+ history.push( {
+ postType: template.type,
+ } );
+ close();
+ },
+ } );
+ }
- return {
- isLoading: ! isLoaded,
- commands,
+ return {
+ isLoading: ! isLoaded,
+ commands,
+ };
};
-}
export function useEditModeCommands() {
useCommandLoader( {
name: 'core/edit-site/page-content-focus',
- hook: usePageContentFocusCommands,
+ hook: getPageContentFocusCommands(),
context: 'entity-edit',
} );
useCommandLoader( {
name: 'core/edit-site/manipulate-document',
- hook: useManipulateDocumentCommands,
+ hook: getManipulateDocumentCommands(),
} );
}
diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js
index b4b9c05db256d..16260bed3978f 100644
--- a/packages/editor/src/components/commands/index.js
+++ b/packages/editor/src/components/commands/index.js
@@ -30,279 +30,287 @@ import { PATTERN_POST_TYPE } from '../../store/constants';
import { modalName as patternRenameModalName } from '../pattern-rename-modal';
import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal';
-function useEditorCommandLoader() {
- const {
- editorMode,
- isListViewOpen,
- showBlockBreadcrumbs,
- isDistractionFree,
- isFocusMode,
- isPreviewMode,
- isViewable,
- isCodeEditingEnabled,
- isRichEditingEnabled,
- isPublishSidebarEnabled,
- } = useSelect( ( select ) => {
- const { get } = select( preferencesStore );
- const { isListViewOpened, getCurrentPostType, getEditorSettings } =
- select( editorStore );
- const { getSettings } = select( blockEditorStore );
- const { getPostType } = select( coreStore );
+const getEditorCommandLoader = () =>
+ function useEditorCommandLoader() {
+ const {
+ editorMode,
+ isListViewOpen,
+ showBlockBreadcrumbs,
+ isDistractionFree,
+ isFocusMode,
+ isPreviewMode,
+ isViewable,
+ isCodeEditingEnabled,
+ isRichEditingEnabled,
+ isPublishSidebarEnabled,
+ } = useSelect( ( select ) => {
+ const { get } = select( preferencesStore );
+ const { isListViewOpened, getCurrentPostType, getEditorSettings } =
+ select( editorStore );
+ const { getSettings } = select( blockEditorStore );
+ const { getPostType } = select( coreStore );
- return {
- editorMode: get( 'core', 'editorMode' ) ?? 'visual',
- isListViewOpen: isListViewOpened(),
- showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
- isDistractionFree: get( 'core', 'distractionFree' ),
- isFocusMode: get( 'core', 'focusMode' ),
- isPreviewMode: getSettings().isPreviewMode,
- isViewable: getPostType( getCurrentPostType() )?.viewable ?? false,
- isCodeEditingEnabled: getEditorSettings().codeEditingEnabled,
- isRichEditingEnabled: getEditorSettings().richEditingEnabled,
- isPublishSidebarEnabled:
- select( editorStore ).isPublishSidebarEnabled(),
- };
- }, [] );
- const { getActiveComplementaryArea } = useSelect( interfaceStore );
- const { toggle } = useDispatch( preferencesStore );
- const { createInfoNotice } = useDispatch( noticesStore );
- const {
- __unstableSaveForPreview,
- setIsListViewOpened,
- switchEditorMode,
- toggleDistractionFree,
- toggleSpotlightMode,
- toggleTopToolbar,
- } = useDispatch( editorStore );
- const { openModal, enableComplementaryArea, disableComplementaryArea } =
- useDispatch( interfaceStore );
- const { getCurrentPostId } = useSelect( editorStore );
- const allowSwitchEditorMode = isCodeEditingEnabled && isRichEditingEnabled;
+ return {
+ editorMode: get( 'core', 'editorMode' ) ?? 'visual',
+ isListViewOpen: isListViewOpened(),
+ showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
+ isDistractionFree: get( 'core', 'distractionFree' ),
+ isFocusMode: get( 'core', 'focusMode' ),
+ isPreviewMode: getSettings().isPreviewMode,
+ isViewable:
+ getPostType( getCurrentPostType() )?.viewable ?? false,
+ isCodeEditingEnabled: getEditorSettings().codeEditingEnabled,
+ isRichEditingEnabled: getEditorSettings().richEditingEnabled,
+ isPublishSidebarEnabled:
+ select( editorStore ).isPublishSidebarEnabled(),
+ };
+ }, [] );
+ const { getActiveComplementaryArea } = useSelect( interfaceStore );
+ const { toggle } = useDispatch( preferencesStore );
+ const { createInfoNotice } = useDispatch( noticesStore );
+ const {
+ __unstableSaveForPreview,
+ setIsListViewOpened,
+ switchEditorMode,
+ toggleDistractionFree,
+ toggleSpotlightMode,
+ toggleTopToolbar,
+ } = useDispatch( editorStore );
+ const { openModal, enableComplementaryArea, disableComplementaryArea } =
+ useDispatch( interfaceStore );
+ const { getCurrentPostId } = useSelect( editorStore );
+ const allowSwitchEditorMode =
+ isCodeEditingEnabled && isRichEditingEnabled;
- if ( isPreviewMode ) {
- return { commands: [], isLoading: false };
- }
+ if ( isPreviewMode ) {
+ return { commands: [], isLoading: false };
+ }
- const commands = [];
+ const commands = [];
- commands.push( {
- name: 'core/open-shortcut-help',
- label: __( 'Keyboard shortcuts' ),
- icon: keyboard,
- callback: ( { close } ) => {
- close();
- openModal( 'editor/keyboard-shortcut-help' );
- },
- } );
-
- commands.push( {
- name: 'core/toggle-distraction-free',
- label: isDistractionFree
- ? __( 'Exit Distraction free' )
- : __( 'Enter Distraction free' ),
- callback: ( { close } ) => {
- toggleDistractionFree();
- close();
- },
- } );
-
- commands.push( {
- name: 'core/open-preferences',
- label: __( 'Editor preferences' ),
- callback: ( { close } ) => {
- close();
- openModal( 'editor/preferences' );
- },
- } );
-
- commands.push( {
- name: 'core/toggle-spotlight-mode',
- label: isFocusMode
- ? __( 'Exit Spotlight mode' )
- : __( 'Enter Spotlight mode' ),
- callback: ( { close } ) => {
- toggleSpotlightMode();
- close();
- },
- } );
-
- commands.push( {
- name: 'core/toggle-list-view',
- label: isListViewOpen
- ? __( 'Close List View' )
- : __( 'Open List View' ),
- icon: listView,
- callback: ( { close } ) => {
- setIsListViewOpened( ! isListViewOpen );
- close();
- createInfoNotice(
- isListViewOpen ? __( 'List View off.' ) : __( 'List View on.' ),
- {
- id: 'core/editor/toggle-list-view/notice',
- type: 'snackbar',
- }
- );
- },
- } );
+ commands.push( {
+ name: 'core/open-shortcut-help',
+ label: __( 'Keyboard shortcuts' ),
+ icon: keyboard,
+ callback: ( { close } ) => {
+ close();
+ openModal( 'editor/keyboard-shortcut-help' );
+ },
+ } );
- commands.push( {
- name: 'core/toggle-top-toolbar',
- label: __( 'Top toolbar' ),
- callback: ( { close } ) => {
- toggleTopToolbar();
- close();
- },
- } );
+ commands.push( {
+ name: 'core/toggle-distraction-free',
+ label: isDistractionFree
+ ? __( 'Exit Distraction free' )
+ : __( 'Enter Distraction free' ),
+ callback: ( { close } ) => {
+ toggleDistractionFree();
+ close();
+ },
+ } );
- if ( allowSwitchEditorMode ) {
commands.push( {
- name: 'core/toggle-code-editor',
- label:
- editorMode === 'visual'
- ? __( 'Open code editor' )
- : __( 'Exit code editor' ),
- icon: code,
+ name: 'core/open-preferences',
+ label: __( 'Editor preferences' ),
callback: ( { close } ) => {
- switchEditorMode( editorMode === 'visual' ? 'text' : 'visual' );
close();
+ openModal( 'editor/preferences' );
},
} );
- }
- commands.push( {
- name: 'core/toggle-breadcrumbs',
- label: showBlockBreadcrumbs
- ? __( 'Hide block breadcrumbs' )
- : __( 'Show block breadcrumbs' ),
- callback: ( { close } ) => {
- toggle( 'core', 'showBlockBreadcrumbs' );
- close();
- createInfoNotice(
- showBlockBreadcrumbs
- ? __( 'Breadcrumbs hidden.' )
- : __( 'Breadcrumbs visible.' ),
- {
- id: 'core/editor/toggle-breadcrumbs/notice',
- type: 'snackbar',
- }
- );
- },
- } );
+ commands.push( {
+ name: 'core/toggle-spotlight-mode',
+ label: isFocusMode
+ ? __( 'Exit Spotlight mode' )
+ : __( 'Enter Spotlight mode' ),
+ callback: ( { close } ) => {
+ toggleSpotlightMode();
+ close();
+ },
+ } );
- commands.push( {
- name: 'core/open-settings-sidebar',
- label: __( 'Show or hide the Settings panel.' ),
- icon: isRTL() ? drawerLeft : drawerRight,
- callback: ( { close } ) => {
- const activeSidebar = getActiveComplementaryArea( 'core' );
- close();
- if ( activeSidebar === 'edit-post/document' ) {
- disableComplementaryArea( 'core' );
- } else {
- enableComplementaryArea( 'core', 'edit-post/document' );
- }
- },
- } );
+ commands.push( {
+ name: 'core/toggle-list-view',
+ label: isListViewOpen
+ ? __( 'Close List View' )
+ : __( 'Open List View' ),
+ icon: listView,
+ callback: ( { close } ) => {
+ setIsListViewOpened( ! isListViewOpen );
+ close();
+ createInfoNotice(
+ isListViewOpen
+ ? __( 'List View off.' )
+ : __( 'List View on.' ),
+ {
+ id: 'core/editor/toggle-list-view/notice',
+ type: 'snackbar',
+ }
+ );
+ },
+ } );
- commands.push( {
- name: 'core/open-block-inspector',
- label: __( 'Show or hide the Block settings panel' ),
- icon: blockDefault,
- callback: ( { close } ) => {
- const activeSidebar = getActiveComplementaryArea( 'core' );
- close();
- if ( activeSidebar === 'edit-post/block' ) {
- disableComplementaryArea( 'core' );
- } else {
- enableComplementaryArea( 'core', 'edit-post/block' );
- }
- },
- } );
+ commands.push( {
+ name: 'core/toggle-top-toolbar',
+ label: __( 'Top toolbar' ),
+ callback: ( { close } ) => {
+ toggleTopToolbar();
+ close();
+ },
+ } );
- commands.push( {
- name: 'core/toggle-publish-sidebar',
- label: isPublishSidebarEnabled
- ? __( 'Disable pre-publish checks' )
- : __( 'Enable pre-publish checks' ),
- icon: formatListBullets,
- callback: ( { close } ) => {
- close();
- toggle( 'core', 'isPublishSidebarEnabled' );
- createInfoNotice(
- isPublishSidebarEnabled
- ? __( 'Pre-publish checks disabled.' )
- : __( 'Pre-publish checks enabled.' ),
- {
- id: 'core/editor/publish-sidebar/notice',
- type: 'snackbar',
- }
- );
- },
- } );
+ if ( allowSwitchEditorMode ) {
+ commands.push( {
+ name: 'core/toggle-code-editor',
+ label:
+ editorMode === 'visual'
+ ? __( 'Open code editor' )
+ : __( 'Exit code editor' ),
+ icon: code,
+ callback: ( { close } ) => {
+ switchEditorMode(
+ editorMode === 'visual' ? 'text' : 'visual'
+ );
+ close();
+ },
+ } );
+ }
- if ( isViewable ) {
commands.push( {
- name: 'core/preview-link',
- label: __( 'Preview in a new tab' ),
- icon: external,
- callback: async ( { close } ) => {
+ name: 'core/toggle-breadcrumbs',
+ label: showBlockBreadcrumbs
+ ? __( 'Hide block breadcrumbs' )
+ : __( 'Show block breadcrumbs' ),
+ callback: ( { close } ) => {
+ toggle( 'core', 'showBlockBreadcrumbs' );
close();
- const postId = getCurrentPostId();
- const link = await __unstableSaveForPreview();
- window.open( link, `wp-preview-${ postId }` );
+ createInfoNotice(
+ showBlockBreadcrumbs
+ ? __( 'Breadcrumbs hidden.' )
+ : __( 'Breadcrumbs visible.' ),
+ {
+ id: 'core/editor/toggle-breadcrumbs/notice',
+ type: 'snackbar',
+ }
+ );
},
} );
- }
-
- return {
- commands,
- isLoading: false,
- };
-}
-function useEditedEntityContextualCommands() {
- const { postType } = useSelect( ( select ) => {
- const { getCurrentPostType } = select( editorStore );
- return {
- postType: getCurrentPostType(),
- };
- }, [] );
- const { openModal } = useDispatch( interfaceStore );
- const commands = [];
+ commands.push( {
+ name: 'core/open-settings-sidebar',
+ label: __( 'Show or hide the Settings panel.' ),
+ icon: isRTL() ? drawerLeft : drawerRight,
+ callback: ( { close } ) => {
+ const activeSidebar = getActiveComplementaryArea( 'core' );
+ close();
+ if ( activeSidebar === 'edit-post/document' ) {
+ disableComplementaryArea( 'core' );
+ } else {
+ enableComplementaryArea( 'core', 'edit-post/document' );
+ }
+ },
+ } );
- if ( postType === PATTERN_POST_TYPE ) {
commands.push( {
- name: 'core/rename-pattern',
- label: __( 'Rename pattern' ),
- icon: edit,
+ name: 'core/open-block-inspector',
+ label: __( 'Show or hide the Block settings panel' ),
+ icon: blockDefault,
callback: ( { close } ) => {
- openModal( patternRenameModalName );
+ const activeSidebar = getActiveComplementaryArea( 'core' );
close();
+ if ( activeSidebar === 'edit-post/block' ) {
+ disableComplementaryArea( 'core' );
+ } else {
+ enableComplementaryArea( 'core', 'edit-post/block' );
+ }
},
} );
+
commands.push( {
- name: 'core/duplicate-pattern',
- label: __( 'Duplicate pattern' ),
- icon: symbol,
+ name: 'core/toggle-publish-sidebar',
+ label: isPublishSidebarEnabled
+ ? __( 'Disable pre-publish checks' )
+ : __( 'Enable pre-publish checks' ),
+ icon: formatListBullets,
callback: ( { close } ) => {
- openModal( patternDuplicateModalName );
close();
+ toggle( 'core', 'isPublishSidebarEnabled' );
+ createInfoNotice(
+ isPublishSidebarEnabled
+ ? __( 'Pre-publish checks disabled.' )
+ : __( 'Pre-publish checks enabled.' ),
+ {
+ id: 'core/editor/publish-sidebar/notice',
+ type: 'snackbar',
+ }
+ );
},
} );
- }
- return { isLoading: false, commands };
-}
+ if ( isViewable ) {
+ commands.push( {
+ name: 'core/preview-link',
+ label: __( 'Preview in a new tab' ),
+ icon: external,
+ callback: async ( { close } ) => {
+ close();
+ const postId = getCurrentPostId();
+ const link = await __unstableSaveForPreview();
+ window.open( link, `wp-preview-${ postId }` );
+ },
+ } );
+ }
+
+ return {
+ commands,
+ isLoading: false,
+ };
+ };
+
+const getEditedEntityContextualCommands = () =>
+ function useEditedEntityContextualCommands() {
+ const { postType } = useSelect( ( select ) => {
+ const { getCurrentPostType } = select( editorStore );
+ return {
+ postType: getCurrentPostType(),
+ };
+ }, [] );
+ const { openModal } = useDispatch( interfaceStore );
+ const commands = [];
+
+ if ( postType === PATTERN_POST_TYPE ) {
+ commands.push( {
+ name: 'core/rename-pattern',
+ label: __( 'Rename pattern' ),
+ icon: edit,
+ callback: ( { close } ) => {
+ openModal( patternRenameModalName );
+ close();
+ },
+ } );
+ commands.push( {
+ name: 'core/duplicate-pattern',
+ label: __( 'Duplicate pattern' ),
+ icon: symbol,
+ callback: ( { close } ) => {
+ openModal( patternDuplicateModalName );
+ close();
+ },
+ } );
+ }
+
+ return { isLoading: false, commands };
+ };
export default function useCommands() {
useCommandLoader( {
name: 'core/editor/edit-ui',
- hook: useEditorCommandLoader,
+ hook: getEditorCommandLoader(),
} );
useCommandLoader( {
name: 'core/editor/contextual-commands',
- hook: useEditedEntityContextualCommands,
+ hook: getEditedEntityContextualCommands(),
context: 'entity-edit',
} );
}