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

…54586) * Initial commit: Follow up on #54484 to consolidate constants * More using constants instead of hard-coded strings * Rename TEMPLATE_CUSTOM_SOURCE to TEMPLATE_ORIGINS * Update packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js Co-authored-by: Kai Hao <[email protected]> --------- Co-authored-by: Kai Hao <[email protected]>
WordPress · Sep 25, 2023 · 988971a · 988971a
1 parent 0d18f06
commit 988971a
Show file tree

Hide file tree

Showing 33 changed files with 183 additions and 78 deletions.
diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -51,8 +51,8 @@ export default function AddNewPattern() {
 
 		history.push( {
 			postId: pattern.id,
-			postType: 'wp_block',
-			categoryType: 'wp_block',
+			postType: PATTERN_TYPES.user,
+			categoryType: PATTERN_TYPES.user,
 			categoryId,
 			canvas: 'edit',
 		} );
@@ -64,7 +64,7 @@ export default function AddNewPattern() {
 		// Navigate to the created template part editor.
 		history.push( {
 			postId: templatePart.id,
-			postType: 'wp_template_part',
+			postType: TEMPLATE_PART_POST_TYPE,
 			canvas: 'edit',
 		} );
 	}

diff --git a/...ite/src/components/block-editor/block-editor-provider/navigation-block-editor-provider.js b/...ite/src/components/block-editor/block-editor-provider/navigation-block-editor-provider.js
@@ -16,6 +16,7 @@ import { createBlock } from '@wordpress/blocks';
 import { unlock } from '../../../lock-unlock';
 import useSiteEditorSettings from '../use-site-editor-settings';
 import { store as editSiteStore } from '../../../store';
+import { NAVIGATION_POST_TYPE } from '../../../utils/constants';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
 
@@ -37,7 +38,7 @@ const noop = () => {};
 export default function NavigationBlockEditorProvider( { children } ) {
 	const defaultSettings = useSiteEditorSettings();
 
-	const navigationMenuId = useEntityId( 'postType', 'wp_navigation' );
+	const navigationMenuId = useEntityId( 'postType', NAVIGATION_POST_TYPE );
 
 	const blocks = useMemo( () => {
 		return [

diff --git a/packages/edit-site/src/components/block-editor/site-editor-canvas.js b/packages/edit-site/src/components/block-editor/site-editor-canvas.js
@@ -22,7 +22,10 @@ import EditorCanvas from './editor-canvas';
 import EditorCanvasContainer from '../editor-canvas-container';
 import useSiteEditorSettings from './use-site-editor-settings';
 import { store as editSiteStore } from '../../store';
-import { FOCUSABLE_ENTITIES } from '../../utils/constants';
+import {
+	FOCUSABLE_ENTITIES,
+	NAVIGATION_POST_TYPE,
+} from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 import PageContentFocusManager from '../page-content-focus-manager';
 
@@ -71,7 +74,7 @@ export default function SiteEditorCanvas() {
 		! isMobileViewport;
 
 	const contentRef = useRef();
-	const isTemplateTypeNavigation = templateType === 'wp_navigation';
+	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
 
 	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
 

diff --git a/packages/edit-site/src/components/create-template-part-modal/index.js b/packages/edit-site/src/components/create-template-part-modal/index.js
@@ -28,7 +28,10 @@ import { serialize } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import { TEMPLATE_PART_AREA_DEFAULT_CATEGORY } from '../../utils/constants';
+import {
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
+} from '../../utils/constants';
 import {
 	useExistingTemplateParts,
 	getUniqueTemplatePartTitle,
@@ -71,7 +74,7 @@ export default function CreateTemplatePartModal( {
 
 			const templatePart = await saveEntityRecord(
 				'postType',
-				'wp_template_part',
+				TEMPLATE_PART_POST_TYPE,
 				{
 					slug: cleanSlug,
 					title: uniqueTitle,

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/index.js b/packages/edit-site/src/components/header-edit-mode/document-actions/index.js
@@ -32,12 +32,19 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import useEditedEntityRecord from '../../use-edited-entity-record';
 import { store as editSiteStore } from '../../../store';
+import {
+	TEMPLATE_POST_TYPE,
+	NAVIGATION_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_TYPES,
+	PATTERN_SYNC_TYPES,
+} from '../../../utils/constants';
 
 const typeLabels = {
-	wp_block: __( 'Editing pattern:' ),
-	wp_navigation: __( 'Editing navigation menu:' ),
-	wp_template: __( 'Editing template:' ),
-	wp_template_part: __( 'Editing template part:' ),
+	[ PATTERN_TYPES.user ]: __( 'Editing pattern:' ),
+	[ NAVIGATION_POST_TYPE ]: __( 'Editing navigation menu:' ),
+	[ TEMPLATE_POST_TYPE ]: __( 'Editing template:' ),
+	[ TEMPLATE_PART_POST_TYPE ]: __( 'Editing template part:' ),
 };
 
 export default function DocumentActions() {
@@ -129,23 +136,25 @@ function TemplateDocumentActions( { className, onBack } ) {
 	}
 
 	let typeIcon = icon;
-	if ( record.type === 'wp_navigation' ) {
+	if ( record.type === NAVIGATION_POST_TYPE ) {
 		typeIcon = navigationIcon;
-	} else if ( record.type === 'wp_block' ) {
+	} else if ( record.type === PATTERN_TYPES.user ) {
 		typeIcon = symbol;
 	}
 
 	return (
 		<BaseDocumentActions
 			className={ classnames( className, {
 				'is-synced-entity':
-					record.wp_pattern_sync_status !== 'unsynced',
+					record.wp_pattern_sync_status !==
+					PATTERN_SYNC_TYPES.unsynced,
 			} ) }
 			icon={ typeIcon }
 			onBack={ onBack }
 		>
 			<VisuallyHidden as="span">
-				{ typeLabels[ record.type ] ?? typeLabels.wp_template }
+				{ typeLabels[ record.type ] ??
+					typeLabels[ TEMPLATE_POST_TYPE ] }
 			</VisuallyHidden>
 			{ getTitle() }
 		</BaseDocumentActions>

diff --git a/packages/edit-site/src/components/list/added-by.js b/packages/edit-site/src/components/list/added-by.js
@@ -19,10 +19,22 @@ import {
 } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_ORIGINS,
+} from '../../utils/constants';
+
 /** @typedef {'wp_template'|'wp_template_part'} TemplateType */
 
 /** @type {TemplateType} */
-const TEMPLATE_POST_TYPE_NAMES = [ 'wp_template', 'wp_template_part' ];
+const TEMPLATE_POST_TYPE_NAMES = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+];
 
 /**
  * @typedef {'theme'|'plugin'|'site'|'user'} AddedByType
@@ -64,30 +76,36 @@ export function useAddedBy( postType, postId ) {
 				// or 'custom' source.
 				if (
 					template.has_theme_file &&
-					( template.origin === 'theme' ||
+					( template.origin === TEMPLATE_ORIGINS.theme ||
 						( ! template.origin &&
-							[ 'theme', 'custom' ].includes(
-								template.source
-							) ) )
+							[
+								TEMPLATE_ORIGINS.theme,
+								TEMPLATE_ORIGINS.custom,
+							].includes( template.source ) ) )
 				) {
 					return {
 						type: 'theme',
 						icon: themeIcon,
 						text:
 							getTheme( template.theme )?.name?.rendered ||
 							template.theme,
-						isCustomized: template.source === 'custom',
+						isCustomized:
+							template.source === TEMPLATE_ORIGINS.custom,
 					};
 				}
 
 				// Added by plugin.
-				if ( template.has_theme_file && template.origin === 'plugin' ) {
+				if (
+					template.has_theme_file &&
+					template.origin === TEMPLATE_ORIGINS.plugin
+				) {
 					return {
-						type: 'plugin',
+						type: TEMPLATE_ORIGINS.plugin,
 						icon: pluginIcon,
 						text:
 							getPlugin( template.theme )?.name || template.theme,
-						isCustomized: template.source === 'custom',
+						isCustomized:
+							template.source === TEMPLATE_ORIGINS.custom,
 					};
 				}
 
@@ -97,7 +115,7 @@ export function useAddedBy( postType, postId ) {
 				// site logo and title.
 				if (
 					! template.has_theme_file &&
-					template.source === 'custom' &&
+					template.source === TEMPLATE_ORIGINS.custom &&
 					! template.author
 				) {
 					const siteData = getEntityRecord(
@@ -176,7 +194,7 @@ export default function AddedBy( { postType, postId } ) {
 				{ text }
 				{ isCustomized && (
 					<span className="edit-site-list-added-by__customized-info">
-						{ postType === 'wp_template'
+						{ postType === TEMPLATE_POST_TYPE
 							? _x( 'Customized', 'template' )
 							: _x( 'Customized', 'template part' ) }
 					</span>

diff --git a/packages/edit-site/src/components/list/index.js b/packages/edit-site/src/components/list/index.js
@@ -17,6 +17,10 @@ import Header from './header';
 import Table from './table';
 import useTitle from '../routes/use-title';
 import { unlock } from '../../lock-unlock';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../../utils/constants';
 
 const { useLocation } = unlock( routerPrivateApis );
 
@@ -25,7 +29,9 @@ export default function List() {
 		params: { path },
 	} = useLocation();
 	const templateType =
-		path === '/wp_template/all' ? 'wp_template' : 'wp_template_part';
+		path === '/wp_template/all'
+			? TEMPLATE_POST_TYPE
+			: TEMPLATE_PART_POST_TYPE;
 
 	useRegisterShortcuts();
 

diff --git a/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js b/packages/edit-site/src/components/page-patterns/duplicate-menu-item.js
@@ -70,7 +70,7 @@ export default function DuplicateMenuItem( {
 
 			const result = await saveEntityRecord(
 				'postType',
-				'wp_template_part',
+				TEMPLATE_PART_POST_TYPE,
 				{ slug, title, content, area },
 				{ throwOnError: true }
 			);
@@ -162,7 +162,7 @@ export default function DuplicateMenuItem( {
 
 			const result = await saveEntityRecord(
 				'postType',
-				'wp_block',
+				PATTERN_TYPES.user,
 				{
 					content: isThemePattern
 						? item.content

diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -16,6 +16,7 @@ import {
 	PATTERN_TYPES,
 	PATTERN_SYNC_TYPES,
 	TEMPLATE_PART_POST_TYPE,
+	TEMPLATE_ORIGINS,
 	TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
@@ -33,7 +34,7 @@ const templatePartToPattern = ( templatePart ) => ( {
 	} ),
 	categories: [ templatePart.area ],
 	description: templatePart.description || '',
-	isCustom: templatePart.source === 'custom',
+	isCustom: templatePart.source === TEMPLATE_ORIGINS.custom,
 	keywords: templatePart.keywords || [],
 	id: createTemplatePartId( templatePart.theme, templatePart.slug ),
 	name: createTemplatePartId( templatePart.theme, templatePart.slug ),

diff --git a/packages/edit-site/src/components/page-template-parts/add-new-template-part.js b/packages/edit-site/src/components/page-template-parts/add-new-template-part.js
@@ -13,6 +13,7 @@ import { Button } from '@wordpress/components';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import CreateTemplatePartModal from '../create-template-part-modal';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
 const { useHistory } = unlock( routerPrivateApis );
 
@@ -22,7 +23,9 @@ export default function AddNewTemplatePart() {
 			select( editSiteStore ).getSettings();
 		return {
 			canCreate: ! supportsTemplatePartsMode,
-			postType: select( coreStore ).getPostType( 'wp_template_part' ),
+			postType: select( coreStore ).getPostType(
+				TEMPLATE_PART_POST_TYPE
+			),
 		};
 	}, [] );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
@@ -45,7 +48,7 @@ export default function AddNewTemplatePart() {
 						setIsModalOpen( false );
 						history.push( {
 							postId: templatePart.id,
-							postType: 'wp_template_part',
+							postType: TEMPLATE_PART_POST_TYPE,
 							canvas: 'edit',
 						} );
 					} }

diff --git a/packages/edit-site/src/components/page-template-parts/index.js b/packages/edit-site/src/components/page-template-parts/index.js
@@ -19,11 +19,12 @@ import Link from '../routes/link';
 import AddedBy from '../list/added-by';
 import TemplateActions from '../template-actions';
 import AddNewTemplatePart from './add-new-template-part';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
 
 export default function PageTemplateParts() {
 	const { records: templateParts } = useEntityRecords(
 		'postType',
-		'wp_template_part',
+		TEMPLATE_PART_POST_TYPE,
 		{
 			per_page: -1,
 		}

diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
@@ -20,11 +20,12 @@ import Link from '../routes/link';
 import AddedBy from '../list/added-by';
 import TemplateActions from '../template-actions';
 import AddNewTemplate from '../add-new-template';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 export default function PageTemplates() {
 	const { records: templates } = useEntityRecords(
 		'postType',
-		'wp_template',
+		TEMPLATE_POST_TYPE,
 		{
 			per_page: -1,
 		}
@@ -79,7 +80,7 @@ export default function PageTemplates() {
 			title={ __( 'Templates' ) }
 			actions={
 				<AddNewTemplate
-					templateType={ 'wp_template' }
+					templateType={ TEMPLATE_POST_TYPE }
 					showIcon={ false }
 					toggleProps={ { variant: 'primary' } }
 				/>

diff --git a/packages/edit-site/src/components/save-hub/index.js b/packages/edit-site/src/components/save-hub/index.js
@@ -16,13 +16,14 @@ import { store as noticesStore } from '@wordpress/notices';
 import SaveButton from '../save-button';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 import { unlock } from '../../lock-unlock';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
 
 const { useLocation } = unlock( routerPrivateApis );
 
 const PUBLISH_ON_SAVE_ENTITIES = [
 	{
 		kind: 'postType',
-		name: 'wp_navigation',
+		name: NAVIGATION_POST_TYPE,
 	},
 ];
 

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/hooks.js
@@ -9,6 +9,7 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
+import { TEMPLATE_POST_TYPE } from '../../../utils/constants';
 
 export function useEditedPostContext() {
 	return useSelect(
@@ -31,10 +32,14 @@ export function useIsPostsPage() {
 function useTemplates() {
 	return useSelect(
 		( select ) =>
-			select( coreStore ).getEntityRecords( 'postType', 'wp_template', {
-				per_page: -1,
-				post_type: 'page',
-			} ),
+			select( coreStore ).getEntityRecords(
+				'postType',
+				TEMPLATE_POST_TYPE,
+				{
+					per_page: -1,
+					post_type: 'page',
+				}
+			),
 		[]
 	);
 }

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/edit-button.js
@@ -8,11 +8,12 @@ import { pencil } from '@wordpress/icons';
  */
 import SidebarButton from '../sidebar-button';
 import { useLink } from '../routes/link';
+import { NAVIGATION_POST_TYPE } from '../../utils/constants';
 
 export default function EditButton( { postId } ) {
 	const linkInfo = useLink( {
 		postId,
-		postType: 'wp_navigation',
+		postType: NAVIGATION_POST_TYPE,
 		canvas: 'edit',
 	} );
 	return (