Adapt site editor layout widths based on viewport size #58442
Closed
Conversation
This file contains hidden or 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
jameskoster
added
Needs Design Feedback
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
Size Change: +443 B (+0.03%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
Contributor
Author
|
Another option to consider here is allowing users to resize these columns manually (within certain parameters) rather than setting a static value. |
t-hamano
reviewed
Jan 30, 2024
Contributor
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
I noticed that the width of the sidebar was increased from 320px to 360px in the past, completely contrary to this PR 😅
However, the UI of the Site Editor has changed significantly since then, so I think we can reconsider the ideal width.
Personally, I prefer a narrower width.
Contributor
|
I think we can revisit those widths, and would prefer we do fixed widths before we add user resizing options. But I don't know that it's good to change this width until we have a clearer vision specifically of the split view. There are probably some responsive options we can look at, but it's important to note that this particular sidebar is used across a great deal of sections, and in the future even more. It may be a good change across all of those, but probably best to explore that space a bit more before we commit. |
Contributor
|
Since there is currently no details page in the site editor, I'm thinking we might be able to revive this PR. #60847 suggests reducing the sidebar width to 240px. 240px might be too narrow, but I think we could reduce it to at least 320px. |
Member
|
I think rather than one-off pushes, we should get a clearer view of what the next iteration of this should look/feel like. Otherwise we'll change it to one size, then a few months later change it to another. :) |
Contributor
Author
|
The sidebar width is currently a bit troublesome on data views side-by-site layout, especially on smaller screens. There's a lot of wasted space in virtually all sidebar instances, and the preview feels somewhat narrow proportionally: 
Dimensionally the sidebar is only 20px narrower than the content panel which is close enough to be visually uncanny. I do agree we should think about the layout more holistically though. One thing to try could be scaling the sidebar / content panel widths with the viewport. So instead of static dimensions the layout would shrink / grow accordingly. Rough example:
Perhaps we start by installing a mechanism like this, then adapting the values as required? |
Contributor
That seems like a great approach to me. Hopefully, we can also fix the overlap at certain screen sizes as reported in #62104. |
jameskoster
changed the title
|
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. |
Contributor
Author
|
I pushed some changes and updated the OP. We can easily tweak values. Let me know what y'all think. |
Contributor
Author
|
Any thoughts on this one @WordPress/gutenberg-design ? |
Member
|
Does the dark sidebar ever need to be wider than its default state? If it's mostly a list of list of menu items that open secondary panels, I question if it should ever get wider. I think only the canvas/frame needs to grow, probably not even the secondary panel (where lists of pages are). |
Contributor
Author
|
@richtabor reducing the sidebar width is what this PR originally did. I didn't think you were keen? I do think that's a reasonable place to start... |
Member
Resizing the sidebar is fine, but I don't think that the secondary sidebar should grow as well. |
Contributor
It could have its own behavior, like this, perhaps: #62748 |
Contributor
Author
|
Closing since #63431 was merged. |
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.
adaptive-layout.mp4
What?
Update width of site editor layout areas based on viewport size.
Why?
The existing one-size-fits-all dimensions do not scale elegantly, and the navigation sidebar is arguably too wide, especially at smaller screen sizes.
Testing Instructions
npm run buildOriginal PR
## What? Reduce the width of the navigation sidebar in the site editor from 360px to 320px.Why?
Currently the navigation sidebar and the list layout content frame are roughly equal in width (360px and 380px respectively). Given the nature of the content in each element I'm not sure this is appropriate.
As the Navigation sidebar consists mostly of menu items it's width can be reduced slightly. This attempts to install more appropriate visual balance between sidebar / content, and provides more space for page contents / preview frames on the right.
The value isn't necessary a proposal, there may be scope to go narrower, or to adjust the width of the content frame instead. The PR mostly aims to start the conversation.
I acknowledge it may be preferable to wait until we have a more concrete vision for the broader admin design for making this change.
Testing Instructions
npm run buildBefore
After