Site editor: use constants rather than hard coded template strings (r…

…ound 3) (#54705) * Another round of replacing hard-coded strings with available constants * Update E2E test selector match the label
WordPress · Sep 25, 2023 · cd358e4 · cd358e4
1 parent 988971a
commit cd358e4
Show file tree

Hide file tree

Showing 14 changed files with 71 additions and 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
@@ -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 (
 			<NavigationBlockEditorProvider>
 				{ 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
@@ -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
@@ -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
@@ -168,7 +168,7 @@ export default function SidebarNavigationScreenPages() {
 								) }
 								{ isHomePageBlog && homeTemplate && (
 									<PageItem
-										postType="wp_template"
+										postType={ TEMPLATE_POST_TYPE }
 										postId={ homeTemplate.id }
 										key={ homeTemplate.id }
 										icon={ home }
@@ -204,7 +204,7 @@ export default function SidebarNavigationScreenPages() {
 					<VStack spacing={ 0 }>
 						{ dynamicPageTemplates?.map( ( item ) => (
 							<PageItem
-								postType="wp_template"
+								postType={ TEMPLATE_POST_TYPE }
 								postId={ item.id }
 								key={ item.id }
 								icon={ layout }

diff --git a/...ages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js b/...ages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js
@@ -28,6 +28,7 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
 const EMPTY_OBJECT = {};
 
@@ -37,7 +38,7 @@ function TemplateAreaButton( { postId, icon, title } ) {
 		footer,
 	};
 	const linkInfo = useLink( {
-		postType: 'wp_template_part',
+		postType: TEMPLATE_PART_POST_TYPE,
 		postId,
 	} );
 

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/index.js
@@ -10,15 +10,19 @@ import { __experimentalUseNavigator as useNavigator } from '@wordpress/component
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { store as editSiteStore } from '../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
 
 const config = {
-	wp_template: {
+	[ TEMPLATE_POST_TYPE ]: {
 		title: __( 'All templates' ),
 		description: __(
 			'Create new templates, or reset any customizations made to the templates supplied by your theme.'
 		),
 	},
-	wp_template_part: {
+	[ TEMPLATE_PART_POST_TYPE ]: {
 		title: __( 'All template parts' ),
 		description: __(
 			'Create new template parts, or reset any customizations made to the template parts supplied by your theme.'

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -18,6 +18,7 @@ import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import AddNewTemplate from '../add-new-template';
 import SidebarButton from '../sidebar-button';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const TemplateItem = ( { postType, postId, ...props } ) => {
 	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 && (
 					<AddNewTemplate
-						templateType={ 'wp_template' }
+						templateType={ TEMPLATE_POST_TYPE }
 						toggleProps={ {
 							as: SidebarButton,
 						} }
@@ -71,7 +72,7 @@ export default function SidebarNavigationScreenTemplates() {
 							) }
 							{ sortedTemplates.map( ( template ) => (
 								<TemplateItem
-									postType={ 'wp_template' }
+									postType={ TEMPLATE_POST_TYPE }
 									postId={ template.id }
 									key={ template.id }
 									withChevron

diff --git a/packages/edit-site/src/components/start-template-options/index.js b/packages/edit-site/src/components/start-template-options/index.js
@@ -20,6 +20,7 @@ import { store as editSiteStore } from '../../store';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 function useFallbackTemplateContent( slug, isCustom = false ) {
 	const [ templateContent, setTemplateContent ] = useState( '' );
@@ -198,7 +199,7 @@ export default function StartTemplateOptions() {
 				shouldOpenModal:
 					! hasEdits &&
 					'' === templateRecord.content &&
-					'wp_template' === _postType &&
+					TEMPLATE_POST_TYPE === _postType &&
 					! select( preferencesStore ).get(
 						'core/edit-site',
 						'welcomeGuide'

diff --git a/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js
@@ -11,6 +11,12 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES,
+} from '../../utils/constants';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -42,16 +48,16 @@ export default function useInitEditedEntityFromURL() {
 	useEffect( () => {
 		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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();
 	} );