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

Polish the new multi-select style #18867

Merged
merged 2 commits into from Dec 4, 2019
Merged

Polish the new multi-select style #18867

merged 2 commits into from Dec 4, 2019

Conversation

@jasmussen
Copy link
Contributor

jasmussen commented Dec 2, 2019

In #16835, a new native selection style was introduced when selecting across blocks. This solves an accessibility issue with coloring the selection style, and enables the "inactive browser selection color" to work.

It also surfaced some small issues, notably one around nested blocks reported in #16835 (comment), and one with the placeholder selection seeming off.

In this PR I tried to tackle both. Worth noting that with multi-selection, we offer two indicators of selection:

  1. The native selection marker. This is the usually-blue marker behind text.
  2. An additional left border, matching the one of individual blocks being edited.

To improve the nesting situation, I limited that style to top level blocks:

Screenshot 2019-12-02 at 12 19 15
Screenshot 2019-12-02 at 12 19 41

To improve the placeholder issue, I made the selection style transparent there, as it is misleading, suggesting you copy the text from the placeholder description. Given the presence of the additional marker, the one referred to in 2 above, it shouldn't be necessary:

Screenshot 2019-12-02 at 12 26 26


To me, the above feels like a good first step at polishing the multi-select experience. However it also highlights some issues that perhaps deserve more love, notably:

  • In full-wide blocks, the left border is invisible.
  • While the placeholder does look selected, it could look more selected.

It seems like some of the efforts being explored in #18667 could inspire a better visual style for multi-selection. In that vein, I explored using the suggested visuals to imagine some new options.

Selecting Text:

It remains to be seen how feasible this is. We discussed it a bit in #16811 (comment), but if it is possible, then selecting between two text blocks should look as it does in every other text editor — like so:

Multi Selection, Between Text Blocks

As suggested, text blocks would make up the exception to the multi select rules, and as soon as you select beyond text and into another type of block, you'd get something more familiar. Perhaps something like this:

Multi Selection, Mixed Blocks, V1

The above is inspired by Navigation/Selection mode, and works to establish a singular style for when a block is actually selected (i.e. where when you press Delete, the blocks are removed).

I don't believe the following is possible, because it might need an additional wrapper around selections, and being aware of wide/fullwide scenarios. But if it were possible (JS positioned border?), It seems like the following would be even better:

Multi Selection, Mixed Blocks, V2

... that is, 1px borders around each individual blocks, and a 2px border that surrounds the whole selection. @ellatrix would appreciate your thoughts!

@jasmussen jasmussen requested a review from ellatrix Dec 2, 2019
@jasmussen jasmussen requested review from talldan and youknowriad as code owners Dec 2, 2019
@pablohoneyhoney

This comment has been minimized.

Copy link

pablohoneyhoney commented Dec 2, 2019

We probably don't need the small icon of three blocks selected as it is not used systematically. Otherwise, great stuff!

@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

ZebulanStanphill commented Dec 3, 2019

The PR needs to be rebased.

Visually, I think this PR is a definite improvement over master.

As for additional improvements, I think a blue block border around multi-selected blocks would be a good improvement over the current left border (which, as you mentioned, is not visible for full-width blocks).

Copy link
Member

ellatrix left a comment

Thanks for cleaning this up!

@jasmussen jasmussen force-pushed the polish/multi-select branch from 6690870 to 717c56e Dec 4, 2019
@jasmussen

This comment has been minimized.

Copy link
Contributor Author

jasmussen commented Dec 4, 2019

Thank you! Rebased and will merge when the checks pass.

@ellatrix

This comment has been minimized.

Copy link
Member

ellatrix commented Dec 4, 2019

Thoughts:

  • I like the blue border for extra clarity. Once we have something like partial multi block selection, it could be applied only when partial selection is not possible (for example, you select more than paragraphs).
  • Maybe the breadcrumb trail at the bottom of the page could be used for "3 blocks selected"? Currently there's nothing there for multi selection.
@jasmussen

This comment has been minimized.

Copy link
Contributor Author

jasmussen commented Dec 4, 2019

Both stellar ideas, Ella. When we get to those, feel free to ping me if I can help.

@jasmussen jasmussen force-pushed the polish/multi-select branch from 717c56e to b6ff923 Dec 4, 2019
@jasmussen jasmussen merged commit 1cfbeac into master Dec 4, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@jasmussen jasmussen deleted the polish/multi-select branch Dec 4, 2019
ZebulanStanphill added a commit that referenced this pull request Dec 4, 2019
@ZebulanStanphill

This comment has been minimized.

Copy link
Contributor

ZebulanStanphill commented Dec 4, 2019

This PR accidentally brought back part of the hover styles that were removed in #18862. I've created #18921 to fix this mistake.

ZebulanStanphill added a commit that referenced this pull request Dec 4, 2019
@jasmussen

This comment has been minimized.

Copy link
Contributor Author

jasmussen commented Dec 5, 2019

Thank you for the fix, Zeb!

@youknowriad youknowriad added this to the Gutenberg 7.1 milestone Dec 9, 2019
scruffian added a commit to scruffian/gutenberg that referenced this pull request Dec 10, 2019
* Limit additional selection marker to top level blocks.

Addresses WordPress#16835 (comment).

* Provide exception for placeholderes.
scruffian added a commit to scruffian/gutenberg that referenced this pull request Dec 10, 2019
jasmussen added a commit that referenced this pull request Dec 12, 2019
The new native selection style is much faster and an important step on the path to various writing-flow improvements. However until we can get closer to those improvements, in the mean time selecting multiple blocks is currently slightly less clear than it was prior to the native selection change.

In #18867 I tried to mitigate this, and it includes some mockups for how to improve the style longer term, with more thoughts being discussed in #18667.

But until that gets hashed out more clearly, perhaps we should rewind the visual style slightly, to be closer to what was, while still keeping the technical benefits of the native selection PR. This PR keeps those changes, but tweaks the visual style.

What it does is remove the left border style, and re-paints a cross-block background. But this time with a color that is closer to the default selection color on Windows and MacOS. Specifically, both those defaults are eye-dropped and averaged to create a new color that looks at home on both.

It is possible users can customize this select color, meaning the color of the selection marker inside text will diverge from that of multi-block selections. But this is unfortunately not something we can address. But the averaged color feels like a pretty good interim step towards a selection model that is perhaps closer to that of Figma, painting borders around each block instead of re-coloring the background.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.