ResizableBox: Add visual handles for side resizers #14543

marekhrabe · 2019-03-21T03:54:53Z

Description

This builds on top of my #14481 which made handles much bigger. This PR adds a secondary visual aid to them, apart from the mouse cursor.

The blue line design was suggested in #14410 (comment) by @melchoyce. In this PR, it differs a tiny bit from the sketch as it has an extra white border around the blue circle. Without changing the markup to add more elements, this is the best we could do I think.

I've made them appear only on hover in the first iteration - sliding out of the blue circle to indicate what control they belong to.

How has this been tested?

Test with blocks: Media & Text, Image (align it "center" to show most handles at once) and Spacer. They all use ResizableBox internally.

Screenshots

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

marekhrabe · 2019-03-26T08:08:53Z

@melchoyce What do you think?

mapk · 2019-03-26T21:55:52Z

I really like the way this is looking, @marekhrabe! Thanks for working through this.

In the image below, I circled three different line weights which bothered me a bit. There's a really thin 1px block outline, a 3px left block border, and then the 2px blue resizable bar.

In an attempt to add a bit of consistency, I made the resizable blue border thicker in the example below to match the weight of the left block border. This feels a little heavy, so I'd like some feedback from other designers. @melchoyce @kjellr thoughts?

marekhrabe · 2019-03-27T07:34:24Z

Also the blue dot and also the blue line both have a white outline of 2px to distinguish them from content. Would that be something that we should focus on too?

Just a tiny technical one: we cannot center the blue line properly towards the blue dot, unless we either make it even one more pixel wider than you did or we make the dot one pixel smaller.

kjellr · 2019-03-27T12:29:00Z

Also the blue dot and also the blue line both have a white outline of 2px to distinguish them from content. Would that be something that we should focus on too?

Yeah, we need to adjust this a bit so that it works on dark themes. Currently it's pretty jarring:

A couple options:

Remove the white entirely. This makes the blue harder to see, but I don't think it's necessarily a bad option.
Replace the white with one of our opacity values. If we want with this route, we'd want to also build in a .is-dark-theme & style, like we do for block borders.

Just a tiny technical one: we cannot center the blue line properly towards the blue dot, unless we either make it even one more pixel wider than you did or we make the dot one pixel smaller.

I'd like to see these match up nicely, so let's try making the dot one pixel smaller.

marekhrabe · 2019-03-27T13:11:51Z

Hmmm, opacity value would probably clash in a weird way where the line and dot meets. I can try it without those border lines it but I remember it used to "disappear" in the image.

melchoyce · 2019-03-29T16:48:30Z

CoBlocks doesn't do anything for dark themes, looks like, but it works a little better because all of the lines are thicker:

marekhrabe · 2019-04-08T12:51:32Z

New thickness and using a light gray instead of full white when dark theme detected (same as the selected block border in fact). Let me know what this iteration looks like

tomjn · 2019-04-09T11:42:48Z

The circle doesn't make clear that this is for resizing, which isn't a problem with the mouse cursor, but it could be confusing for users of touch devices?

Perhaps when the control is being moved, it can swap the circle out for arrows

mapk · 2019-04-10T00:35:40Z

I tested this today and it feels pretty comfortable. The line weights were great.

Perhaps when the control is being moved, it can swap the circle out for arrows

Adding anything more than simple dots might get too overwhelming, especially on mobile. I took a look at Google Docs and they just use simple squares. There are more of them but I think we're at a good position here. Ultimately I'd like to see us work toward the resizing while displaying values like in CoBlocks, but that can be another PR.

marekhrabe · 2019-04-10T05:12:44Z

Ultimately I'd like to see us work toward the resizing while displaying values like in CoBlocks, but that can be another PR.

Absolutely! I'm trying to do granular improvements with my PRs instead of one big. General ideas tracked in #14410

Would you say this is ready to go from a design perspective and I can ask for a final code review?

mapk · 2019-04-10T13:38:09Z

Would you say this is ready to go from a design perspective and I can ask for a final code review?

From a design perspective, yes. It's ready to go. 👍

kjellr · 2019-04-10T18:40:19Z

packages/components/src/resizable-box/style.scss

+// Hide side handle line by default
+.components-resizable-box__side-handle.components-resizable-box__handle-top::before,
+.components-resizable-box__side-handle.components-resizable-box__handle-bottom::before {
+	transform: scaleX(0);


A couple animation notes: Just noting that scale is one of the less performant animations. I don't think it's a huge issue here since we're only animating borders basically. Shouldn't have a huge impact.

In any case though, we should move these into an animation property and combine it with opacity animation as well so this animation relates a bit more to some of the other animations we have happening in the UI. Then we can also loop in the @reduce-motion mixin for users that want to opt out of the animation as well.

@marekhrabe I have that change ready locally — do you mind if I push it to this branch?

I have that change ready locally — do you mind if I push it to this branch?

You rock! Please do 🤘

youknowriad · 2019-04-11T07:45:17Z

I had an issue when resizing the media & text image when it's full-width aligned. I don't really think it's related to this PR but worth mentioning. There's a flickering effect and sometimes the image appears cropped or disappear entirely.

youknowriad

Nice work here 👍

I'll leave the final word for @kjellr to add his commit if needed.

kjellr · 2019-04-11T12:52:07Z

Alright, I merged those animation changes in. I had to sync up with master since this PR was started before the reduce-motion mixin existed. I think this needs to be rebased before merged in, but otherwise it should be all set. 👍

youknowriad · 2019-04-11T12:59:27Z

@kjellr I think something went wrong here with the rebase/merge?

marekhrabe · 2019-04-11T13:42:39Z

I've updated the PR to target master instead of my other branch which got merged in #14481. All looking good now including the rebase @kjellr done

youknowriad · 2019-04-11T14:37:10Z

Nice let's ship it

kjellr · 2019-04-11T14:43:10Z

🎉 Excellent, thanks folks!

marekhrabe · 2019-04-12T04:40:19Z

It's been a pleasure collaborating on this! 🥳

How do I proceed? I cannot merge, as Travis CI is pending and doesn't seem to do anything or provide a way to trigger it.

youknowriad · 2019-04-12T08:43:48Z

Merged, I don't expect this to break any tests, but let's keep an eye on the builds in master.

marekhrabe · 2019-04-17T09:44:57Z

After using this in the wild, I've noticed that the conversion of my transition into the animation has caused additional flickering of the blue line which wasn't present before.

It likely happens because we have styles for both :hover and :active (which we need), however compared to the transition, the animation will is played even when switching from :active back to :hover. That happens when you release the mouse button after a resize.

What was the reason for moving this into animation? Would you be opposed of going back to the transition and implementing opacity and reduced motion for it instead of animation? Unless I'm missing something crucial, it should be an easy change.

kjellr · 2019-04-17T12:07:00Z

Ah, good catch. We could re-adopt transition there if this is causing issues. The main reason for switching to animation was to hook into the existing reduce motion mixin, but I think we'll probably end up adjusting that mixin to account for transition properties too. So it should be fine to change that back.

marekhrabe · 2019-04-17T13:00:26Z

Cool, I'll spin up a PR and update the mixin (or figure out another solution). I'll ping you there :)

kjellr · 2019-04-17T13:01:41Z

Thank you!

marekhrabe · 2019-04-30T07:09:02Z

I've brought back the transition and it solved the issue mostly but some kind of tiny flicker still appeared in limited cases and I haven't been able to figure out how to get rid of it fully.

With that, I'll leave this like it is for now and potentially later investigate the underlying library. I think that the problem lies somewhere there…

marekhrabe added 4 commits March 18, 2019 13:10

make invisible resize handles bigger

6d7e723

add support for all possible handles (even corners)

63c06de

add comment about functional/visual parts

d36adf7

add visual side handle

17b533a

marekhrabe self-assigned this Mar 21, 2019

marekhrabe requested a review from melchoyce March 21, 2019 03:54

marekhrabe requested a review from chrisvanpatten as a code owner March 21, 2019 03:54

youknowriad added the Needs Design Feedback Needs general design feedback. label Mar 27, 2019

marekhrabe added 2 commits April 8, 2019 21:39

different thickness, gray border in dark themes

affd6b8

same border as block selection

a46f529

marekhrabe requested a review from youknowriad April 10, 2019 13:36

kjellr reviewed Apr 10, 2019

View reviewed changes

kjellr added 3 commits April 10, 2019 14:45

Move resize handle animations to an animation property

faf2ced

Merge branch 'master' into update/resizable-box-visual-handles

55150e7

