Template activation: improve UX for custom templates (#72499)

mcsf · juanfra · ellatrix · priethor · commit a608ced6cc7c · 2025-10-21T13:55:19.000+02:00
Co-authored-by: mcsf &lt;mcsf@git.wordpress.org&gt;
Co-authored-by: juanfra &lt;juanfra@git.wordpress.org&gt;
Co-authored-by: ellatrix &lt;ellatrix@git.wordpress.org&gt;
Co-authored-by: priethor &lt; priethor@git.wordpress.org&gt;
diff --git a/packages/edit-site/src/components/dataviews-actions/index.js b/packages/edit-site/src/components/dataviews-actions/index.js
@@ -35,6 +35,7 @@ export const useSetActiveTemplateAction = () => {
 			icon: pencil,
 			isEligible( item ) {
 				return (
+					! item._isCustom &&
 					! ( item.slug === 'index' && item.source === 'theme' ) &&
 					item.theme === activeTheme.stylesheet
 				);
diff --git a/packages/edit-site/src/components/page-templates/fields.js b/packages/edit-site/src/components/page-templates/fields.js
@@ -11,7 +11,7 @@ import {
 	__experimentalHStack as HStack,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { parse } from '@wordpress/blocks';
@@ -155,6 +155,19 @@ export const activeField = {
 	id: 'active',
 	getValue: ( { item } ) => item._isActive,
 	render: function Render( { item } ) {
+		if ( item._isCustom ) {
+			return (
+				<Badge
+					intent="info"
+					title={ __(
+						'Custom templates cannot be active nor inactive.'
+					) }
+				>
+					{ __( 'N/A' ) }
+				</Badge>
+			);
+		}
+
 		const isActive = item._isActive;
 		return (
 			<Badge intent={ isActive ? 'success' : 'default' }>
@@ -190,10 +203,6 @@ export const slugField = {
 		const defaultTemplateType = defaultTemplateTypes.find(
 			( type ) => type.slug === item.slug
 		);
-		return (
-			defaultTemplateType?.title ||
-			// translators: %s is the slug of a custom template.
-			__( 'Custom' )
-		);
+		return defaultTemplateType?.title || _x( 'Custom', 'template type' );
 	},
 };
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
@@ -72,14 +72,18 @@ export default function PageTemplates() {
 		},
 	} );
 
-	const { activeTemplatesOption, activeTheme } = useSelect( ( select ) => {
-		const { getEntityRecord, getCurrentTheme } = select( coreStore );
-		return {
-			activeTemplatesOption: getEntityRecord( 'root', 'site' )
-				?.active_templates,
-			activeTheme: getCurrentTheme(),
-		};
-	} );
+	const { activeTemplatesOption, activeTheme, defaultTemplateTypes } =
+		useSelect( ( select ) => {
+			const { getEntityRecord, getCurrentTheme } = select( coreStore );
+			return {
+				activeTemplatesOption: getEntityRecord( 'root', 'site' )
+					?.active_templates,
+				activeTheme: getCurrentTheme(),
+				defaultTemplateTypes:
+					select( coreStore ).getCurrentTheme()
+						?.default_template_types,
+			};
+		} );
 	// Todo: this will have to be better so that we're not fetching all the
 	// records all the time. Active templates query will need to move server
 	// side.
@@ -150,8 +154,14 @@ export default function PageTemplates() {
 			_isActive: activeTemplates.find(
 				( template ) => template.id === record.id
 			),
+			_isCustom:
+				record.is_custom ||
+				( ! record.meta?.is_wp_suggestion &&
+					! defaultTemplateTypes.find(
+						( type ) => type.slug === record.slug
+					) ),
 		} ) );
-	}, [ _records, activeTemplates ] );
+	}, [ _records, activeTemplates, defaultTemplateTypes ] );
 
 	const users = useSelect(
 		( select ) => {
