Size Change: +130 B (0%)

Total Size: 1.24 MB

_{compressed-size-action}

Thank you for the PR! Overwhelmingly when I make partial selections between two text blocks it is to delete just the selection and merge them. And when I select text and image, on the other hand, it's to delete both blocks in their entirety.

As exists in trunk at the moment, the selection doesn't always look great when made across multiple complex blocks, especially in the site editor. I think this PR can thread the needle:

I'm going to dive into see what we can do, stylewise, when flipping between partial and multi selection, explore what options we have to make that look good.

Needs design help: currently only the borders are visible, but we need to add a background colour so the native selection disappears.

Just as an experiment, does this code work for you?

::selection {
	background: transparent;
}

It would need to be contextual to just when blocks are multi selected (perhaps the hard part?), but theoretically it would allow us more control over the multi-selection style. Just as an experiment here's what I tried in the inspector:

Just as an experiment, does this code work for you?

Could you try it in this PR? It doesn't work for me to flip between visible/invisible while the selection is being set.

As exists in trunk at the moment, the selection doesn't always look great when made across multiple complex blocks, especially in the site editor.

That's because we look at native selection. What we can do it also look at mouseenter for blocks perhaps?

Diving in a bit deeper, this is what I'm seeing now:

I see the behavior: onmouseup, the native selection is hidden. Makes sense.

Regardless of what we can do with the multi selection style (I'll dive into some mockups in a moment), one thing that could be worth looking at, is when the multi selection applies. It is partially visible in the GIF above: I would expect the multi-selection to apply as soon as I drag into the image, but that doesn't always happen. In some cases, the selection only applies after I drag, what feels like, half way through the image. Do you have any idea if this is only on my side or not?

Nice work.

It is partially visible in the GIF above: I would expect the multi-selection to apply as soon as I drag into the image, but that doesn't always happen.

That's what I meant before:

That's because we look at native selection. What we can do it also look at mouseenter for blocks perhaps?

It's just how the browser is handling multi selection, but I guess we can look at additional events.

A couple of sketches of how selection could look. The following I would think to be the idealized version:

Essentially the same color that's used for the partial selection is used as a singular overlay color for the whole multi selection. I think this is likely going to be a bit of a technical challenge which I'll try and tinker with in a codepen. Ensuring contrast using filters is an idea, but it's a question how well that will work on different backgrounds. Unfortunately background-color: Highlight; has been deprecated, otherwise that would've been ideal.

Another option is to keep a plain partial selection style, and keep a customized multi-select style. In that case, I'm wondering if we shouldn't keep the spot color blue, including the border, but add a faded overlay as well. What do you think?

A couple of quick codepens and thoughts to get the discussion going. First off, this codepen, with native select, custom multi select:

And with custom select and multi select:

Neither of these are ideal, as the two selection styles feel too far removed from each other.

Another custom version, without the overlay:

same, but with native select:

These two are close to what we have today, but also not home-runs as the multi select style isn't necessarily as clear without the overlay.

This codepen I visually prefer, as it visually appears as a truly coherent singular style of selecting, both partial and multi. The colors/opacity aren't quite right, but the principle feels solid to me. Custom partial and multiselect:

This last one presents a technical challenge, though, in terms of ensuring it works in all contexts.

@jasmussen I actually had it wrong. It's not the fault of the native selection. We were looking at it wrong. I fixed it in #42983.

I'd still love to land a version of this one!

Okay, what do we still need for this one? :)

@jasmussen You didn't manage to remove the native selection when it goes over into full selection, right?

In any case, let's ship this and iterate.

You didn't manage to remove the native selection when it goes over into full selection, right?

It's invisible. I don't think user-select: none; would work either — I seem to recall testing that and it still behaving the same — but that's an option we can look at if it continues.

Please take a look at #44521 – it makes the new experimental/unstable selectors introduced in this PR private.