Try: Nicer block footprint for social links. #20978
Conversation
| @@ -15,41 +15,10 @@ | |||
| // @todo: eventually we may add a feature that lets a parent container absorb the block UI of a child block. | |||
| // When that happens, leverage that instead of the following overrides. | |||
| [data-type="core/social-links"] { | |||
| // 1. Reset margins on immediate innerblocks container. | |||
There was a problem hiding this comment.
All this red is dead CSS per the G2 effort.
| @@ -114,3 +83,9 @@ | |||
| // Windows High Contrast mode will show this outline, but not the box-shadow. | |||
| outline: 2px solid transparent; | |||
| } | |||
|
|
|||
| // To ensure a better selection footprint when editing, attach the margin to the block container. | |||
There was a problem hiding this comment.
This CSS should become dead eventually, but in the mean time it improves the experience.
|
Size Change: +268 B (0%) Total Size: 857 kB
ℹ️ View Unchanged
|
|
Still seeing that wide rectangle on navigation mode. Here is a gif of me jumping around by tabbing.
Kinda curious why it switches between a square and then a circle on the highlight. Seems like the circle you can actually change the link by hitting enter, but both seem to have the same block toolbar and sidebar. |
|
Great catch on selection mode. I'll see if I can augment the hack a bit to address that.
This is something we should absolutely improve. It's the difference between the block having focus, and the button inside the block having focus. I suspect that we might be able to unify those two, so that focusing the button actually focuses the block itself, because the distinction (given there's only one button per block) does not seem valuable. The tricky part is that you still have to be able to click the button to open the URL dialog, which kind of suggests it has to be focusable as well. So ensuring a unification of these is both mouse and keyboardable is a bit tricky, but something to definitely improve. |
|
Pushed fix for selection mode.
As is commented in the code, once the DOM is lighter for this block, which is one PR per block, that CSS can be removed. But it does improve the experience in the meantime. |
|
@jasmussen did you push? Not seeing any new commits. |
|
I did push, but I forgot to commit 🤦♂ Thanks! |
|
Thank you! |
|
Nice stuff! |
Let the images speak. Before:
After: