diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js index 0c62b9eb450ac..e0e04e0f5da92 100644 --- a/packages/edit-site/src/components/page-templates/index.js +++ b/packages/edit-site/src/components/page-templates/index.js @@ -25,6 +25,7 @@ import { import { unlock } from '../../lock-unlock'; import { useEditPostAction } from '../dataviews-actions'; import { authorField, descriptionField, previewField } from './fields'; +import { useEvent } from '@wordpress/compose'; const { usePostActions } = unlock( editorPrivateApis ); const { useHistory, useLocation } = unlock( routerPrivateApis ); @@ -92,11 +93,19 @@ export default function PageTemplates() { }; }, [ layout, activeView ] ); const [ view, setView ] = useState( defaultView ); + + // Sync the layout from the URL to the view state. + useEffect( () => { + setView( ( currentView ) => ( { + ...currentView, + type: layout ?? DEFAULT_VIEW.type, + } ) ); + }, [ setView, layout ] ); + + // Sync the active view from the URL to the view state. useEffect( () => { - const usedType = layout ?? DEFAULT_VIEW.type; setView( ( currentView ) => ( { ...currentView, - type: usedType, filters: activeView !== 'all' ? [ @@ -108,7 +117,7 @@ export default function PageTemplates() { ] : [], } ) ); - }, [ activeView, layout ] ); + }, [ setView, activeView ] ); const { records, isResolving: isLoadingData } = useEntityRecordsWithPermissions( 'postType', TEMPLATE_POST_TYPE, { @@ -170,20 +179,16 @@ export default function PageTemplates() { [ postTypeActions, editAction ] ); - const onChangeView = useCallback( - ( newView ) => { - if ( newView.type !== view.type ) { - history.navigate( - addQueryArgs( path, { - layout: newView.type, - } ) - ); - } - - setView( newView ); - }, - [ view.type, setView, history, path ] - ); + const onChangeView = useEvent( ( newView ) => { + setView( newView ); + if ( newView.type !== layout ) { + history.navigate( + addQueryArgs( path, { + layout: newView.type, + } ) + ); + } + } ); return ( { ) ).toBeVisible(); } ); + + test( 'Persists filter/search when switching layout', async ( { + page, + admin, + } ) => { + await admin.visitSiteEditor(); + await page.getByRole( 'button', { name: 'Templates' } ).click(); + + // Search templates + await page.getByRole( 'searchbox', { name: 'Search' } ).fill( 'Index' ); + + // Switch layout + await page.getByRole( 'button', { name: 'Layout' } ).click(); + await page.getByRole( 'menuitemradio', { name: 'Table' } ).click(); + + // Confirm the table is visible + await expect( page.getByRole( 'table' ) ).toContainText( 'Index' ); + + // The search should still contain the search term + await expect( + page.getByRole( 'searchbox', { name: 'Search' } ) + ).toHaveValue( 'Index' ); + } ); } );