Skip to content
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

Site Editor: patterns and templates cannot be edited from sidebar mobile view #63002

Merged
merged 3 commits into from
Jul 2, 2024
Merged

Site Editor: patterns and templates cannot be edited from sidebar mobile view #63002

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f247618
In mobile mode, check for canvas edit mode so the "Edit" callback red…
ramonjd Jul 1, 2024
1a8c948
I suspect that the transition is causing intermittent crashing in Chr…
ramonjd Jul 2, 2024
245ca53
Revert unintentional change
ramonjd Jul 2, 2024
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
30 changes: 15 additions & 15 deletions packages/edit-site/src/components/layout/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ function useRedirectOldPaths() {
export default function useLayoutAreas() {
const { params } = useLocation();
const { postType, postId, path, layout, isCustom, canvas } = params;
const hasEditCanvasMode = canvas === 'edit';
useRedirectOldPaths();

// Page list
Expand All @@ -91,13 +92,12 @@ export default function useLayoutAreas() {
/>
),
content: <PostsList postType={ postType } />,
preview: ( isListLayout || canvas === 'edit' ) && <Editor />,
mobile:
canvas === 'edit' ? (
<Editor />
) : (
<PostsList postType={ postType } />
),
preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
mobile: hasEditCanvasMode ? (
<Editor />
) : (
<PostsList postType={ postType } />
),
},
widths: {
content: isListLayout ? 380 : undefined,
Expand All @@ -115,8 +115,8 @@ export default function useLayoutAreas() {
<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
),
content: <PageTemplates />,
preview: ( isListLayout || canvas === 'edit' ) && <Editor />,
mobile: <PageTemplates />,
preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
mobile: hasEditCanvasMode ? <Editor /> : <PageTemplates />,
},
widths: {
content: isListLayout ? 380 : undefined,
Expand All @@ -133,8 +133,8 @@ export default function useLayoutAreas() {
areas: {
sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
content: <PagePatterns />,
mobile: <PagePatterns />,
preview: canvas === 'edit' && <Editor />,
mobile: hasEditCanvasMode ? <Editor /> : <PagePatterns />,
preview: hasEditCanvasMode && <Editor />,
},
};
}
Expand All @@ -148,7 +148,7 @@ export default function useLayoutAreas() {
<SidebarNavigationScreenGlobalStyles backPath={ {} } />
),
preview: <Editor />,
mobile: canvas === 'edit' && <Editor />,
mobile: hasEditCanvasMode && <Editor />,
},
};
}
Expand All @@ -165,7 +165,7 @@ export default function useLayoutAreas() {
/>
),
preview: <Editor />,
mobile: canvas === 'edit' && <Editor />,
mobile: hasEditCanvasMode && <Editor />,
},
};
}
Expand All @@ -176,7 +176,7 @@ export default function useLayoutAreas() {
<SidebarNavigationScreenNavigationMenus backPath={ {} } />
),
preview: <Editor />,
mobile: canvas === 'edit' && <Editor />,
mobile: hasEditCanvasMode && <Editor />,
},
};
}
Expand All @@ -187,7 +187,7 @@ export default function useLayoutAreas() {
areas: {
sidebar: <SidebarNavigationScreenMain />,
preview: <Editor />,
mobile: canvas === 'edit' && <Editor />,
mobile: hasEditCanvasMode && <Editor />,
},
};
}
10 changes: 7 additions & 3 deletions packages/edit-site/src/store/private-actions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ import { store as editorStore } from '@wordpress/editor';
export const setCanvasMode =
( mode ) =>
( { registry, dispatch } ) => {
const isMediumOrBigger =
window.matchMedia( '(min-width: 782px)' ).matches;
const switchCanvasMode = () => {
registry.batch( () => {
const isMediumOrBigger =
window.matchMedia( '(min-width: 782px)' ).matches;
registry.dispatch( blockEditorStore ).clearSelectedBlock();
registry.dispatch( editorStore ).setDeviceType( 'Desktop' );
registry
Expand Down Expand Up @@ -59,7 +59,11 @@ export const setCanvasMode =
} );
};

if ( ! document.startViewTransition ) {
/*
* Skip transition in mobile, otherwise it crashes the browser.
* See: https://github.com/WordPress/gutenberg/pull/63002.
*/
if ( ! isMediumOrBigger || ! document.startViewTransition ) {
switchCanvasMode();
} else {
document.documentElement.classList.add(
Expand Down
Loading