Skip to content

Fix browser history when synchronising state with urls #48731

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
youknowriad merged 11 commits into from
Mar 6, 2023
Merged

Fix browser history when synchronising state with urls #48731

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d3fb7a9
Fix browser history when synchronising state with urls
youknowriad Mar 3, 2023
85f2370
Fix double back button issues
youknowriad Mar 3, 2023
4b2afe1
Fix all url interactions
youknowriad Mar 3, 2023
ecf3f27
Fix initial path synchronization issues
youknowriad Mar 6, 2023
2201af1
Fix flashing sidebar item issue
youknowriad Mar 6, 2023
da54004
Add e2e test to check the browser history while navigating the site e…
youknowriad Mar 6, 2023
4e303de
Add test to check the template details navigation
youknowriad Mar 6, 2023
63dc198
Fix hook dependencies
youknowriad Mar 6, 2023
9868a79
Remove useless argument
youknowriad Mar 6, 2023
e2bdfce
Test tweaks
youknowriad Mar 6, 2023
ee28018
Remove useless argument
youknowriad Mar 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const TemplateItem = ( { postType, postId, ...props } ) => {
const linkInfo = useLink( {
postType,
postId,
path: undefined,
} );
return <SidebarNavigationItem { ...linkInfo } { ...props } />;
};
Expand Down Expand Up @@ -72,6 +73,8 @@ export default function SidebarNavigationScreenTemplates() {

const browseAllLink = useLink( {
path: '/' + postType + '/all',
postType,
postId: undefined,
} );

const canCreate = ! isMobileViewport && ! isTemplatePartsMode;
Expand Down
37 changes: 31 additions & 6 deletions packages/edit-site/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,22 +20,47 @@ export default function useSyncCanvasModeWithURL() {
);
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
const currentCanvasMode = useRef( canvasMode );
const { canvas: canvasInUrl = 'view' } = params;
const { canvas: canvasInUrl } = params;
const currentCanvasInUrl = useRef( canvasInUrl );
useEffect( () => {
currentCanvasMode.current = canvasMode;
if ( currentCanvasMode !== currentCanvasInUrl ) {
if ( canvasMode === 'init' ) {
return;
}

if (
canvasMode === 'edit' &&
currentCanvasInUrl.current !== canvasMode
) {
history.push( {
...params,
canvas: 'edit',
} );
}

if (
canvasMode === 'view' &&
currentCanvasInUrl.current !== undefined
) {
history.push( {
...params,
canvas: canvasMode,
canvas: undefined,
} );
}
}, [ canvasMode ] );

useEffect( () => {
currentCanvasInUrl.current = canvasInUrl;
if ( canvasInUrl !== currentCanvasMode.current ) {
setCanvasMode( canvasInUrl );
if (
canvasInUrl === undefined &&
currentCanvasMode.current !== 'view'
) {
setCanvasMode( 'view' );
} else if (
canvasInUrl === 'edit' &&
currentCanvasInUrl.current !== 'edit'
) {
setCanvasMode( 'edit' );
}
}, [ canvasInUrl ] );
}, [ canvasInUrl, params ] );
}
6 changes: 5 additions & 1 deletion packages/edit-site/src/components/sync-state-with-url/use-sync-path-with-url.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export default function useSyncPathWithURL() {
...currentUrlParams.current,
...newUrlParams,
};

currentUrlParams.current = updatedParams;
history.push( updatedParams );
}
Expand All @@ -75,7 +76,10 @@ export default function useSyncPathWithURL() {
updateUrlParams( {
postType: undefined,
postId: undefined,
path: navigatorLocation.path,
path:
navigatorLocation.path === '/'
? undefined
: navigatorLocation.path,
} );
}
}, [ navigatorLocation?.path, navigatorParams, history ] );
Expand Down
1 change: 0 additions & 1 deletion packages/edit-site/src/components/template-details/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ export default function TemplateDetails( { template, onClose } ) {

// TODO: We should update this to filter by template part's areas as well.
const browseAllLinkProps = useLink( {
canvas: 'view',
Copy link
Member

@Mamaduka Mamaduka Mar 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this causes regression of #48301.

Copy link
Contributor Author

@youknowriad youknowriad Mar 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it should be "undefined" now because "view" is the default value. But I guess it suffers from the issue I talk about here #48731 (comment)

postType: template.type,
postId: undefined,
path: '/' + template.type + '/all',
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/template-details/template-areas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ function TemplatePartItemMore( {
{
postId: templatePart.id,
postType: templatePart.type,
path: undefined,
},
{
fromTemplateId: params.postId,
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/hooks/template-part-edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ function EditTemplatePartMenuItem( { attributes } ) {
{
postId: templatePart?.id,
postType: templatePart?.type,
path: undefined,
},
{
fromTemplateId: params.postId,
Expand Down