-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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.
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
Conversation
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Size Change: +6 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for looking into this! In general the links going deeper into page templates is working for me 👍
One issue I ran into, not sure if it's related, is that the W icon at the top left when attempting to go back from the edit view winds up crashing for me, with no error in the console:
2024-07-01.16.20.02.mp4
This doesn't happen for me when navigating up the hierarchy from editing a template. Only while editing a pattern. Can anyone reproduce that? Just wondering if it's something weird with my environment.
Not quite related to this bug, but one thing I found confusing at first with the mobile version of the dataviews screens is that there's no W icon, so I had to rely on browser back buttons to navigate up the hierarchy. This is challenging to do when we add in the ability to go to the edit view on mobile, as the back button might take us "back" to the editor if we've come from there, so it can be difficult to navigate up to the root of the site editor on mobile if we're going into the edit view.
Here's a quick demo:
2024-07-01.16.24.46.mp4
- Go to Templates screen
- Tap on a template to go to the edit view
- Tap on the W icon to go up a level
- There's no way to get out via tapping here, so use the browser back button
- We wind up back in the editor again
Thanks for testing @andrewserong 🙇🏻 So it sounds like the entire flow is broken for mobile. A bit of a shame, I was hoping for a quick win. I should know better 🤣 I'll dig a little more deeply this week to suss out where things fit together and see what's fixable. 🍺 |
I was able to reproduce this issue. The easiest way is to go to the Pages screen, open any editor canvas, and click the W logo.
I think there are still many issues with the mobile viewport. The main issue is probably #62878. It's a difficult question as to what extent this needs to be fixed in WP6.6 😅 |
Thanks for the thoughts @t-hamano After thinking about it for a nanosecond, I'll put this out there. For 6.6, users should at least be able to:
So I'll investigate the crash. With those things fixed hopefully we've restored base functionality. Any UX cluster bombs we can fix as follow ups. |
…irect the browser to the block editor in edit mode
9d7f618
to
f247618
Compare
Flaky tests detected in f247618. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9753185727
|
…ome in mobile viewports. Turning it off as it appears more stable in local testing.
I think I've traced the crash to the use of Only firing that in desktop mode seems to have fixed the crashing for me, however I haven't located the root cause. Chrome supports |
There's an issue for this: #62878 I hacked together something to address it in the short term, and have commented over there. 👍🏻 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍
Thanks for the reviews, folks! |
There was a conflict while trying to cherry-pick the commit to the wp/6.6 branch. Please resolve the conflict manually and create a PR to the wp/6.6 branch. PRs to wp/6.6 are similar to PRs to trunk, but you should base your PR on the wp/6.6 branch instead of trunk.
|
…ile view (#63002) * In mobile mode, check for canvas edit mode so the "Edit" callback redirect the browser to the block editor in edit mode * I suspect that the transition is causing intermittent crashing in Chrome in mobile viewports. Turning it off as it appears more stable in local testing. * Revert unintentional change Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: priethor <priethor@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: ironprogrammer <ironprogrammer@git.wordpress.org> Co-authored-by: ivan-ottinger <ivanottinger@git.wordpress.org> Co-authored-by: mrfoxtalbot <mrfoxtalbot@git.wordpress.org>
Cherry-pick and merge to the wp/6.6 branch here: |
…ile view (#63002) (#63055) Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: priethor <priethor@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: ironprogrammer <ironprogrammer@git.wordpress.org> Co-authored-by: ivan-ottinger <ivanottinger@git.wordpress.org> Co-authored-by: mrfoxtalbot <mrfoxtalbot@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org>
I've prepared #63060 as a potential quick change for 6.6. |
…ile view (#63002) * In mobile mode, check for canvas edit mode so the "Edit" callback redirect the browser to the block editor in edit mode * I suspect that the transition is causing intermittent crashing in Chrome in mobile viewports. Turning it off as it appears more stable in local testing. * Revert unintentional change Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: priethor <priethor@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: ironprogrammer <ironprogrammer@git.wordpress.org> Co-authored-by: ivan-ottinger <ivanottinger@git.wordpress.org> Co-authored-by: mrfoxtalbot <mrfoxtalbot@git.wordpress.org>
…ile view (WordPress#63002) * In mobile mode, check for canvas edit mode so the "Edit" callback redirect the browser to the block editor in edit mode * I suspect that the transition is causing intermittent crashing in Chrome in mobile viewports. Turning it off as it appears more stable in local testing. * Revert unintentional change Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: priethor <priethor@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org> Co-authored-by: ironprogrammer <ironprogrammer@git.wordpress.org> Co-authored-by: ivan-ottinger <ivanottinger@git.wordpress.org> Co-authored-by: mrfoxtalbot <mrfoxtalbot@git.wordpress.org>
What?
Fixes #62932
Fixes #62649
Specifically, this PR addressing the following:
cc @oandregal to make sure everything from #60689 still works
Why?
So that clicking Edit on Templates and Patterns in the data views redirects the browser to the block editor in edit mode.
Also, to avoid crashing the browser.
How?
In the mobile area prop in the Site Editor router, check for
canvas === 'edit'
and render the Editor component.Skip using
document.startViewTransition
in mobile view when switching canvas modes.Testing Instructions
782px
wide to trigger the mobile viewdocument.startViewTransition
doesn't have full support outside Chrome.Testing Instructions for Keyboard
Screenshots or screencast
Before
2024-07-01.13.45.41.mp4
After
2024-07-01.14.02.54.mp4