From 494985e83cc9a883ce794d107e19da606bf8f0ff Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Wed, 30 Aug 2023 14:41:52 +0900 Subject: [PATCH] Site Editor: Publish Patterns page to non-block themes --- .../src/admin-navigation-commands.js | 40 +------------------ .../src/site-editor-navigation-commands.js | 21 +++++++++- .../src/components/add-new-pattern/index.js | 12 +++--- .../index.js | 21 ++++++++-- .../index.js | 9 ----- 5 files changed, 43 insertions(+), 60 deletions(-) diff --git a/packages/core-commands/src/admin-navigation-commands.js b/packages/core-commands/src/admin-navigation-commands.js index 0ba4df82920d9a..0ffa7ba7eb6285 100644 --- a/packages/core-commands/src/admin-navigation-commands.js +++ b/packages/core-commands/src/admin-navigation-commands.js @@ -3,27 +3,9 @@ */ import { useCommand } from '@wordpress/commands'; import { __ } from '@wordpress/i18n'; -import { plus, symbol } from '@wordpress/icons'; -import { addQueryArgs, getPath } from '@wordpress/url'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; - -/** - * Internal dependencies - */ -import { useIsTemplatesAccessible, useIsBlockBasedTheme } from './hooks'; -import { unlock } from './lock-unlock'; - -const { useHistory } = unlock( routerPrivateApis ); +import { plus } from '@wordpress/icons'; export function useAdminNavigationCommands() { - const history = useHistory(); - const isTemplatesAccessible = useIsTemplatesAccessible(); - const isBlockBasedTheme = useIsBlockBasedTheme(); - - const isSiteEditor = getPath( window.location.href )?.includes( - 'site-editor.php' - ); - useCommand( { name: 'core/add-new-post', label: __( 'Add new post' ), @@ -40,24 +22,4 @@ export function useAdminNavigationCommands() { document.location.href = 'post-new.php?post_type=page'; }, } ); - useCommand( { - name: 'core/manage-reusable-blocks', - label: __( 'Patterns' ), - icon: symbol, - callback: ( { close } ) => { - if ( isTemplatesAccessible && isBlockBasedTheme ) { - const args = { - path: '/patterns', - }; - if ( isSiteEditor ) { - history.push( args ); - } else { - document.location = addQueryArgs( 'site-editor.php', args ); - } - close(); - } else { - document.location.href = 'edit.php?post_type=wp_block'; - } - }, - } ); } diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js index f60a8af7d39a01..6915dea8cdb403 100644 --- a/packages/core-commands/src/site-editor-navigation-commands.js +++ b/packages/core-commands/src/site-editor-navigation-commands.js @@ -10,6 +10,7 @@ import { post, page, layout, + symbol, symbolFilled, styles, navigation, @@ -224,7 +225,25 @@ function useSiteEditorBasicNavigationCommands() { const isTemplatesAccessible = useIsTemplatesAccessible(); const isBlockBasedTheme = useIsBlockBasedTheme(); const commands = useMemo( () => { - const result = []; + const result = [ + { + name: 'core/edit-site/open-patterns', + label: __( 'Patterns' ), + icon: symbol, + callback: ( { close } ) => { + const args = { + path: '/patterns', + }; + const targetUrl = addQueryArgs( 'site-editor.php', args ); + if ( isSiteEditor ) { + history.push( args ); + } else { + document.location = targetUrl; + } + close(); + }, + }, + ]; if ( ! isTemplatesAccessible || ! isBlockBasedTheme ) { return result; diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js index 5e0f1626fc8fd6..9d7119aaab2b87 100644 --- a/packages/edit-site/src/components/add-new-pattern/index.js +++ b/packages/edit-site/src/components/add-new-pattern/index.js @@ -8,6 +8,7 @@ import { plus, symbol, symbolFilled } from '@wordpress/icons'; import { useSelect } from '@wordpress/data'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns'; +import { store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies @@ -15,7 +16,6 @@ import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns'; import CreateTemplatePartModal from '../create-template-part-modal'; import SidebarButton from '../sidebar-button'; import { unlock } from '../../lock-unlock'; -import { store as editSiteStore } from '../../store'; const { useHistory } = unlock( routerPrivateApis ); const { CreatePatternModal } = unlock( editPatternsPrivateApis ); @@ -25,9 +25,9 @@ export default function AddNewPattern() { const [ showPatternModal, setShowPatternModal ] = useState( false ); const [ showTemplatePartModal, setShowTemplatePartModal ] = useState( false ); - const isTemplatePartsMode = useSelect( ( select ) => { - const settings = select( editSiteStore ).getSettings(); - return !! settings.supportsTemplatePartsMode; + + const isBlockBasedTheme = useSelect( ( select ) => { + return select( coreStore ).getCurrentTheme()?.is_block_theme; }, [] ); function handleCreatePattern( { pattern, categoryId } ) { @@ -66,9 +66,7 @@ export default function AddNewPattern() { }, ]; - // Remove condition when command palette issues are resolved. - // See: https://github.com/WordPress/gutenberg/issues/52154. - if ( ! isTemplatePartsMode ) { + if ( isBlockBasedTheme ) { controls.push( { icon: symbolFilled, onClick: () => setShowTemplatePartModal( true ), diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js index 3b6a6a8110f562..4220c42a20cd3c 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js @@ -14,6 +14,8 @@ import { getTemplatePartIcon } from '@wordpress/editor'; import { __, sprintf } from '@wordpress/i18n'; import { getQueryArgs } from '@wordpress/url'; import { file, starFilled, lockSmall } from '@wordpress/icons'; +import { store as coreStore } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -27,6 +29,7 @@ import { useLink } from '../routes/link'; import usePatternCategories from './use-pattern-categories'; import useMyPatterns from './use-my-patterns'; import useTemplatePartAreas from './use-template-part-areas'; +import { store as editSiteStore } from '../../store'; function TemplatePartGroup( { areas, currentArea, currentType } ) { return ( @@ -105,7 +108,14 @@ export default function SidebarNavigationScreenPatterns() { useTemplatePartAreas(); const { patternCategories, hasPatterns } = usePatternCategories(); const { myPatterns } = useMyPatterns(); - + const isBlockBasedTheme = useSelect( + ( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme, + [] + ); + const isTemplatePartsMode = useSelect( ( select ) => { + const settings = select( editSiteStore ).getSettings(); + return !! settings.supportsTemplatePartsMode; + }, [] ); const templatePartsLink = useLink( { path: '/wp_template_part/all' } ); const footer = ! isMobileViewport ? ( @@ -116,14 +126,17 @@ export default function SidebarNavigationScreenPatterns() { > { __( 'Manage all of my patterns' ) } - - { __( 'Manage all template parts' ) } - + { ( isBlockBasedTheme || isTemplatePartsMode ) && ( + + { __( 'Manage all template parts' ) } + + ) } ) : undefined; return ( { - const settings = select( editSiteStore ).getSettings(); - - return !! settings.supportsTemplatePartsMode; - }, [] ); - return (