Add a help panel to the inserter available in all blocks

[youknowriad]

First step towards #16592

This expands the current "preview panel" when you hover reusable blocks in the inserter to become a help panel.

For the moment the PR only adds the "BlockCard" (title, icon and description) to that panel.
It raises some questions though:

• Do we want to keep showing this panel on hover? How can we show it in a more permanent way but without having to click (as it would insert the block)
• Don't mind the broken reusable blocks preview (this is broken in master too and tracked in Reusable blocks preview not working. #16808)

[kjellr]

Thanks for getting this started!

A couple quick observations so far:

First, the empty space in between each item causes this to be a little jarring:

The constant show/hide gets to be a little flashy. We could fix this in one of two ways:

1. Adjusting the hit area for the hover, so that here are no gaps in between each item.
2. Keep the panel itself visible at all times, but use some sort of "Hover over a block on the left to preview it" placeholder message when a block isn't selected. In this case, at least it's just the content that's showing/hiding, not he entire panel.

In both cases, I think we can refine by adding some more relaxing fade animations.

Regarding this note:

How can we show it in a more permanent way but without having to click (as it would insert the block)

This is a great question. I do think it would be beneficial to allow folks to keep a specific block's panel open beyond just the hover state. Especially if we place tips in there — the extra reading time is beneficial. In the current PR, this is possible by using he keyboard to activate the :focus state, but I'm stumped so far on a good way to enable that using just the mouse. If anyone has any great ideas, please share...

[kjellr]

Keep the panel itself visible at all times, but use some sort of "Hover over a block on the left to preview it" placeholder message when a block isn't selected. In this case, at least it's just the content that's showing/hiding, not he entire panel.

If we go with this option (which I think is probably the simplest?) here's a first pass at a mockup for it:

This would provide a great place to surface the first tip from #16582 as well.

[youknowriad]

@kjellr Another possibility I considered is to keep the last hovered block visible even if you move out from it.

[kjellr]

@kjellr Another possibility I considered is to keep the last hovered block visible even if you move out from it.

🎉 I like that better. Let's try that first.

[mtias]

Keeping the last block visible could be disconcerting. I was hoping we could use this as a permanent place for saying what blocks are and showing some tips. We could rotate different tips that don't fit in a specific block but are related to editing / insertion.

[kjellr]

Keeping the last block visible could be disconcerting. I was hoping we could use this as a permanent place for saying what blocks are and showing some tips. We could rotate different tips that don't fit in a specific block but are related to editing / insertion.

I think keeping the last block selected is worth trying, since it'll help eliminate the flash that you see when you hover over the empty areas in between the block buttons.

The more general tips and intro panel are still definitely possible either way — It would make sense to have the panel open with general information about blocks when you first open up the inserter, and before you hover over a block icon.

[mtias]

to have the panel open with general information about blocks when you first open up the inserter, and before you hover over a block icon.

Agreed, it'd also prevent the entire preview panel from showing / not showing which is disconcerting already.

[youknowriad]

I applied both suggestions at the same time: show a generic thing when you open the inserter (no block hovered) and avoid dismissing the last hovered block when you leave it. I can remove this if needed. Let me know how it feels.

[mtias]

I think this control is a bit excessive where it's placed.

Can we remove it entirely or place it in the general "settings" modal?

[mtias]

Exploring something more like this for the default view:

[kjellr]

I applied both suggestions at the same time: show a generic thing when you open the inserter (no block hovered) and avoid dismissing the last hovered block when you leave it. I can remove this if needed. Let me know how it feels.

In general this interaction feels pretty good... The main thing missing is a way to get back to the original welcome panel/general message. Maybe if you mouse out of the modal, or onto the search panel, that returns?

I suppose we could also try returning to the default panel when you hover over the right panel too, and see if that feels more natural. I may just be reacting positively to the fact that things don't flash when I'm moving the mouse in the gutter between block items, and less to the specific fact that the last item remains selected.

[youknowriad]

I moved the setting to the options modal and pushed (Github seem to have trouble to refresh the UI but the commit is there somewhere :) )

[marekhrabe]

The help panel might be a good place for more details like the one suggested in #16521. Crossposting here just in case.

[kjellr]

Pushed some tiny content + spacing changes to get us a little closer to the mockup:

[youknowriad]

@mapk I removed the horizontal space, let me know what you think? Feel free to push commits here if needed ;)

[mapk]

This looks great now! It's working smoothly on the horizontal cursor flow between block buttons.

👍

[youknowriad]

Let's try it thanks everyone.

[rickybanister]

It might be nice to use the help panel to display the block description for the hovered or highlighted block, providing more context for the element you're considering adding to the page.

Rough mockup:

[senadir]

@rickybanister this is the current behavior, pull master to the latest version to see it

pic from master

[rickybanister]

haha, sorry for not testing, great work everyone!

[talldan]

Noted that this PR removed some padding around the blocks in the menu in order to keep the transitions in the side panel smooth. It doesn't seemed to have stopped the issue when moving the mouse up and down.

An alternative might be to keep the spacing as it was but use a small delay on the side panel item disappearing.

[kjellr]

@talldan Yeah, I just opened #17168 to track that. The padding removal also created issues with the focus state, so it needs to be reassessed.

[CreativeDive]

I'm just wondering what to do with this big empty space?

This area is perfect for displaying a reusable blocks selection for each block type. This would be great if we could select the most used reusable block directly from this panel.

This would be awesome and encourage the user to work even more with reusable blocks :-)

[kjellr]

Hey @CreativeDive. The current plan for that space is to add:

1. A block preview, as was enabled for the paragraph block in Add the block example API and use it for inserter and switcher previews #17124
2. A set of rotating tips for each block, as described in Add rotating block-specific tips to the inserter's help panel #17091

[CreativeDive]

@kjellr Thanks for reply. I think a reusable block selection would be more interesting and useful :-)