Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a help panel to the inserter available in all blocks #16813

Merged
merged 14 commits into from Aug 19, 2019

Conversation

@youknowriad
Copy link
Contributor

commented Jul 30, 2019

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 #16808)

Capture d’écran 2019-07-30 à 2 18 04 PM

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Jul 30, 2019

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:

dead-space

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

This comment has been minimized.

Copy link
Contributor

commented Jul 31, 2019

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:

Block Library Help Panel - Default

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

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

commented Jul 31, 2019

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

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Jul 31, 2019

@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

This comment has been minimized.

Copy link
Contributor

commented Jul 31, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Jul 31, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Jul 31, 2019

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 youknowriad force-pushed the add/inserter-help-panel branch from 1a7fa33 to bb6c5d8 Aug 1, 2019

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

commented Aug 1, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Aug 1, 2019

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

image

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

@mtias

This comment has been minimized.

Copy link
Contributor

commented Aug 1, 2019

Exploring something more like this for the default view:

image

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Aug 1, 2019

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

This comment has been minimized.

Copy link
Contributor Author

commented Aug 1, 2019

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

This comment has been minimized.

Copy link
Contributor

commented Aug 1, 2019

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

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Aug 2, 2019

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

Screen Shot 2019-08-02 at 3 46 01 PM

@youknowriad youknowriad force-pushed the add/inserter-help-panel branch from b7fbff1 to af52a80 Aug 19, 2019

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

commented Aug 19, 2019

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

@mapk

This comment has been minimized.

Copy link
Contributor

commented Aug 19, 2019

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

👍 :shipit:

@mapk

mapk approved these changes Aug 19, 2019

@youknowriad youknowriad merged commit df7afa8 into master Aug 19, 2019

4 checks passed

Filter opened
Details
Filter opened
Details
Milestone It
Details
Travis CI - Pull Request Build Passed
Details

@youknowriad youknowriad deleted the add/inserter-help-panel branch Aug 19, 2019

@youknowriad

This comment has been minimized.

Copy link
Contributor Author

commented Aug 19, 2019

Let's try it thanks everyone.

@rickybanister

This comment has been minimized.

Copy link

commented Aug 22, 2019

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:

Screen Shot 2019-08-22 at 9 29 48 AM

@senadir

This comment has been minimized.

Copy link
Contributor

commented Aug 22, 2019

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

pic from master
image

@rickybanister

This comment has been minimized.

Copy link

commented Aug 22, 2019

haha, sorry for not testing, great work everyone!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.