diff --git a/packages/core-data/src/private-actions.js b/packages/core-data/src/private-actions.js index 0cfa3e97c00572..b11ef2cf080451 100644 --- 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 index 5c734ba0d10b2b..c966b6f024c76e 100644 --- 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 index 238011a10b8f3c..34070eafe1ebb3 100644 --- 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 index f34c92154f6cac..59a3433163512d 100644 --- 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 index 4b96a2efb11901..cadb335363c959 100644 --- 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 ( +