-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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: Fix navigation on mobile web #59014
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: +62 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
Flaky tests detected in 9ca090e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7914592211
|
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 the PR!
I hid "manage all pages" like we do for templates and template parts
For patterns, I remove the sidebar filtering because I didn't want to introduce specific implementations in the layout for a given page.
At this point, I also agree with this decision. In the future, as reported in #49769, I would be happy if we could also publish the "Manage all XXX" menu in the mobile viewport.
I tested this PR, and when I click on the pattern menu, the pattern category appears only for a moment, and then the Dataview appears.
64b6ae722e7f73ea092469f85a4cf8a1.mp4
When that becomes default, we'll have to address it indeed. But I think the solution for it is probably to use the "canvas" in the URL for mobile. |
I pushed a commit that make this less visible (basically shows nothing for a millisecond). This can't be solved entirely until we actually make the "sidebar" part of the routing (get rid of the Navigator component or make it controlled). It's the result of the synchronization between the internal path of the "navigator" and the url. so there's a small delay when the two are not synced which gives this result. |
</AnimatePresence> | ||
</NavigableRegion> | ||
{ ( ! isMobileViewport || | ||
( isMobileViewport && ! areas.mobile ) ) && ( |
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.
Based on the above comment, shouldn't we render NavigableRegion
?
When I click the Edit button on the Styles page, the canvas view is not displayed. This problem does not occur with trunk. Maybe we need to adjust the conditional somewhere. 281cb1bb4d2afcbfd9f262eada607202.mp4 |
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 the PR Riad! Besides my comment about NavigableRegion
, this looks good.
This is a tough one and while not perfect, I think it's pros outweight the cons. I had also explored this a bit by adding a sidebar
area instead of your mobile
area, but thought it added way more complexity than your suggestion.
I'd say this is an improvement right now for mobile and when we implement the sidebar as part of the routing, we'll have a much improved experience.
I don't think we need a region because the regions are defined by the |
Thanks for the update! I confirmed that the canvas view is displayed when I click the Edit button on the Styles page. This code is a bit complicated for me, but I agree that this PR is a solid improvement for the moment. |
Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org> Co-authored-by: annezazu <annezazu@git.wordpress.org>
closes #58044
What?
This address the biggest outstanding issues when it comes to mobile web in the site editor. While also keeping things simple by introducing a new "mobile" area in the router.
This PR makes the assumption that on mobile, there's not multiple areas to render pages like desktop (sidebar, preview, content), there's only a single area, so each URL should define what to render on the mobile area in the router.js.
I've made some decisions here:
Testing Instructions
1- Open the site editor on mobile web (small viewport)
2- Navigate to all the pages and check that everything is correct.