diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js index 7ecbf640790a83..bca37df9715004 100644 --- a/packages/edit-site/src/components/add-new-pattern/index.js +++ b/packages/edit-site/src/components/add-new-pattern/index.js @@ -25,14 +25,13 @@ import { TEMPLATE_PART_POST_TYPE, } from '../../utils/constants'; -const { useHistory, useLocation } = unlock( routerPrivateApis ); +const { useHistory } = unlock( routerPrivateApis ); const { CreatePatternModal, useAddPatternCategory } = unlock( editPatternsPrivateApis ); export default function AddNewPattern() { const history = useHistory(); - const { params } = useLocation(); const [ showPatternModal, setShowPatternModal ] = useState( false ); const [ showTemplatePartModal, setShowTemplatePartModal ] = useState( false ); @@ -141,16 +140,17 @@ export default function AddNewPattern() { return; } try { + const { + params: { postType, categoryId }, + } = history.getLocationWithParams(); let currentCategoryId; // When we're not handling template parts, we should // add or create the proper pattern category. - if ( params.postType !== TEMPLATE_PART_POST_TYPE ) { + if ( postType !== TEMPLATE_PART_POST_TYPE ) { const currentCategory = categoryMap .values() - .find( - ( term ) => term.name === params.categoryId - ); - if ( !! currentCategory ) { + .find( ( term ) => term.name === categoryId ); + if ( currentCategory ) { currentCategoryId = currentCategory.id || ( await findOrCreateTerm( @@ -170,7 +170,7 @@ export default function AddNewPattern() { // category. if ( ! currentCategoryId && - params.categoryId !== 'my-patterns' + categoryId !== 'my-patterns' ) { history.push( { postType: PATTERN_TYPES.user, diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 81f34e9ba59a89..391db38fbc51b6 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -51,8 +51,9 @@ const getFormattedDate = ( dateToDisplay ) => ); function useView( postType ) { - const { params } = useLocation(); - const { activeView = 'all', isCustom = 'false', layout } = params; + const { + params: { activeView = 'all', isCustom = 'false', layout }, + } = useLocation(); const history = useHistory(); const selectedDefaultView = useMemo( () => { const defaultView = @@ -128,6 +129,7 @@ function useView( postType ) { const setDefaultViewAndUpdateUrl = useCallback( ( viewToSet ) => { if ( viewToSet.type !== view?.type ) { + const { params } = history.getLocationWithParams(); history.push( { ...params, layout: viewToSet.type, @@ -135,7 +137,7 @@ function useView( postType ) { } setView( viewToSet ); }, - [ params, view?.type, history ] + [ history, view?.type ] ); if ( isCustom === 'false' ) { @@ -203,19 +205,21 @@ export default function PagePages() { const postType = 'page'; const [ view, setView ] = useView( postType ); const history = useHistory(); - const { params } = useLocation(); - const { isCustom = 'false' } = params; const onSelectionChange = useCallback( ( items ) => { - if ( isCustom === 'false' && view?.type === LAYOUT_LIST ) { + const { params } = history.getLocationWithParams(); + if ( + ( params.isCustom ?? 'false' ) === 'false' && + view?.type === LAYOUT_LIST + ) { history.push( { ...params, postId: items.length === 1 ? items[ 0 ].id : undefined, } ); } }, - [ history, params, view?.type, isCustom ] + [ history, view?.type ] ); const queryArgs = useMemo( () => { diff --git a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js index 92986912d29cb8..ffddddb9cad292 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js +++ b/packages/edit-site/src/components/sidebar-dataviews/add-new-view.js @@ -22,12 +22,9 @@ import SidebarNavigationItem from '../sidebar-navigation-item'; import { DEFAULT_VIEWS } from './default-views'; import { unlock } from '../../lock-unlock'; -const { useHistory, useLocation } = unlock( routerPrivateApis ); +const { useHistory } = unlock( routerPrivateApis ); function AddNewItemModalContent( { type, setIsAdding } ) { - const { - params: { postType }, - } = useLocation(); const history = useHistory(); const { saveEntityRecord } = useDispatch( coreStore ); const [ title, setTitle ] = useState( '' ); @@ -68,6 +65,9 @@ function AddNewItemModalContent( { type, setIsAdding } ) { ), } ); + const { + params: { postType }, + } = history.getLocationWithParams(); history.push( { postType, activeView: savedRecord.id, diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js index 5c7b3d038e76d9..5b8ccb4b69e6da 100644 --- a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js +++ b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js @@ -27,7 +27,7 @@ import DataViewItem from './dataview-item'; import AddNewItem from './add-new-view'; import { unlock } from '../../lock-unlock'; -const { useHistory, useLocation } = unlock( routerPrivateApis ); +const { useHistory } = unlock( routerPrivateApis ); const EMPTY_ARRAY = []; @@ -81,9 +81,6 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) { } function CustomDataViewItem( { dataviewId, isActive } ) { - const { - params: { postType }, - } = useLocation(); const history = useHistory(); const { dataview } = useSelect( ( select ) => { @@ -145,9 +142,10 @@ function CustomDataViewItem( { dataviewId, isActive } ) { } ); if ( isActive ) { - history.replace( { - postType, - } ); + const { + params: { postType }, + } = history.getLocationWithParams(); + history.replace( { postType } ); } onClose(); } } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js index 3749505c6b56fb..568ec291f9ed11 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js @@ -20,10 +20,9 @@ const POPOVER_PROPS = { */ import { unlock } from '../../lock-unlock'; -const { useLocation, useHistory } = unlock( routerPrivateApis ); +const { useHistory } = unlock( routerPrivateApis ); export default function LeafMoreMenu( props ) { - const { params } = useLocation(); const history = useHistory(); const { block } = props; const { clientId } = block; @@ -60,6 +59,7 @@ export default function LeafMoreMenu( props ) { attributes.type && history ) { + const { params } = history.getLocationWithParams(); history.push( { postType: attributes.type, @@ -72,6 +72,7 @@ export default function LeafMoreMenu( props ) { ); } if ( name === 'core/page-list-item' && attributes.id && history ) { + const { params } = history.getLocationWithParams(); history.push( { postType: 'page', @@ -84,7 +85,7 @@ export default function LeafMoreMenu( props ) { ); } }, - [ history, params ] + [ history ] ); return ( diff --git a/packages/edit-site/src/utils/use-activate-theme.js b/packages/edit-site/src/utils/use-activate-theme.js index e5f9488a3edd8b..0dafd88340ba75 100644 --- a/packages/edit-site/src/utils/use-activate-theme.js +++ b/packages/edit-site/src/utils/use-activate-theme.js @@ -14,7 +14,7 @@ import { currentlyPreviewingTheme, } from './is-previewing-theme'; -const { useHistory, useLocation } = unlock( routerPrivateApis ); +const { useHistory } = unlock( routerPrivateApis ); /** * This should be refactored to use the REST API, once the REST API can activate themes. @@ -23,7 +23,6 @@ const { useHistory, useLocation } = unlock( routerPrivateApis ); */ export function useActivateTheme() { const history = useHistory(); - const { params } = useLocation(); const { startResolution, finishResolution } = useDispatch( coreStore ); return async () => { @@ -38,6 +37,7 @@ export function useActivateTheme() { finishResolution( 'activateTheme' ); // Remove the wp_theme_preview query param: we've finished activating // the queue and are switching to normal Site Editor. + const { params } = history.getLocationWithParams(); history.replace( { ...params, wp_theme_preview: undefined } ); } }; diff --git a/packages/router/src/history.js b/packages/router/src/history.js index 56c85914a5453f..3a04745923a817 100644 --- a/packages/router/src/history.js +++ b/packages/router/src/history.js @@ -38,7 +38,24 @@ function replace( params, state ) { return originalHistoryReplace.call( history, { search }, state ); } +const locationMemo = new WeakMap(); +function getLocationWithParams() { + const location = history.location; + let locationWithParams = locationMemo.get( location ); + if ( ! locationWithParams ) { + locationWithParams = { + ...location, + params: Object.fromEntries( + new URLSearchParams( location.search ) + ), + }; + locationMemo.set( location, locationWithParams ); + } + return locationWithParams; +} + history.push = push; history.replace = replace; +history.getLocationWithParams = getLocationWithParams; export default history; diff --git a/packages/router/src/router.js b/packages/router/src/router.js index 233ee6962de763..55807175a5bdd9 100644 --- a/packages/router/src/router.js +++ b/packages/router/src/router.js @@ -23,25 +23,11 @@ export function useHistory() { return useContext( HistoryContext ); } -const locationCache = new Map(); -function getLocationWithParams( location ) { - if ( locationCache.get( location.search ) ) { - return locationCache.get( location.search ); - } - const searchParams = new URLSearchParams( location.search ); - const ret = { - ...location, - params: Object.fromEntries( searchParams.entries() ), - }; - locationCache.clear(); - locationCache.set( location.search, ret ); - - return ret; -} - export function RouterProvider( { children } ) { - const location = useSyncExternalStore( history.listen, () => - getLocationWithParams( history.location ) + const location = useSyncExternalStore( + history.listen, + history.getLocationWithParams, + history.getLocationWithParams ); return (