Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multi-select: Polish further, try new style. #19094

Merged
merged 1 commit into from Dec 13, 2019
Merged

Conversation

@jasmussen
Copy link
Contributor

jasmussen commented Dec 12, 2019

This PR is an alternative to #19088 and only one should be merged.

This approach taken in this PR is not to paint a background, but to move towards the selction model that apps like Figma leverage, which is to draw a thick border around selected blocks. It makes sense in that you're no longer selecting text, you're selecting blocks.

A benefit of this approach is that it shows the blocks true footprint, not the padded one that has spacing around it that doesn't exist on the frontend.

GIF:

multi select alt

Another benefit is that this works well for full-wide blocks:

fullwide

This PR is an alternative to #19088 and only one should be merged.

This approach taken in this PR is not to paint a background, but to move towards the selction model that apps like Figma leverage, which is to draw a thick border around selected blocks. It makes sense in that you're no longer selecting text, you're selecting blocks.
@karmatosed

This comment has been minimized.

Copy link
Member

karmatosed commented Dec 12, 2019

I just spent some testing both PRs of this. As noted in the other issue, my first instinct wasn't to this one. My perspective changed on testing more dense layouts:

image

As you can see above, that's a quite intense interface created, whereas in this PR you have:

image

I might go a little further considering a deeper border, but as the layout gets more complex this version should allow you to see what is going on more than a blanket blue highlight.

@jasmussen

This comment has been minimized.

Copy link
Contributor Author

jasmussen commented Dec 12, 2019

Perhaps the deeper blue suggested in the g2 UI would provide some vibrancy that in addition to the border provides visibility?

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

ZebulanStanphill commented Dec 12, 2019

I like this. It conveys the difference between selected text and selected blocks and makes it a lot easier to tell which blocks are selected in nested contexts.
image
The heavy left border on the multi block toolbar looks a little awkward, though. Not sure if it's worth changing in this PR since the block toolbar is getting a major design update anyway.

@jasmussen

This comment has been minimized.

Copy link
Contributor Author

jasmussen commented Dec 13, 2019

I like this. It conveys the difference between selected text and selected blocks and makes it a lot easier to tell which blocks are selected in nested contexts.

That's a good point as well.

The heavy left border on the multi block toolbar looks a little awkward, though. Not sure if it's worth changing in this PR since the block toolbar is getting a major design update anyway.

I am excited to refine the block toolbar, but I do worry that if we do some aspects piecemeal we'll end up with an interim that looks kind of messy and unfocused. I think we should remove that border when we look at the borders and toolbar together, the chief driver being the improvement of focus rectangles.

I think we can probably keep #19088 open and if you agree we can merge this to master and try it out? It might even be good to keep handy in case we make a plugin point release.

Copy link
Member

karmatosed left a comment

As these are style changes, approving.

@karmatosed karmatosed merged commit 4496ec8 into master Dec 13, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@karmatosed karmatosed deleted the polish/multi-select-alt branch Dec 13, 2019
@ellatrix

This comment has been minimized.

Copy link
Member

ellatrix commented Dec 13, 2019

Thanks for this PR. I'm a bit surprised that there's no more text selection when you end the selection. That's fine I guess, but we will need it again in some cases when we have partial multi block selection. Also, since this PR now hides the selection at the end, there's no need to run the code that sets it.

@ellatrix

This comment has been minimized.

Copy link
Member

ellatrix commented Dec 13, 2019

How does this look on dark backgrounds? Has it been tested? Why not leave the text selection for extra clarity (it's really visible, works on all kinds of backgrounds)?

@jasmussen jasmussen mentioned this pull request Dec 13, 2019
@youknowriad youknowriad added this to the Gutenberg 7.2 milestone Jan 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.