Refine side UI #6141
Refine side UI #6141
Conversation
jasmussen
added
[Type] Enhancement
jasmussen
force-pushed
the
update/refine-movers
branch
from
2096d0d
to
8afc621
Compare
|
This looks like a huge improvement although the rounded border radius bumping right up against the block border feels a bit off.
I couldn't figure out a way to do it perfectly in code (you'd probably need to apply the border styles to the SVG, or a new nested child element? are there any examples in Gutenberg doing something similar?) but I mocked up how it might look:
That extra bit of breathing space feels good, and if it's treated as clickable area on the button it should keep it easy to hit. (Edit: would obviously want to do the same on the right side!) |
| /> | ||
| ); | ||
| />, | ||
| <BlockRemoveButton key="remove" uids={ uids } role="menuitem" /> |
There was a problem hiding this comment.
I think the role should be removed here.
|
Personally, I am glad to see the trash button return. It is pretty handy, and I do not think it adds much weight to the UI, especially with the changes in #6101. These new styles look pretty nice and do feel more clickable, which is good. I like @chrisvanpatten's suggestion of having a little gap between them and the visible block outline. |
|
Love it! Do we need to have both the trash icon and the Remove option in the menu? |
jasmussen
force-pushed
the
update/refine-movers
branch
from
8afc621
to
82867b6
Compare
More to come.
|
Great improvements, I have a similar concern regarding this very subtle thing with overlapping borders:
|
gziolo
force-pushed
the
update/refine-movers
branch
from
0159c8a
to
8acbfd7
Compare
|
Fixed the flickering issue that made things look slightly cropped in weird circumstances, and added a little clearance as suggested by @chrisvanpatten:
Thanks for the reviews folks, good to go? |
|
I noticed regression on mobile caused by the fact that icons are swapped on the right side. Before
After
The issues with Otherwise everything looks great and is ready to go. We just need to make sure there is no regression introduced. |
|
I pushed a fix for the z-index, however I would appreciate some help with the dropdown menu. Turns out there are issues on all the breakpoints due to the addition of the BlockRemove button:
@gziolo if you have bandwidth to look at it, I'd really appreciate it, thank you. |
|
Thanks so much Riad! Okay now, thanks to Riad, this is ready for final review. |
|
It looks like we have a small white line at the side of the mover (noticed when the background is not white): |
| padding: ( $block-side-ui-width - 18px ) / 2; // this makes the SVG fill the whole available area, without scaling the artwork | ||
| } | ||
|
|
||
| // Apply a background in nested contexts, only on desktop |
There was a problem hiding this comment.
In nested contexts on mobile the contrast may be low:
But the result is better than what we had and finding a solution for this cases is really hard as the background color of the nested context is impossible to predict.
There was a problem hiding this comment.
Mix blend mode could help with that. Not the greatest support though.
|
Changes here improve the look and feel in nested contexts and the PR #5452 will benefit a lot from this changes 👍 Thank you @jasmussen! |
|
Thanks for the review, @jorgefilipecosta! Your feedback on other colored backgrounds is duly noted, and applies not only to nested contexts, but presumably also to when themes load their own stylesheets into the editor. It is on my todo list to tackle this next — perhaps using mix-blend-mode as @lsl suggested, or just replaing the grays with blacks and whites with varying opacities to better fit in, while maintaining contrast. Do you think, perhaps, that we should merge this PR in as is, and then tackle this separately, though? It seems like it would be nice to get these changes into 2.7 if we can. |
|
Got a thumbs up in chat. Going to merge this as is, and then tackle UI contrast issues separately. |
* Polish side UI, make arrows bigger. This is initial work to improve the side UI. It fixes WordPress#5400 and WordPress#4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process. * Refine mobile block UI, and responsive hover labels. * Add trash button to right side UI. More to come. * Enhance situation in wide blocks. * Remove role from Remove button, and remove Trash from menu. * Editor: Fix Eslint issues in BlockSettingsMenu * Refine collapsing margins hack, fix flickering. * Add some clearance between side UI and block. * Fix z-index issue. * Fix block settings dropdown menu
This PR optimizes and refines the side UI. In doing so, it fixes #5400 and #4223 by making the arrows visually bigger. It also simplifies the hover styles and improves mobile in the process.
These are now essentially "icon buttons", in that they have the same hover, click and border radius style. Although the buttons are only slightly bigger, the visually bigger hit area makes it feel more clickable as well.
As you can see, I also snuck in a trash button. Let me know your thoughts on that — it's easy to remove and restore later on, if we need to do that to ship the other enhancements, but it's very nice to have it surfaced there, and brings with it a nice consistency with mobile.