Add active templates view

WordPress · Nov 18, 2024 · 8839130 · 8839130
1 parent 4061b10
commit 8839130
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 43 deletions.
diff --git a/packages/core-data/src/private-actions.js b/packages/core-data/src/private-actions.js
@@ -16,9 +16,5 @@ export function receiveRegisteredPostMeta( postType, registeredPostMeta ) {
 }
 
 export function receiveTemplateAutoDraftId( target, id ) {
-	return {
-		type: 'RECEIVE_TEMPLATE_AUTO_DRAFT_ID',
-		target,
-		id,
-	};
+	return { type: 'RECEIVE_TEMPLATE_AUTO_DRAFT_ID', target, id };
 }
diff --git a/packages/core-data/src/private-selectors.ts b/packages/core-data/src/private-selectors.ts
@@ -254,5 +254,6 @@ export const getTemplateId = createRegistrySelector(
 	}
 );
 
-export const getTemplateAutoDraftId = ( state: State, target: string ) =>
-	state.templateAutoDraftId[ target ];
+export function getTemplateAutoDraftId( state: State, target: string ) {
+	return state.templateAutoDraftId[ target ];
+}
diff --git a/packages/core-data/src/reducer.js b/packages/core-data/src/reducer.js
@@ -648,14 +648,9 @@ export function registeredPostMeta( state = {}, action ) {
 }
 
 export function templateAutoDraftId( state = {}, action ) {
-	switch ( action.type ) {
-		case 'RECEIVE_TEMPLATE_AUTO_DRAFT_ID':
-			return {
-				...state,
-				[ action.target ]: action.id,
-			};
-	}
-	return state;
+	return action.type === 'RECEIVE_TEMPLATE_AUTO_DRAFT_ID'
+		? { ...state, [ action.target ]: action.id }
+		: state;
 }
 
 export default combineReducers( {

diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
@@ -33,6 +33,7 @@ import {
 	activeField,
 	slugField,
 } from './fields';
+import { useDefaultTemplateTypes } from '../add-new-template/utils';
 
 const { usePostActions } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -100,7 +101,7 @@ const DEFAULT_VIEW = {
 
 export default function PageTemplates() {
 	const { params } = useLocation();
-	const { activeView = 'user', layout, postId } = params;
+	const { activeView = 'active', layout, postId } = params;
 	const [ selection, setSelection ] = useState( [ postId ] );
 	const defaultView = useMemo( () => {
 		const usedType = layout ?? DEFAULT_VIEW.type;
@@ -109,44 +110,82 @@ export default function PageTemplates() {
 			type: usedType,
 			layout: defaultLayouts[ usedType ].layout,
 			fields: defaultLayouts[ usedType ].fields,
-			filters:
-				activeView !== 'user'
-					? [
-							{
-								field: 'author',
-								operator: 'isAny',
-								value: [ activeView ],
-							},
-					  ]
-					: [],
+			filters: ! [ 'active', 'user' ].includes( activeView )
+				? [
+						{
+							field: 'author',
+							operator: 'isAny',
+							value: [ activeView ],
+						},
+				  ]
+				: [],
 		};
 	}, [ layout, activeView ] );
 	const [ view, setView ] = useState( defaultView );
 	useEffect( () => {
 		setView( ( currentView ) => ( {
 			...currentView,
-			filters:
-				activeView !== 'user'
-					? [
-							{
-								field: 'author',
-								operator: OPERATOR_IS_ANY,
-								value: [ activeView ],
-							},
-					  ]
-					: [],
+			filters: ! [ 'active', 'user' ].includes( activeView )
+				? [
+						{
+							field: 'author',
+							operator: OPERATOR_IS_ANY,
+							value: [ activeView ],
+						},
+				  ]
+				: [],
 		} ) );
 	}, [ activeView ] );
 
-	const kind =
-		activeView === 'user' ? TEMPLATE_POST_TYPE : '_wp_static_template';
-
-	const { records, isResolving: isLoadingData } =
-		useEntityRecordsWithPermissions( 'postType', kind, {
-			// To do: for user templates, we want server side pagination.
+	const defaultTemplateTypes = useDefaultTemplateTypes();
+	// 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.
+	const { records: userRecords, isResolving: isLoadingUserRecords } =
+		useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, {
 			per_page: -1,
 			status: 'publish,draft',
 		} );
+	const { records: staticRecords, isResolving: isLoadingStaticData } =
+		useEntityRecordsWithPermissions( 'postType', '_wp_static_template', {
+			per_page: -1,
+		} );
+
+	const activeTemplates = useMemo( () => {
+		const _active = [ ...staticRecords ];
+		if ( userRecords ) {
+			for ( const template of userRecords ) {
+				if ( template.status === 'publish' ) {
+					// replace the static template with the user template in the array
+					const index = _active.findIndex(
+						( record ) => record.id === template.id
+					);
+					if ( index !== -1 ) {
+						_active[ index ] = template;
+					} else {
+						_active.push( template );
+					}
+				}
+			}
+		}
+		const defaultSlugs = defaultTemplateTypes.map( ( type ) => type.slug );
+		return _active.filter( ( template ) =>
+			defaultSlugs.includes( template.slug )
+		);
+	}, [ defaultTemplateTypes, userRecords, staticRecords ] );
+
+	let records;
+	let isLoadingData;
+	if ( activeView === 'active' ) {
+		records = activeTemplates;
+		isLoadingData = isLoadingUserRecords || isLoadingStaticData;
+	} else if ( activeView === 'user' ) {
+		records = userRecords;
+		isLoadingData = isLoadingUserRecords;
+	} else {
+		records = staticRecords;
+		isLoadingData = isLoadingStaticData;
+	}
 
 	const history = useHistory();
 	const onChangeSelection = useCallback(

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates-browse/content.js
@@ -49,6 +49,13 @@ export default function DataviewsTemplatesSidebarContent( { activeView } ) {
 
 	return (
 		<ItemGroup>
+			<DataViewItem
+				slug="active"
+				title={ __( 'Active templates' ) }
+				icon={ layout }
+				isActive={ activeView === 'active' }
+				isCustom={ false }
+			/>
 			<DataViewItem
 				slug="user"
 				title={ __( 'Custom templates' ) }

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
@@ -15,7 +15,7 @@ const { useLocation } = unlock( routerPrivateApis );
 
 export default function SidebarNavigationScreenTemplatesBrowse( { backPath } ) {
 	const {
-		params: { activeView = 'user' },
+		params: { activeView = 'active' },
 	} = useLocation();
 
 	return (