Try alternate block highlight/selection styles

[stokesman]

To fix #27925, this PR revises the styles for block highlight/selection indicators. Besides addressing the points in that issue, there is a minor change here to improve the alignment of the block select button in the editor's Select mode.

How has this been tested?

In WP 5.6, by selecting various blocks in both Select and Edit modes.

Screenshots

Select mode (Firefox)

The cursor is not captured but it is over the paragraph in both before and after screenshots.
Before

After

Multi-select (Firefox)

Before

After

Multi-select (Chrome)

Before

After

Types of changes

Polish, non-breaking design changes

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.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[jasmussen]

Thanks so much for this PR. It's tackling some important details around rounding, but notably the issues with rounding the .5px in Firefox, it's crucial we solve this. Using opacity to emulate the 1.5px is also a creative solution.

However it falls a bit flat on an actual 2x screen:

Before:

Quick question: I can't reproduce the rounding issues in Firefox on a 2x screen. Are you seeing rounding issues on a 2x screen, or are these issues primarily specific to 1x screens?

Because if the issues are primarily on 1x screens, I had meant to explore a way to make the 1.5px stroke be 2x for all screens with lower than 2x density. Something a la this:

--wp-border-width-focus: 2px;
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
	--wp-border-width-focus: 1.5px;
}

I might try a quick PR to see how that works, but definitely something to solve.

I'll respond to your ticket separately on the other issues.

[jasmussen]

I created #27968 as an alternative.

[stokesman]

Closing in favor of #27968