Hide block toolbar when focusing items in Inspector panel

[glendaviesnz]

What?

Hide the block toolbar if focusing any controls in the Inspector

🤖 Generated by Copilot at 70941eb

Added a feature to toggle the block interface visibility in the block editor and the visual editor. Refactored some components to use hooks and the block editor store.

Why?

To see if we can.

Fixes: #46192 - maybe

How?

Using the store actions added here #45131

Testing Instructions

• Add a paragraph block and change the font settings in Inspector panel and see if block toolbar disappears
• Click back on paragraph block and check toolbar appears again

Currently block will appear again if Inspector control has popups

Screenshots or screencast <!-- if applicable -→

[glendaviesnz]

@scruffian had a bit more of a think about this and because there are any number of popups running in the Inspector panel running in different slots it is not possible to easily determine that something in the Inspector panel is currently focused ... so I wonder if we are coming at it from the wrong end and should in fact only be showing the block toolbar if something within the current block DOM tree in the canvas has focus - can you see any issues with that approach?

[scruffian]

I can't think of any, but you often don't find them until you try!

[glendaviesnz]

I can't think of any, but you often don't find them until you try!

Yeh, of course once I started looking at it the tricky thing is that even if you are working on the block in the editor canvas there isn't always something focused in the current block DOM tree either, as you might by on a toolbar dopdown menu, or the block itself might load popups in slots ... will keep pondering the best way to approach this 🤔

[scruffian]

What if we simply hid the block toolbar when inspector controls were initially focussed, and brought them back when the main canvas window was focussed?

[glendaviesnz]

What if we simply hid the block toolbar when inspector controls were initially focussed, and brought them back when the main canvas window was focussed?

Yeh, that seems to work @scruffian - have adjusted PR so it hides the toolbar when the inspector is focused, and it only displays again when the block content is focused again.

[scruffian]

This is looking great. It would be good to get some feedback from others. cc @jasmussen @mtias

[jasmussen]

Thanks for working on this. The block toolbar disappearing when interacting in the inspector feels especially solid towards the end of this GIF when interacting with above-the-block margin visualization:

The only thing I'd love to see here is a) the toolbar quickly fading out instead of just disappearing, and then it fading back in when you're done interacting in the inspector. Right now the latter — the toolbar returning again — seems to be something that only happens occasionally.

[glendaviesnz]

Right now the latter — the toolbar returning again — seems to be something that only happens occasionally.

@jasmussen are you able to give an example of when it doesn't happen? For me when clicking back on the block content the toolbar always comes back.

[jasmussen]

are you able to give an example of when it doesn't happen? For me when clicking back on the block content the toolbar always comes back.

It does come back when clicking on the block again. What I'm suggesting is that it shouldn't require a click — it should fade back in when I'm done interacting in the sidebar.

This works almost correctly for margin, it appears:

Note how hovering and interacting with the margin control makes the toolbar disappear, but when I'm done, it comes back. This GIF also shows the limitations, though:

• The toolbar should appear only after the blue margin visualizer has disappeared
• ... or, it should fade in, at the same time as the blue margin visualizer fades out

[glendaviesnz]

Thanks for the extra detail @jasmussen, I see what you mean now, I will take another look at it, but just need to finish off something else first so may be a day or two before I get to it.

[glendaviesnz]

@jasmussen the version I just pushed works a little more like you suggest (minus animation fadein/out, will worry about that when basic mechanics are sorted). It is a little flakey though, the toolbar sometimes doesn't show again, trying to work out why, so don't worry about giving it a detailed test yet.

One issue with this is it is using a mouseOver on the editor canvas to show the toolbar again, but currently there is a gap between the color picker and the inspector panel so mousing across this gap shows toolbar again. You can see this at the end of the below video. Is there a reason why this gap is there, design aesthetic I am picking? Will need to figure out a workaround for this if the gap has to stay in place.

hide-toolbar-new.mp4

[glendaviesnz]

@scruffian, @jasmussen it is working a bit more reliably now. Before spending some time on the fade in/out animations do you want to check and see if it is working as you expect.

I added a debounce to get around the issue of mousing across to the color picker popup, which works as long as you don't dilly dally too long about that mouse move.

[jasmussen]

Behavior looks good at a glance. Just responding to the implementation challenge — prior to this PR, I think something somewhat similar was implemented for the margin visualization, that is: it stays visible until you're done interacting. I think that simply fades out when you mouse out of the control itself, or set focus outside of it. Instead of hovering over the canvas to resurface the toolbar (which seems like it could be far removed from where focus is), would doing something similar here work? Hide on hover and focus, then unhide on blur or mouseout?

[glendaviesnz]

I think something somewhat similar was implemented for the margin visualization, that is: it stays visible until you're done interacting. I think that simply fades out when you mouse out of the control itself, or set focus outside of it. Instead of hovering over the canvas to resurface the toolbar (which seems like it could be far removed from where focus is), would doing something similar here work? Hide on hover and focus, then unhide on blur or mouseout?

The margin/padding visualiser works by adding specific mousein/mouseout callbacks to the actual control - which was ok for that on-off use-case, but it doesn't really scale to every control in the Inspector panel, ie. we don't want to have to add these callbacks to every inspector control for every block.

I can't think of another way of managing it other than using the move back into the editor canvas to indicate that tinkering in the Inspector is finished, but will ponder it some more 🤔 , let me know if you have any ideas.

[jasmussen]

I can't think of another way of managing it other than using the move back into the editor canvas to indicate that tinkering in the Inspector is finished, but will ponder it some more 🤔 , let me know if you have any ideas.

Possible to do an onmouseout on the inspector?

[glendaviesnz]

Possible to do an onmouseout on the inspector?

The likes of the color picker popups mean this isn't possible as they are counted as mouse out of the inspector 😢

[glendaviesnz]

@jasmussen, @scruffian do you still think there is a need for this? I forgot all about it during the 6.2 wrap up, but can do some more exploration on it if you think it would be worthwhile.

[jasmussen]

I still think there is a need to generally hide obstructing UI in the canvas in certain contexts, and one of those contexts includes working with the inspector. Another might be hovering the sibling inserter, or even dragging a resize handle in the canvas.

But I also don't think it's an urgent request. It's a quality of life fix that is meant to feel natural, intuitive and obvious, so it's the type of feature that should be built right from the get-go, so that "fade out obstructing UI" is performant and easy to invoke from anything. Does that make sense?

[glendaviesnz]

This is very outdated, so going to close for now.