Try: Larger drag handles #10331

chrisvanpatten · 2018-10-04T14:57:04Z

This is an attempt to make a larger target area for drag handles. The handle itself doesn't change its appearance, but you now have a larger target area for your cursor, as depicted here:

Basically the visible handle is now a pseudo element positioned inside the larger handle container.

Fixes #8206 — the larger target area makes it a bit easier to grab the handle when there's a block below the spacer block.

I'd like to also extend this to the image block but just want the OK before going forward with that.

Some other notes:

I introduced a new variable, $resize-handler-size: 16px, because until now the spacer and image drag handles were different sizes (15px and 16px respectively). If this approach is worth moving forward with, I'll use this variable on the image drag handles as well.

I am also using another new variable $resize-handler-container-size to calculate the size of the container (the drag handle plus padding). I'm doing it inline in the spacer block drag handle CSS block but if this moves forward I would move it in with the other variables. This is just temporary :)

tofumatt

Tested locally and this works for me. I like it.

Once the SCSS is tidied up a bit I say we ship it.

tofumatt · 2018-10-04T15:56:10Z

packages/block-library/src/spacer/editor.scss

 	position: absolute;
-	background: theme(primary);
+	left: calc(50% - #{$resize-handler-container-size / 2}) !important;


!important 😱

For real though, why are these here? We shouldn't need them, and if we really do we should have comments.

(But we shouldn't need them 😄)

+1 on avoiding !important when we're able to. I see that there's an inline style that includes a left rule. If possible could we try to update the related resizing JS to take this in account instead?

Adding !important rules makes this incredibly difficult to override, folks that would like other styles, basically end up needing to add another !important rule, and hope that the rule is read last.

@gwwar @tofumatt Agreed, but the resize component we're using here applies inline styles which we need to override. However I also see that they support a style prop so I'll see if I can just disable the inline styles.

tofumatt · 2018-10-04T15:56:45Z

packages/block-library/src/spacer/editor.scss

+	bottom: calc(#{$resize-handler-container-size / 2} * -1) !important;
+
+	// Apply the width/height of the container size plus padding so the handle
+	// sits in the middle of the grabbable area


Nitpick but it'd be nice if all of these comments ended in fullstops. I wish we had a linting rule for that! 😓

I like nitpicks 😜 I'll get it updated! Agreed, a linting rule would be nice, but maybe this could be put into contributing docs or something too?

I would approve such a pull request! 😄

karmatosed

I think this is a good addition, thanks!

…age block

chrisvanpatten · 2018-10-04T17:11:44Z

@tofumatt Unfortunately I was not able to remove the !important. I tried passing an empty object, false, and null to the ResizableBox component and the styles persisted.

So, in lieu of that, I wrote a bit of documentation and linked back to this ticket!

A few other tweaks:

Moved the container size variable into edit-post/assets/stylesheets/_variables.scss
Added mixins for the resize handle container and visible handle
Applied those mixins in the spacer block
Updated the image block to use the new mixins
Successfully tested the image block in various configurations (different alignments and such)

🚀

tofumatt

😭 Arg, so it's an upstream issue.

Can we file/find/link to an upstream issue that would allow us to override/disable their styles so we can avoid the !important usage?

After that I would... probably begrudgingly accept this 😅

jasmussen · 2018-10-04T18:11:37Z

Tried checking this out, and not really seeng any visual difference:

Which is the point, of course. And in that vein, ship it!

The bottom drag handle does sort of sit at the same spot where the sibling inserter is, which could be better. But that's a separate issue.

chrisvanpatten · 2018-10-04T18:23:43Z

@jasmussen I tracked that in #8206. It’s a little annoying but now there’s at least slightly more space to grab onto!

tofumatt · 2018-10-04T18:45:39Z

I know 235e8dc is more code but I super-appreciate the lack of !importants! ❤️❤️❤️

chrisvanpatten · 2018-10-04T18:45:47Z

@tofumatt Okay I think I got it now! I couldn't remove the entire style definition, but I could remove the properties individually. So we can now avoid !important here!

I'm pretty sure spacers and images are the only uses of drag handles in Gutenberg core blocks but if I'm wrong definitely let me know 🤘

A future improvement here might be to ship our own ResizableBox that extends re-resizable with shared class names across all block implementations rather than each block having its own block-specific resize handle classname. We could also probably simplify the API a bit with a wrapper. But I don't think that's necessary to tackle here and would require some other decisions that I'm not qualified to make :)

chrisvanpatten · 2018-10-04T18:46:17Z

@tofumatt You beat me by a hair ;-) But yes, I agree — no !important is worth it!

jasmussen · 2018-10-04T18:52:31Z

I'm pretty sure spacers and images are the only uses of drag handles in Gutenberg core blocks but if I'm wrong definitely let me know 🤘

They will also be used in #9416 by @jorgefilipecosta

tofumatt

Sooooo, this is good but given we reproduce this bit of code twice, maybe we want a common component that is a <ResizableBox> with the style overrides? I could see this happening again without someone catching it.

I think this is worth shipping now but can you file a follow-up issue to combine these? Actually, maybe it wouldn't make sense as the overrides vary? I dunno, if you think it's worth combining them a follow-up code quality issue would be cool. If you think it's not worth it that's fine.

chrisvanpatten · 2018-10-04T18:54:40Z

@jasmussen Ooh, thanks for the heads up.

@tofumatt Yeah I think it's worth following this up with a "create our own wrapper around ResizableBox" PR, but I'd like to handle (heh) that in a separate issue :)

chrisvanpatten · 2018-10-04T19:02:51Z

Thanks for the support and guidance on this everyone!

Try larger drag handles on the spacer block

d8acfdc

chrisvanpatten added the [Type] Enhancement A suggestion for improvement. label Oct 4, 2018

chrisvanpatten requested review from tofumatt, jasmussen and a team October 4, 2018 14:57

tofumatt requested changes Oct 4, 2018

View reviewed changes

karmatosed approved these changes Oct 4, 2018

View reviewed changes

Move resize styles to mixins, document use of !important, apply to im…

b02d52b

…age block

Use BEM-ish/more descriptive names for the mixins

9091b5c

tofumatt reviewed Oct 4, 2018

View reviewed changes

Un-set inline styles on drag handles to avoid !important

235e8dc

tofumatt added this to the 4.0 milestone Oct 4, 2018

Add some full stops, full stop.

a7060ae

tofumatt approved these changes Oct 4, 2018

View reviewed changes

chrisvanpatten mentioned this pull request Oct 4, 2018

Create wrapper component around ResizableBox #10343

Closed

chrisvanpatten merged commit b09005c into WordPress:master Oct 4, 2018

chrisvanpatten deleted the try/bigger-drag-handles branch October 4, 2018 19:02

chrisvanpatten mentioned this pull request Oct 4, 2018

Introduce a ResizableBox component #10347

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try: Larger drag handles #10331

Try: Larger drag handles #10331

chrisvanpatten commented Oct 4, 2018 •

edited

Loading

tofumatt left a comment

tofumatt Oct 4, 2018 •

edited

Loading

gwwar Oct 4, 2018 •

edited

Loading

chrisvanpatten Oct 4, 2018

tofumatt Oct 4, 2018

chrisvanpatten Oct 4, 2018

tofumatt Oct 4, 2018

karmatosed left a comment

chrisvanpatten commented Oct 4, 2018

tofumatt left a comment

jasmussen commented Oct 4, 2018

chrisvanpatten commented Oct 4, 2018

tofumatt commented Oct 4, 2018

chrisvanpatten commented Oct 4, 2018

chrisvanpatten commented Oct 4, 2018

jasmussen commented Oct 4, 2018

tofumatt left a comment •

edited

Loading

chrisvanpatten commented Oct 4, 2018

chrisvanpatten commented Oct 4, 2018

Try: Larger drag handles #10331

Try: Larger drag handles #10331

Conversation

chrisvanpatten commented Oct 4, 2018 • edited Loading

Some other notes:

tofumatt left a comment

Choose a reason for hiding this comment

tofumatt Oct 4, 2018 • edited Loading

Choose a reason for hiding this comment

gwwar Oct 4, 2018 • edited Loading

Choose a reason for hiding this comment

chrisvanpatten Oct 4, 2018

Choose a reason for hiding this comment

tofumatt Oct 4, 2018

Choose a reason for hiding this comment

chrisvanpatten Oct 4, 2018

Choose a reason for hiding this comment

tofumatt Oct 4, 2018

Choose a reason for hiding this comment

karmatosed left a comment

Choose a reason for hiding this comment

chrisvanpatten commented Oct 4, 2018

tofumatt left a comment

Choose a reason for hiding this comment

jasmussen commented Oct 4, 2018

chrisvanpatten commented Oct 4, 2018

tofumatt commented Oct 4, 2018

chrisvanpatten commented Oct 4, 2018

chrisvanpatten commented Oct 4, 2018

jasmussen commented Oct 4, 2018

tofumatt left a comment • edited Loading

Choose a reason for hiding this comment

chrisvanpatten commented Oct 4, 2018

chrisvanpatten commented Oct 4, 2018

chrisvanpatten commented Oct 4, 2018 •

edited

Loading

tofumatt Oct 4, 2018 •

edited

Loading

gwwar Oct 4, 2018 •

edited

Loading

tofumatt left a comment •

edited

Loading