Minuscule issues with block highlight/selection styles

[stokesman]

Here are three little things I hope we might improve upon. These are so little that they are probably best reviewed with a low DPI display or a with a magnifier for a high DPI display 🔍 .

1. Line-weight is prone to rounding inconsistencies (Firefox)

That's due to the use of 1.5px for the box-shadow spread-radius (aimed to match icon line-weights). IMO there's another little downside to this. Even on a browser that doesn't produce the rounding inconsistencies, the appearance of the line is soft or fuzzy (noticeable at least on common low DPI displays).

2. Part of the line is outside the block rectangle

So if the parent block hides overflow there is some clipping

I don't think there's a core block that this applies to. I ran across it with a custom block I'm building.

Another side to this is plain ol’ alignment. I think it's unsightly that the edge of the highlight/selected indicator almost aligns to the block toolbar. (In the above graphic it does align due to the clipping. The graphic in the next section does show the almost alignment.)

3. Corners are too round

The “outline” is drawn with the box-shadow property and, being drawn outset to the box, would naturally have a larger radius. In the current styles, there is an attempt to compensate which reduces the border-radius from 2px to 1px.

gutenberg/packages/block-editor/src/components/block-list/style.scss

Line 66 in 5c86e8a

border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.

Yet that still produces an overly round corner. Here's a graphic with some magnified portions to demonstrate the actual border-radius rendered and from left to right is the current style, then subsequent reductions in border-radius to achieve a rendered 2px radius (viewed in Google Chrome)

That's way more compensation than I expected and not something that can be easily derived from the available variables. This is not a recommendation to use a 0.075px border-radius.

To be continued...

I'll be making a PR with resolutions for these issues but both the 1st and the 3rd have parallels in other parts of the UI and could use follow-ups if these issues are deemed worthy of addressing.

[jasmussen]

Great ticket, and important one, thanks again. Really appreciate your help here.

The rounding issue, I'd say, is the most urgent one to solve. I responded on your PR with some thoughts.

2. Part of the line is outside the block rectangle
3. Corners are too round

In your screenshot, the selection style is black. Is that a separate WP-admin color scheme? Is it in the post or site editor?

I'm primarily asking for clarification because both the line-outside-the-rectangle and roundness of the corners have been intentionally designed around the placeholder box:

As you can see in that GIF, the empty placeholder box has a 1px dark border with 2px radius, exactly like the block toolbar. And when focused, the blue selection indicator is placed exactly on top of that 1px border. It does grow outwards rather than inwards, which visually seems to affect the radius (the outside radius appears bigger). That's something we can revisit of course, but in the situation where we have to go full 2px with the border radius (in case I can't get this fix to work), it feels less heavy than going inwards:

[jasmussen]

I created #27968 to try the above media query idea. It seems to work okay?

[stokesman]

Joen, Thanks for the extra info on this. I'd agree that only the rounding issue seems crucial.

In your screenshot, the selection style is black. Is that a separate WP-admin color scheme? Is it in the post or site editor?

It's the Coffee admin color scheme and in the Post Editor.

[jasmussen]

It's the Coffee admin color scheme and in the Post Editor.

Awesome. It seems like the accent color is worth iterating as part of https://core.trac.wordpress.org/ticket/49999, so it has contrast to black.

[shaunandrews]

It does grow outwards rather than inwards, which visually seems to affect the radius (the outside radius appears bigger).

Visually, I think the "grow inwards" option actually works better.

But affecting the display inside the block will likely lead to obscuring the content of the block, as you can see in the image Joen posted above — the outline overlaps the text. I think this should be avoided.

So I think the "grow outwards" option better, even if it causes some visual discord with the block toolbar.

--

I wanted to suggest looking at different treatments for outline states, perhaps keeping a 1px border and using dotted, dashed, and solid line styles — but I know the current thick, blue border is supposed to relate to the standard :focus indicator throughout the rest of the UI.

[jasmussen]

Whether inset, outset, or both at the same time, one key thing to keep in mind is fullwide blocks, like this:

If the block is truly edge-to-edge, then only an inset style will still be visible there.

That in turn needs to be balanced against this:

The more inset it is, the more it covers the content.