Allow resizing the sidebar and frame of the site editor #46903
Merged
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
youknowriad
added
[Type] Enhancement
|
Size Change: +1.89 kB (0%) Total Size: 1.32 MB
ℹ️ View Unchanged
|
youknowriad
force-pushed
the
add/resizable-site-editor
branch
from
a7b25a7 to
99e0e42
Compare
12 tasks
|
Nice, I think this works quite well and will allow space for more management actions in the sidebar. One small issue is that the handle resembles the one in focus mode, and consequently might suggest it will only affect the canvas. It's also quite visually prominent, so we might need to consider a different design treatment for this context. Perhaps it only appears when you hover close to the frame edge but is otherwise hidden? resize.mp4It would be really nice if the site hub scaled on drag too, rather than on mouse-up, but appreciate that might not be simple :) Possibly related to that, reducing the 'jitter' on the right-hand side of the frame would be good. |
|
Fixed the jitter and tweaked the separator. For the hub, yeah not straightforward because it's not really part of the sidebar, I'll see if I can manage something without perf implications. |
|
Flaky tests detected in a134a15. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3875784874
|
|
Ok, I've managed to resize the hub as well. |
|
Nice! I've made some small style adjustments that (hopefully, feedback most welcome) clarify this as a general UI preference rather than just a resizing tool for the frame. I suspect we may want both in the future, with the latter making use of shortcuts that resize to specific device dimensions in a single click. e.g:
Related to that point, it feels like the dimensions should persist – currently it gets reset on refresh. Otherwise, in the mean time this seems to be in a decent spot. |
We can easily do that, but to be honest, I don't think they should persist personally. I think it's just a feeling we have because we work on the PR and refresh constantly, but I think in general people use this to just check how a template react or something like that and when coming back they won't expect it to persist. They can change browsers, devices... and the value might not make sense anymore as well. Anyway, I may be wrong, we can implement persistence anytime but I feel we should start without it, no? |
In that particular case I agree. But if you resize simply to create more room in the left panel (e.g. working with a navigation menu with lots of nesting) then it feels more like a UI preference, and those generally persist. Anyway, yes I suppose it's fine to start without persistence and wait for feedback :) |
jameskoster
approved these changes
Jan 9, 2023
jorgefilipecosta
approved these changes
Jan 9, 2023
| content: ""; | ||
| width: $grid-unit-05; | ||
| background: $gray-600; | ||
| border-radius: 2px; |
There was a problem hiding this comment.
Could it be $radius-block-ui?
5 tasks
|
Thanks for the work, I love how the right side isn't flickering anymore, in some of the videos shown here it does. It's rock solid in its resizing now, and it works well. However I don't love where it ended up, visually, and I think we need a small tweak:
On its own, the contrast is insufficient to make the separator visible:
And on hover/focus, the handle looks nothing like other handles we have. Moreso, it doubles the gutter between site hub and viewport. I'm going to try a quick PR. |
|
Created #47138 which I'm not totally in love with, but at least it removes the double gutter. I'd love input on how to get this closer. Can we have a pill a 2px pill-shape int the same color and height as the default variation, which then scales to be 100% tall on hover/focus? |
|
I expected to be able to resize almost to the edge of the top black rectangle with the W and the Edit button. There is also as Joen mentions a double gutter which feels a bit too much. It helps with the PR which Joen mentions. |
14 tasks
24 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.
Related #36667
What?
This PR adds the ability to resize the canvas size. It also removes the resizing that was specific to the template parts as it's a bit redundant.
Here's what it looks like so far
Screen.Recording.2023-01-05.at.1.03.00.PM.mov
Notes:
Testing instructions