Pages: display content frame in mobile when canvas is not edit #60409
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
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. |
oandregal
added
[Type] Enhancement
33 tasks
|
Size Change: +136 B (0%) Total Size: 1.73 MB
ℹ️ View Unchanged
|
|
I think there's some CSS we need to do to leave some space for the "hub" on the top. This is probably something we already do in other places too. |
Fixed that, also for Templates&Parts pages: Gravacao.do.ecra.2024-04-03.as.11.12.55.mov |
youknowriad
reviewed
Apr 3, 2024
| @include break-medium { | ||
| margin-top: 0; | ||
| } | ||
| } |
There was a problem hiding this comment.
I wonder if there's a way to solve this in a generic way (like in the "mobile" area of layout). Do you think it works for all the use-cases or are there exceptions?
There was a problem hiding this comment.
Pushed something that works across all existing screens.
Gravacao.do.ecra.2024-04-05.as.10.56.04.mov
|
Flaky tests detected in 9215564402478648bcedb646dbc9f93dd54022cc. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8536188641
|
oandregal
force-pushed
the
update/mobile-page-pages-show-content-frame
branch
from
9215564 to
e03b2d1
Compare
oandregal
commented
Apr 5, 2024
| <div | ||
| className="edit-site-layout__mobile" | ||
| style={ { | ||
| maxWidth: widths?.content, |
There was a problem hiding this comment.
If widths become necessary for mobile, I think the router should declare them for this specific "area" the same it does for "content" — e.g.: maxWidth: widths?.mobile.
There was a problem hiding this comment.
So this change has no impact?
There was a problem hiding this comment.
Nope. This only affected to pages that whose mobile area had content + had a width set for the content area (the existing logic only accounted for the list layout):
Gravacao.do.ecra.2024-04-05.as.11.13.47.mov
There was a problem hiding this comment.
Was testing a different thing in trunk and this is what happened with this rule in place:
Gravacao.do.ecra.2024-04-05.as.11.21.34.mov
oandregal
commented
Apr 5, 2024
| @@ -43,12 +43,6 @@ | |||
| } | |||
|
|
|||
| .edit-site-page-patterns-dataviews { | |||
| margin-top: 60px; | |||
There was a problem hiding this comment.
Instead of adding this bit of CSS to every page that displays the content frame in a mobile viewport, this PR moves it to the hub component.
oandregal
commented
Apr 5, 2024
| @@ -26,6 +26,13 @@ | |||
| } | |||
| } | |||
|
|
|||
| .edit-site-layout__header-container:has(+ .edit-site-layout__content > .edit-site-layout__mobile) { | |||
There was a problem hiding this comment.
Depending on what component is displayed, the header sibling would be different:
- a page component in the content frame:
.edit-site-layout__content > .edit-site-layout__mobile > .edit-site-page - the sidebar frame:
.edit-site-layout__content > interface-navigable-region edit-site-layout__sidebar-region - the editor:
.edit-site-layout__content > .edit-site-layout__mobile > .edit-site-editor__interface-skeleton
oandregal
commented
Apr 5, 2024
| @@ -52,7 +52,9 @@ export default function useLayoutAreas() { | |||
| mobile: | |||
| canvas === 'edit' ? ( | |||
| <Editor isLoading={ isSiteEditorLoading } /> | |||
| ) : undefined, | |||
| ) : ( | |||
There was a problem hiding this comment.
Display the list on mobile.
I see some errors when loading the editor on mobile (the black thing) |
Ah, right, forgot the hub was part of the editor as well. I'll take a look at that. |
This state seems buggy, I don't know what's the fix (probably just remove the preview when they start overlapping) and it's probably something independent from the current PR. |
Yeah, it is — they overlap in |
cbravobernal
pushed a commit
to garridinsi/gutenberg
that referenced
this pull request
Apr 9, 2024
… fix overlapping hub in Templates (WordPress#60409) This extracts some existing styles in the Patterns page to the Hub component, so any Page component (Pages, Templates, Patterns) has the same styles. Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
13 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Part of #55083
Related #59659
What?
When navigating to the Pages page in mobile, display the content frame instead of the sidebar. This also fixes the templates screen that was obscuring the hub styles.
Gravacao.do.ecra.2024-04-05.as.10.56.04.mov
Why?
Otherwise, the user is unable to navigate through the pages.
How?
Testing Instructions
Go to Pages and using a mobile viewport (for example, use the browser's devtools).