Add reduce motion mixin to the resize handles.

f5d15cf

youknowriad approved these changes Apr 11, 2019

View reviewed changes

marekhrabe requested review from adamsilverstein and aduth as code owners April 11, 2019 12:45

marekhrabe requested review from oandregal, notnownikki, ntwb, Soean, swissspidy and talldan as code owners April 11, 2019 12:45

Merge branch 'master' into update/resizable-box-visual-handles

ae96d11

marekhrabe changed the base branch from update/resizable-box-handles to master April 11, 2019 13:40

youknowriad merged commit c82cdcf into master Apr 12, 2019

youknowriad deleted the update/resizable-box-visual-handles branch April 12, 2019 08:43

youknowriad added this to the 5.5 (Gutenberg) milestone Apr 12, 2019

mchowning pushed a commit to mchowning/gutenberg that referenced this pull request Apr 15, 2019

ResizableBox: Add visual handles for side resizers (WordPress#14543)

beb126d

This was referenced Apr 15, 2019

Bump version number to 5.5.0-rc.1 #14981

Merged

Bump/5.5 #15011

Closed

Release/5.5 #15012

Closed

Bump plugin version to 5.5 #15013

Merged

swissspidy mentioned this pull request Apr 24, 2019

[AMP Stories] Improve resize handle styling ampproject/amp-wp#2184

Closed

kjellr mentioned this pull request May 2, 2019

Media & Text: Improve resizing #14410

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ResizableBox: Add visual handles for side resizers #14543

ResizableBox: Add visual handles for side resizers #14543

marekhrabe commented Mar 21, 2019

marekhrabe commented Mar 26, 2019

mapk commented Mar 26, 2019

marekhrabe commented Mar 27, 2019

kjellr commented Mar 27, 2019 •

edited

Loading

marekhrabe commented Mar 27, 2019

melchoyce commented Mar 29, 2019

marekhrabe commented Apr 8, 2019

tomjn commented Apr 9, 2019

mapk commented Apr 10, 2019

marekhrabe commented Apr 10, 2019 •

edited

Loading

mapk commented Apr 10, 2019

kjellr Apr 10, 2019

marekhrabe Apr 11, 2019

youknowriad commented Apr 11, 2019

youknowriad left a comment

kjellr commented Apr 11, 2019

youknowriad commented Apr 11, 2019

marekhrabe commented Apr 11, 2019

youknowriad commented Apr 11, 2019

kjellr commented Apr 11, 2019

marekhrabe commented Apr 12, 2019

youknowriad commented Apr 12, 2019

marekhrabe commented Apr 17, 2019

kjellr commented Apr 17, 2019

marekhrabe commented Apr 17, 2019

kjellr commented Apr 17, 2019

marekhrabe commented Apr 30, 2019

ResizableBox: Add visual handles for side resizers #14543

ResizableBox: Add visual handles for side resizers #14543

Conversation

marekhrabe commented Mar 21, 2019

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

marekhrabe commented Mar 26, 2019

mapk commented Mar 26, 2019

marekhrabe commented Mar 27, 2019

kjellr commented Mar 27, 2019 • edited Loading

marekhrabe commented Mar 27, 2019

melchoyce commented Mar 29, 2019

marekhrabe commented Apr 8, 2019

tomjn commented Apr 9, 2019

mapk commented Apr 10, 2019

marekhrabe commented Apr 10, 2019 • edited Loading

mapk commented Apr 10, 2019

kjellr Apr 10, 2019

Choose a reason for hiding this comment

marekhrabe Apr 11, 2019

Choose a reason for hiding this comment

youknowriad commented Apr 11, 2019

youknowriad left a comment

Choose a reason for hiding this comment

kjellr commented Apr 11, 2019

youknowriad commented Apr 11, 2019

marekhrabe commented Apr 11, 2019

youknowriad commented Apr 11, 2019

kjellr commented Apr 11, 2019

marekhrabe commented Apr 12, 2019

youknowriad commented Apr 12, 2019

marekhrabe commented Apr 17, 2019

kjellr commented Apr 17, 2019

marekhrabe commented Apr 17, 2019

kjellr commented Apr 17, 2019

marekhrabe commented Apr 30, 2019

kjellr commented Mar 27, 2019 •

edited

Loading

marekhrabe commented Apr 10, 2019 •

edited

Loading