Select Tool: Show block borders on :hover while using the Select tool
#22508
Conversation
|
Size Change: +235 B (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
|
Shaun! This is looking pretty good. I've got some feedback after testing this out. 1. Border jumpingThere's a weird action while hovering where the border jumps.
2. Border contrastThe borders should adapt to allow proper color contrast levels depending on the background.
3. Nested blocksShould the user see every block they hover over? Or just the immediate child block border? Right now, as in the above gif, the user only would see the immediate child block's border. Related: #22383 |
|
Let's try to aim for just one block showing borders at a time. |
|
Yeah, for simplicity, let's just show the hovered block's border. We can always change it later, and just getting this in will be a nice enhancement. I know there are some people who have complained that they can't see the borders of blocks, and this should at least help a little if not a lot. I also think adding this hover interaction makes a lot of sense for a "select" mode. You're trying to select a block, so it makes sense that you would want to get an idea of which block you're about to select by seeing its borders. This will make Select mode a lot more useful for mouse users. |
packages/block-editor/src/components/block-list/block-wrapper.js
Outdated
Show resolved
Hide resolved
|
With some help from @ellatrix I managed to get this working so that only a single block border appears as you move your cursor around. Here's how its looking now:
--
I've no clue what's causing this, but its less noticeable with the recent updates. I think its something to do with the shape of the block's element changing for some unknown reason.
I'm not so sure. The current select border doesn't really adapt, and if you compare with tools like Figma or Sketch the border color is consistent regardless of colors on the canvas. -- I do notice that with the Select tool, the borders don't display for blocks nested within a Group block. However, this seems to be related to the Select tool itself — if I enable the CSS styles for the Edit tool, I'm able to highlight nested blocks just fine. |
|
Just took this for a spin and it feels good. I particularly like how the hover border is very thin and neutral. Is there any reason why this hover effect is only available on the Select mode? I feel this will be useful no matter what mode you're on. |
|
This last version looks to be arriving at a good place. |
We used to have block borders shown on hover all the time, but it was removed to make the editor look more like the front-end by default (only the selected block should have its appearance modified) and to reduce UI flashing as you move your cursor around. It was part of the whole G2 effort to lighten the UI. I think it's a good idea to bring back hover borders in Select mode, though, since that mode is specifically designed for selecting blocks, and showing borders makes a lot of sense in that context. |
|
I just tried out this branch. It seems to be working pretty well. The only thing I'm not sure about is the color of the hover border. It seems maybe a bit too light? |
|
The SCSS variable I used, It felt good to me when using. The name of the variable seems to match to intention here, but I'd be happy to change the hover color to something else. |
|
For me the light-gray works as it is just enough to support the movement. I don't think it needs to be high contrast beyond that, but that could be explored as an iteration if proven to be a need. The color is less important in strength than the movement with an indicator. |
|
|
||
| .is-navigate-mode & .block-editor-block-list__block.is-hovered:not(.is-selected)::after { |
There was a problem hiding this comment.
Would it be ok to only apply the hovered class in navigation mode? This might make edit mode a bit more performant, if the mouse listeners are gone.
There was a problem hiding this comment.
Yea, that'd probably work just fine I think.
There was a problem hiding this comment.
Ok, I changed its so the class is only added in navigation mode. So this .is-navigate-mode can be removed here and above.
There was a problem hiding this comment.
Perhaps the class name should be updated to reflect that it isn't applied every time the block is hovered, but only when it's hovered in navigation/select mode?
|
I'm not opposed to the current color, so feel free to merge if you want to! |
shaunandrews
force-pushed
the
try/select-mode-block-hover-outlines
branch
from
56bd95a to
92caa88
Compare
|
Is this supposed to still be working? :p I am not seeing it work for any blocks locally currently. Not sure if bug or if it was removed on purpose! edit: this might also just be a bug of what I'm working on |
|
@noahtallen It's working for me on the latest
|
|
Thanks! I think it is an issue with what I'm working on. The changes seemed unrelated which is why I started looking here :) |
This PR adds a border to blocks while hovering with the Select tool active: