From df307a20ce048e749e00718a55499a20b8169ec0 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 26 Jul 2023 18:50:44 +0300 Subject: [PATCH 1/2] [Core Commands]: Pass options to `useCommands` --- .../src/admin-navigation-commands.js | 20 ++++++------------- packages/core-commands/src/private-apis.js | 12 ++++++++--- .../src/site-editor-navigation-commands.js | 11 ++++++---- packages/edit-post/src/editor.js | 9 ++++++++- .../edit-site/src/components/layout/index.js | 13 ++++++++++-- 5 files changed, 41 insertions(+), 24 deletions(-) diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js index 2a189c1c7404dd..c73a94961b4e9a 100644 --- a/packages/core-commands/src/admin-navigation-commands.js +++ b/packages/core-commands/src/admin-navigation-commands.js @@ -16,22 +16,14 @@ import { unlock } from './lock-unlock'; const { useHistory } = unlock( routerPrivateApis ); -export function useAdminNavigationCommands() { +export function useAdminNavigationCommands( options ) { const history = useHistory(); + const { isBlockTheme } = options; - const { isBlockTheme, canAccessSiteEditor } = useSelect( ( select ) => { - return { - isBlockTheme: - // To avoid making core-commands dependent on block-editor using store string literal name. - // eslint-disable-next-line @wordpress/data-no-store-string-literals - select( 'core/block-editor' )?.getSettings() - .__unstableIsBlockBasedTheme, - canAccessSiteEditor: select( coreStore ).canUser( - 'read', - 'templates' - ), - }; - }, [] ); + const canAccessSiteEditor = useSelect( + ( select ) => select( coreStore ).canUser( 'read', 'templates' ), + [] + ); const isSiteEditor = getPath( window.location.href )?.includes( 'site-editor.php' diff --git a/packages/core-commands/src/private-apis.js b/packages/core-commands/src/private-apis.js index de5b0de197600f..9ce82a8a67067e 100644 --- a/packages/core-commands/src/private-apis.js +++ b/packages/core-commands/src/private-apis.js @@ -5,9 +5,15 @@ import { useAdminNavigationCommands } from './admin-navigation-commands'; import { useSiteEditorNavigationCommands } from './site-editor-navigation-commands'; import { lock } from './lock-unlock'; -function useCommands() { - useAdminNavigationCommands(); - useSiteEditorNavigationCommands(); +/** + * @typedef CommandOptions + * + * @property {boolean} [isBlockTheme] Whether the current theme is a block theme. + */ + +function useCommands( options = {} ) { + useAdminNavigationCommands( options ); + useSiteEditorNavigationCommands( options ); } export const privateApis = {}; diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js index fe562b6e441396..166b270b6b49ef 100644 --- a/packages/core-commands/src/site-editor-navigation-commands.js +++ b/packages/core-commands/src/site-editor-navigation-commands.js @@ -118,13 +118,16 @@ const useTemplateNavigationCommandLoader = const useTemplatePartNavigationCommandLoader = getNavigationCommandLoaderPerPostType( 'wp_template_part' ); -function useSiteEditorBasicNavigationCommands() { +function useSiteEditorBasicNavigationCommands( options ) { const history = useHistory(); const isSiteEditor = getPath( window.location.href )?.includes( 'site-editor.php' ); const commands = useMemo( () => { const result = []; + if ( ! options.isBlockTheme ) { + return result; + } result.push( { name: 'core/edit-site/open-navigation', label: __( 'Open navigation' ), @@ -198,7 +201,7 @@ function useSiteEditorBasicNavigationCommands() { } ); return result; - }, [ history, isSiteEditor ] ); + }, [ history, isSiteEditor, options.isBlockTheme ] ); return { commands, @@ -206,7 +209,7 @@ function useSiteEditorBasicNavigationCommands() { }; } -export function useSiteEditorNavigationCommands() { +export function useSiteEditorNavigationCommands( options ) { useCommandLoader( { name: 'core/edit-site/navigate-pages', hook: usePageNavigationCommandLoader, @@ -225,7 +228,7 @@ export function useSiteEditorNavigationCommands() { } ); useCommandLoader( { name: 'core/edit-site/basic-navigation', - hook: useSiteEditorBasicNavigationCommands, + hook: useSiteEditorBasicNavigationCommands.bind( null, options ), context: 'site-editor', } ); } diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index 00bc911dd7626e..2d5185517c481a 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { store as blocksStore } from '@wordpress/blocks'; +import { store as blockEditorStore } from '@wordpress/block-editor'; import { useSelect, useDispatch } from '@wordpress/data'; import { ErrorBoundary, @@ -30,8 +31,14 @@ const { ExperimentalEditorProvider } = unlock( editorPrivateApis ); const { useCommands } = unlock( coreCommandsPrivateApis ); function Editor( { postId, postType, settings, initialEdits, ...props } ) { - useCommands(); useCommonCommands(); + const isBlockTheme = useSelect( + ( select ) => + select( blockEditorStore ).getSettings() + .__unstableIsBlockBasedTheme, + [] + ); + useCommands( { isBlockTheme } ); const { hasFixedToolbar, focusMode, diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 1a1c2f3a3830a2..e8420d84d49108 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -26,7 +26,10 @@ import { privateApis as commandsPrivateApis, } from '@wordpress/commands'; import { store as preferencesStore } from '@wordpress/preferences'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { + store as blockEditorStore, + privateApis as blockEditorPrivateApis, +} from '@wordpress/block-editor'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands'; @@ -63,7 +66,13 @@ export default function Layout() { // This ensures the edited entity id and type are initialized properly. useInitEditedEntityFromURL(); useSyncCanvasModeWithURL(); - useCommands(); + const isBlockTheme = useSelect( + ( select ) => + select( blockEditorStore ).getSettings() + .__unstableIsBlockBasedTheme, + [] + ); + useCommands( { isBlockTheme } ); useEditModeCommands(); useCommonCommands(); From ea4c8fdf1b2c6ee4dd9aea2f890588aad8ac109f Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 27 Jul 2023 11:31:23 +0300 Subject: [PATCH 2/2] add block editor dep --- package-lock.json | 1 + packages/core-commands/package.json | 1 + .../src/admin-navigation-commands.js | 20 +++++-------------- packages/core-commands/src/hooks.js | 16 +++++++++++++++ packages/core-commands/src/private-apis.js | 12 +++-------- .../src/site-editor-navigation-commands.js | 13 +++++++----- packages/edit-post/src/editor.js | 9 +-------- .../edit-site/src/components/layout/index.js | 13 ++---------- 8 files changed, 37 insertions(+), 48 deletions(-) create mode 100644 packages/core-commands/src/hooks.js diff --git a/package-lock.json b/package-lock.json index 0687de2ca68ce4..2b31b6f51e9008 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17512,6 +17512,7 @@ "version": "file:packages/core-commands", "requires": { "@babel/runtime": "^7.16.0", + "@wordpress/block-editor": "file:packages/block-editor", "@wordpress/commands": "file:packages/commands", "@wordpress/core-data": "file:packages/core-data", "@wordpress/data": "file:packages/data", diff --git a/packages/core-commands/package.json b/packages/core-commands/package.json index 808a0a32e8c52e..c6cc52454b4b41 100644 --- a/packages/core-commands/package.json +++ b/packages/core-commands/package.json @@ -27,6 +27,7 @@ "sideEffects": false, "dependencies": { "@babel/runtime": "^7.16.0", + "@wordpress/block-editor": "file:../block-editor", "@wordpress/commands": "file:../commands", "@wordpress/core-data": "file:../core-data", "@wordpress/data": "file:../data", diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js index c73a94961b4e9a..a50378c8fe11b2 100644 --- a/packages/core-commands/src/admin-navigation-commands.js +++ b/packages/core-commands/src/admin-navigation-commands.js @@ -4,26 +4,20 @@ import { useCommand } from '@wordpress/commands'; import { __ } from '@wordpress/i18n'; import { external, plus, symbol } from '@wordpress/icons'; -import { useSelect } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; import { addQueryArgs, getPath } from '@wordpress/url'; import { privateApis as routerPrivateApis } from '@wordpress/router'; /** * Internal dependencies */ +import { useIsSiteEditorAccessible } from './hooks'; import { unlock } from './lock-unlock'; const { useHistory } = unlock( routerPrivateApis ); -export function useAdminNavigationCommands( options ) { +export function useAdminNavigationCommands() { const history = useHistory(); - const { isBlockTheme } = options; - - const canAccessSiteEditor = useSelect( - ( select ) => select( coreStore ).canUser( 'read', 'templates' ), - [] - ); + const isSiteEditorAccessible = useIsSiteEditorAccessible(); const isSiteEditor = getPath( window.location.href )?.includes( 'site-editor.php' @@ -49,20 +43,16 @@ export function useAdminNavigationCommands( options ) { name: 'core/manage-reusable-blocks', label: __( 'Open patterns' ), callback: ( { close } ) => { - if ( - ( ! isSiteEditor && ! isBlockTheme ) || - ! canAccessSiteEditor - ) { + if ( ! isSiteEditorAccessible ) { document.location.href = 'edit.php?post_type=wp_block'; } else { const args = { path: '/patterns', }; - const targetUrl = addQueryArgs( 'site-editor.php', args ); if ( isSiteEditor ) { history.push( args ); } else { - document.location = targetUrl; + document.location = addQueryArgs( 'site-editor.php', args ); } close(); } diff --git a/packages/core-commands/src/hooks.js b/packages/core-commands/src/hooks.js new file mode 100644 index 00000000000000..d26eb4211df867 --- /dev/null +++ b/packages/core-commands/src/hooks.js @@ -0,0 +1,16 @@ +/** + * WordPress dependencies + */ +import { store as blockEditorStore } from '@wordpress/block-editor'; +import { store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; + +export function useIsSiteEditorAccessible() { + return useSelect( + ( select ) => + select( blockEditorStore ).getSettings() + .__unstableIsBlockBasedTheme && + select( coreStore ).canUser( 'read', 'templates' ), + [] + ); +} diff --git a/packages/core-commands/src/private-apis.js b/packages/core-commands/src/private-apis.js index 9ce82a8a67067e..de5b0de197600f 100644 --- a/packages/core-commands/src/private-apis.js +++ b/packages/core-commands/src/private-apis.js @@ -5,15 +5,9 @@ import { useAdminNavigationCommands } from './admin-navigation-commands'; import { useSiteEditorNavigationCommands } from './site-editor-navigation-commands'; import { lock } from './lock-unlock'; -/** - * @typedef CommandOptions - * - * @property {boolean} [isBlockTheme] Whether the current theme is a block theme. - */ - -function useCommands( options = {} ) { - useAdminNavigationCommands( options ); - useSiteEditorNavigationCommands( options ); +function useCommands() { + useAdminNavigationCommands(); + useSiteEditorNavigationCommands(); } export const privateApis = {}; diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js index 166b270b6b49ef..551c6e1a7a1d0b 100644 --- a/packages/core-commands/src/site-editor-navigation-commands.js +++ b/packages/core-commands/src/site-editor-navigation-commands.js @@ -20,6 +20,7 @@ import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url'; /** * Internal dependencies */ +import { useIsSiteEditorAccessible } from './hooks'; import { unlock } from './lock-unlock'; const { useHistory } = unlock( routerPrivateApis ); @@ -118,14 +119,16 @@ const useTemplateNavigationCommandLoader = const useTemplatePartNavigationCommandLoader = getNavigationCommandLoaderPerPostType( 'wp_template_part' ); -function useSiteEditorBasicNavigationCommands( options ) { +function useSiteEditorBasicNavigationCommands() { const history = useHistory(); const isSiteEditor = getPath( window.location.href )?.includes( 'site-editor.php' ); + const isSiteEditorAccessible = useIsSiteEditorAccessible(); const commands = useMemo( () => { const result = []; - if ( ! options.isBlockTheme ) { + + if ( ! isSiteEditorAccessible ) { return result; } result.push( { @@ -201,7 +204,7 @@ function useSiteEditorBasicNavigationCommands( options ) { } ); return result; - }, [ history, isSiteEditor, options.isBlockTheme ] ); + }, [ history, isSiteEditor, isSiteEditorAccessible ] ); return { commands, @@ -209,7 +212,7 @@ function useSiteEditorBasicNavigationCommands( options ) { }; } -export function useSiteEditorNavigationCommands( options ) { +export function useSiteEditorNavigationCommands() { useCommandLoader( { name: 'core/edit-site/navigate-pages', hook: usePageNavigationCommandLoader, @@ -228,7 +231,7 @@ export function useSiteEditorNavigationCommands( options ) { } ); useCommandLoader( { name: 'core/edit-site/basic-navigation', - hook: useSiteEditorBasicNavigationCommands.bind( null, options ), + hook: useSiteEditorBasicNavigationCommands, context: 'site-editor', } ); } diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index 2d5185517c481a..00bc911dd7626e 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { store as blocksStore } from '@wordpress/blocks'; -import { store as blockEditorStore } from '@wordpress/block-editor'; import { useSelect, useDispatch } from '@wordpress/data'; import { ErrorBoundary, @@ -31,14 +30,8 @@ const { ExperimentalEditorProvider } = unlock( editorPrivateApis ); const { useCommands } = unlock( coreCommandsPrivateApis ); function Editor( { postId, postType, settings, initialEdits, ...props } ) { + useCommands(); useCommonCommands(); - const isBlockTheme = useSelect( - ( select ) => - select( blockEditorStore ).getSettings() - .__unstableIsBlockBasedTheme, - [] - ); - useCommands( { isBlockTheme } ); const { hasFixedToolbar, focusMode, diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index e8420d84d49108..1a1c2f3a3830a2 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -26,10 +26,7 @@ import { privateApis as commandsPrivateApis, } from '@wordpress/commands'; import { store as preferencesStore } from '@wordpress/preferences'; -import { - store as blockEditorStore, - privateApis as blockEditorPrivateApis, -} from '@wordpress/block-editor'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands'; @@ -66,13 +63,7 @@ export default function Layout() { // This ensures the edited entity id and type are initialized properly. useInitEditedEntityFromURL(); useSyncCanvasModeWithURL(); - const isBlockTheme = useSelect( - ( select ) => - select( blockEditorStore ).getSettings() - .__unstableIsBlockBasedTheme, - [] - ); - useCommands( { isBlockTheme } ); + useCommands(); useEditModeCommands(); useCommonCommands();