From cd358e4f457a7b182b76c540dcff6c7ab6d3350b Mon Sep 17 00:00:00 2001 From: Ramon Date: Fri, 22 Sep 2023 11:25:26 +1000 Subject: [PATCH] Site editor: use constants rather than hard coded template strings (round 3) (#54705) * Another round of replacing hard-coded strings with available constants * Update E2E test selector match the label --- .../block-editor-provider/index.js | 3 +- .../settings-header/index.js | 11 +++----- .../template-panel/pattern-categories.js | 7 ++++- .../sidebar-navigation-screen-pages/index.js | 4 +-- .../home-template-details.js | 3 +- .../index.js | 8 ++++-- .../index.js | 7 +++-- .../start-template-options/index.js | 3 +- .../use-init-edited-entity-from-url.js | 14 +++++++--- .../use-sync-path-with-url.js | 11 ++++++-- .../src/components/template-actions/index.js | 3 +- .../hooks/commands/use-edit-mode-commands.js | 7 +++-- packages/edit-site/src/store/actions.js | 28 ++++++++++++------- .../specs/site-editor/writing-flow.spec.js | 2 +- 14 files changed, 71 insertions(+), 40 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/block-editor-provider/index.js b/packages/edit-site/src/components/block-editor/block-editor-provider/index.js index 36c7c72066a88d..ab07a3fefc5d31 100644 --- a/packages/edit-site/src/components/block-editor/block-editor-provider/index.js +++ b/packages/edit-site/src/components/block-editor/block-editor-provider/index.js @@ -9,13 +9,14 @@ import { useSelect } from '@wordpress/data'; import { store as editSiteStore } from '../../../store'; import DefaultBlockEditorProvider from './default-block-editor-provider'; import NavigationBlockEditorProvider from './navigation-block-editor-provider'; +import { NAVIGATION_POST_TYPE } from '../../../utils/constants'; export default function BlockEditorProvider( { children } ) { const entityType = useSelect( ( select ) => select( editSiteStore ).getEditedPostType(), [] ); - if ( entityType === 'wp_navigation' ) { + if ( entityType === NAVIGATION_POST_TYPE ) { return ( { children } diff --git a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js index 7bc951524e7e5c..569bad72ad7ef9 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/settings-header/index.js @@ -17,12 +17,7 @@ import { store as interfaceStore } from '@wordpress/interface'; import { STORE_NAME } from '../../../store/constants'; import { SIDEBAR_BLOCK, SIDEBAR_TEMPLATE } from '../constants'; import { store as editSiteStore } from '../../../store'; - -const entityLabels = { - wp_navigation: __( 'Navigation' ), - wp_block: __( 'Pattern' ), - wp_template: __( 'Template' ), -}; +import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../../utils/constants'; const SettingsHeader = ( { sidebarName } ) => { const { hasPageContentFocus, entityType } = useSelect( ( select ) => { @@ -35,7 +30,9 @@ const SettingsHeader = ( { sidebarName } ) => { }; } ); - const entityLabel = entityLabels[ entityType ] || entityLabels.wp_template; + const entityLabel = + POST_TYPE_LABELS[ entityType ] || + POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]; const { enableComplementaryArea } = useDispatch( interfaceStore ); const openTemplateSettings = () => diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js index 388094576789d6..f77db11c6cd596 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/pattern-categories.js @@ -10,6 +10,11 @@ import { useDebounce } from '@wordpress/compose'; import { store as noticesStore } from '@wordpress/notices'; import { decodeEntities } from '@wordpress/html-entities'; +/** + * Internal dependencies + */ +import { PATTERN_TYPES } from '../../../utils/constants'; + export const unescapeString = ( arg ) => { return decodeEntities( arg ); }; @@ -171,7 +176,7 @@ export default function PatternCategories( { post } ) { } function onUpdateTerms( newTermIds ) { - editEntityRecord( 'postType', 'wp_block', post.id, { + editEntityRecord( 'postType', PATTERN_TYPES.user, post.id, { wp_pattern_category: newTermIds, } ); } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js index 097be9db72f93f..4d143235e9597e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-pages/index.js @@ -168,7 +168,7 @@ export default function SidebarNavigationScreenPages() { ) } { isHomePageBlog && homeTemplate && ( { dynamicPageTemplates?.map( ( item ) => ( { const linkInfo = useLink( { @@ -32,7 +33,7 @@ export default function SidebarNavigationScreenTemplates() { const { records: templates, isResolving: isLoading } = useEntityRecords( 'postType', - 'wp_template', + TEMPLATE_POST_TYPE, { per_page: -1, } @@ -54,7 +55,7 @@ export default function SidebarNavigationScreenTemplates() { actions={ canCreate && ( ( { if ( postType && postId ) { switch ( postType ) { - case 'wp_template': + case TEMPLATE_POST_TYPE: setTemplate( postId ); break; - case 'wp_template_part': + case TEMPLATE_PART_POST_TYPE: setTemplatePart( postId ); break; - case 'wp_navigation': + case NAVIGATION_POST_TYPE: setNavigationMenu( postId ); break; - case 'wp_block': + case PATTERN_TYPES.user: setEditedEntity( postType, postId ); break; default: diff --git a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js index 86928c1920a948..5f176dff8198d3 100644 --- a/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js +++ b/packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js @@ -9,6 +9,11 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; * Internal dependencies */ import { unlock } from '../../lock-unlock'; +import { + TEMPLATE_POST_TYPE, + TEMPLATE_PART_POST_TYPE, + PATTERN_TYPES, +} from '../../utils/constants'; const { useLocation, useHistory } = unlock( routerPrivateApis ); @@ -18,9 +23,9 @@ export function getPathFromURL( urlParams ) { // Compute the navigator path based on the URL params. if ( urlParams?.postType && urlParams?.postId ) { switch ( urlParams.postType ) { - case 'wp_block': - case 'wp_template': - case 'wp_template_part': + case PATTERN_TYPES.user: + case TEMPLATE_POST_TYPE: + case TEMPLATE_PART_POST_TYPE: case 'page': path = `/${ encodeURIComponent( urlParams.postType diff --git a/packages/edit-site/src/components/template-actions/index.js b/packages/edit-site/src/components/template-actions/index.js index 2084d72ce9f8eb..f48e69245da1fe 100644 --- a/packages/edit-site/src/components/template-actions/index.js +++ b/packages/edit-site/src/components/template-actions/index.js @@ -22,6 +22,7 @@ import { store as editSiteStore } from '../../store'; import isTemplateRemovable from '../../utils/is-template-removable'; import isTemplateRevertable from '../../utils/is-template-revertable'; import RenameMenuItem from './rename-menu-item'; +import { TEMPLATE_POST_TYPE } from '../../utils/constants'; export default function TemplateActions( { postType, @@ -68,7 +69,7 @@ export default function TemplateActions( { ); } catch ( error ) { const fallbackErrorMessage = - template.type === 'wp_template' + template.type === TEMPLATE_POST_TYPE ? __( 'An error occurred while reverting the template.' ) : __( 'An error occurred while reverting the template part.' 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 76c7eea5137439..a10d518d53644b 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 @@ -33,6 +33,7 @@ import isTemplateRevertable from '../../utils/is-template-revertable'; import { KEYBOARD_SHORTCUT_HELP_MODAL_NAME } from '../../components/keyboard-shortcut-help-modal'; import { PREFERENCES_MODAL_NAME } from '../../components/preferences-modal'; import { unlock } from '../../lock-unlock'; +import { TEMPLATE_POST_TYPE } from '../../utils/constants'; const { useHistory } = unlock( routerPrivateApis ); @@ -131,7 +132,7 @@ function useManipulateDocumentCommands() { if ( isTemplateRevertable( template ) && ! hasPageContentFocus ) { const label = - template.type === 'wp_template' + template.type === TEMPLATE_POST_TYPE ? /* translators: %1$s: template title */ sprintf( 'Reset template: %s', @@ -155,7 +156,7 @@ function useManipulateDocumentCommands() { if ( isTemplateRemovable( template ) && ! hasPageContentFocus ) { const label = - template.type === 'wp_template' + template.type === TEMPLATE_POST_TYPE ? /* translators: %1$s: template title */ sprintf( 'Delete template: %s', @@ -167,7 +168,7 @@ function useManipulateDocumentCommands() { decodeEntities( template.title ) ); const path = - template.type === 'wp_template' + template.type === TEMPLATE_POST_TYPE ? '/wp_template' : '/wp_template_part/all'; commands.push( { diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index 61569482c69dbf..ce698a757f6bb3 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -19,7 +19,11 @@ import { decodeEntities } from '@wordpress/html-entities'; */ import { STORE_NAME as editSiteStoreName } from './constants'; import isTemplateRevertable from '../utils/is-template-revertable'; - +import { + TEMPLATE_POST_TYPE, + TEMPLATE_PART_POST_TYPE, + NAVIGATION_POST_TYPE, +} from '../utils/constants'; /** * Dispatches an action that toggles a feature flag. * @@ -67,14 +71,18 @@ export const setTemplate = try { const template = await registry .resolveSelect( coreStore ) - .getEntityRecord( 'postType', 'wp_template', templateId ); + .getEntityRecord( + 'postType', + TEMPLATE_POST_TYPE, + templateId + ); templateSlug = template?.slug; } catch ( error ) {} } dispatch( { type: 'SET_EDITED_POST', - postType: 'wp_template', + postType: TEMPLATE_POST_TYPE, id: templateId, context: { templateSlug }, } ); @@ -92,14 +100,14 @@ export const addTemplate = async ( { dispatch, registry } ) => { const newTemplate = await registry .dispatch( coreStore ) - .saveEntityRecord( 'postType', 'wp_template', template ); + .saveEntityRecord( 'postType', TEMPLATE_POST_TYPE, template ); if ( template.content ) { registry .dispatch( coreStore ) .editEntityRecord( 'postType', - 'wp_template', + TEMPLATE_POST_TYPE, newTemplate.id, { blocks: parse( template.content ) }, { undoIgnore: true } @@ -108,7 +116,7 @@ export const addTemplate = dispatch( { type: 'SET_EDITED_POST', - postType: 'wp_template', + postType: TEMPLATE_POST_TYPE, id: newTemplate.id, context: { templateSlug: newTemplate.slug }, } ); @@ -178,7 +186,7 @@ export const removeTemplate = export function setTemplatePart( templatePartId ) { return { type: 'SET_EDITED_POST', - postType: 'wp_template_part', + postType: TEMPLATE_PART_POST_TYPE, id: templatePartId, }; } @@ -193,7 +201,7 @@ export function setTemplatePart( templatePartId ) { export function setNavigationMenu( navigationMenuId ) { return { type: 'SET_EDITED_POST', - postType: 'wp_navigation', + postType: NAVIGATION_POST_TYPE, id: navigationMenuId, }; } @@ -282,7 +290,7 @@ export const setPage = const currentTemplate = ( await registry .resolveSelect( coreStore ) - .getEntityRecords( 'postType', 'wp_template', { + .getEntityRecords( 'postType', TEMPLATE_POST_TYPE, { per_page: -1, } ) )?.find( ( { slug } ) => slug === currentTemplateSlug ); @@ -305,7 +313,7 @@ export const setPage = dispatch( { type: 'SET_EDITED_POST', - postType: 'wp_template', + postType: TEMPLATE_POST_TYPE, id: template.id, context: { ...page.context, diff --git a/test/e2e/specs/site-editor/writing-flow.spec.js b/test/e2e/specs/site-editor/writing-flow.spec.js index d9c63a1da1ddc5..a2e05f0f0a463a 100644 --- a/test/e2e/specs/site-editor/writing-flow.spec.js +++ b/test/e2e/specs/site-editor/writing-flow.spec.js @@ -66,7 +66,7 @@ test.describe( 'Site editor writing flow', () => { // Tab to the inspector, tabbing three times to go past the two resize handles. await pageUtils.pressKeys( 'Tab', { times: 3 } ); const inspectorTemplateTab = page.locator( - 'role=region[name="Editor settings"i] >> role=button[name="Template"i]' + 'role=region[name="Editor settings"i] >> role=button[name="Template Part"i]' ); await expect( inspectorTemplateTab ).toBeFocused(); } );