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

[Navigation Block] Add introductory text to adding a new menu item #24007

Closed
annezazu opened this issue Jul 16, 2020 · 17 comments
Closed

[Navigation Block] Add introductory text to adding a new menu item #24007

annezazu opened this issue Jul 16, 2020 · 17 comments
Labels
[Block] Navigation Affects the Navigation Block [Type] Enhancement A suggestion for improvement.

Comments

@annezazu
Copy link
Contributor

Describe the bug

Currently, when adding a new item to the menu, there's no prompt or introductory text to help nudge the user along. With work being done to expand the number of types of blocks that can be added to the Navigation Block, there should likely be some sort of explanation. Otherwise, it feels a bit like something is broken.

To reproduce
Steps to reproduce the behavior:

  1. Open the editor
  2. Add the navigation block
  3. Select the + to add a new item.

Screenshots

Here's a video of me talking through this issue (and others): https://cloudup.com/c1ChZfDf5ut

Navigation:
Screen Shot 2020-07-16 at 1 48 08 PM

General block:
Screen Shot 2020-07-16 at 1 51 52 PM

Editor version (please complete the following information):

  • WordPress version: 5.4.2
  • Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? Gutenberg plugin
  • If the Gutenberg plugin is installed, which version is it? 8.5.1

Desktop (please complete the following information):

  • OS: iOS
  • Browser: Chrome
  • Version: 83.0.4103.116
@annezazu annezazu added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Feature] List View Menu item in the top toolbar to select blocks from a list of links. [Block] Navigation Affects the Navigation Block labels Jul 16, 2020
@draganescu draganescu removed the [Feature] List View Menu item in the top toolbar to select blocks from a list of links. label Jul 17, 2020
@noahshrader
Copy link
Contributor

noahshrader commented Jul 30, 2020

Good catch!

  1. I think your suggestion with adding a title to this makes sense to give context to the choices.
  2. We should remove the "Browse All" button as there are only two options and opening the left sidebar is unnecessary as all options are shown in the quick library.
  3. From a dev standpoint, we should take another look at how we're styling elements within the library containers so that it degrades well (the removal of the search box completely collapses the top padding, as shown in your screenshots)

Attached is a super quick example of the added section heading:

ireafsdfgsf

@MichaelArestad
Copy link
Contributor

Currently, when adding a new item to the menu, there's no prompt or introductory text to help nudge the user along. With work being done to expand the number of types of blocks that can be added to the Navigation Block, there should likely be some sort of explanation. Otherwise, it feels a bit like something is broken.

@annezazu is what Noah proposed what you are expecting or were you proposing something more like a walkthrough or popover with more information?

@annezazu
Copy link
Contributor Author

Ah apologies. I reacted with a heart but should have used my words ;) I dig what Noah proposed as a minimalist way to lightly introduce this interaction. I wonder if even just saying "Options" is enough in case this kind of situation happens again where a limited set of blocks can be used in the interface. It could help create some nice consistency rather than having unique headers.

Minor note: I definitely think Link should be listed before Search as adding repeated links seems far more likely than a bunch of search boxes.

@MichaelArestad MichaelArestad removed the Needs Design Feedback Needs general design feedback. label Aug 12, 2020
@MichaelArestad
Copy link
Contributor

In that case. I think Noah's mock works. Let's run with that.

@annezazu
Copy link
Contributor Author

Sounds good to me!

@mtias
Copy link
Member

mtias commented Aug 26, 2020

It feels like the text could even expand a bit more instead of just being a heading. In any case, this seems like a good thing to support in the inserter API (a description? a tip? a heading?) that can be optionally added when blocks are restricted (i.e. when allowedBlocks is present). cc @youknowriad @pablohoneyhoney

@annezazu
Copy link
Contributor Author

Noting the current experience as of Gutenberg 10.1.1 and WordPress 5.7:
Screen Shot 2021-03-15 at 6 35 04 PM

@annezazu
Copy link
Contributor Author

annezazu commented Mar 17, 2021

Pulling in feedback from the third call for testing for the FSE program from @paaljoachim:

Adding a navigation. I added an existing menu but it contained only one link. Clicking to the right of the black square with a + in it I expect to be able to add a text link. But I have to click the black square. I am not able to select Posts or Pages. (That is probably because I have to click the Browse all button.) The Inserter add block panel shows up. With very limited options. Design and Widgets areas. I go back to the Navigation. Click to add a link. There I can add a post or page.

Helpful to think about the above context when/if this is addressed :)

@annezazu
Copy link
Contributor Author

This feedback came up once more in the sixth round of testing for the FSE Outreach Program:

Confusing: adding the pages to Navigation. I wouldn’t have known I needed to use the Page Link block if you hadn’t instructed me to do so.

I've even caught myself clicking + and then starting to type a page title forgetting to first select the Page Link block. This might just be something to adjust to but a visual prompt would go a long way.

@jasmussen
Copy link
Contributor

I'm seeing this at the moment:

Screenshot 2021-07-08 at 11 15 27

What, if anything, does that mean for the original ticket as reported?

@mtias
Copy link
Member

mtias commented Jul 12, 2021

@jasmussen what I have in mind is some help text whenever you open the inserter in a restricted area that says "These are the blocks available to insert within the {ParentBlockName} block".

@jasmussen
Copy link
Contributor

whenever you open the inserter in a restricted area that says "These are the blocks available to insert within the {ParentBlockName} block".

That seems like it could be a quick win, and potentially benefit other limited nesting containers such as Social Links.

@vcanales @mkaz any thoughts on the level of effort this would take to build? Seems simple enough.

@mkaz
Copy link
Member

mkaz commented Sep 8, 2021

@jasmussen @mtias Are you looking for something like this?

QuickInserter for Navigation Block

Do you want to be able to customize the message per parent block, or do you think a standard message and then just switch out the name of the block it applies to?

The implementation might be slightly different depending, I'm still digging in to how we might pass the property down into the QuickInserter, so much of it is abstracted within InnerBlocks it is not quite as easy as I hoped.

@paaljoachim
Copy link
Contributor

paaljoachim commented Sep 9, 2021

A perspective....
With the latest mockup I get the impression that it is only the 6 blocks one can insert into the navigation. A user might not even know (understand) that they can click Browse all to access additional blocks that can be inserted into the navigation.
The text takes about as much space as another row of blocks would do. Btw merging the Navigation editor and the Navigation block into how various aspects are handled with help the learning curve for users. As adding a Nav block would have similarities into how working with the Nav editor becomes.

@jasmussen
Copy link
Contributor

jasmussen commented Sep 10, 2021

The quick inserter definitely needs iteration as far as both curation of the default 6, but also how you explore additional ones. But even without that, the "Browse all" at the bottom means it isn't a dead end, so I think it could still be a quick win:

Basic

This could be a fine small step to solve this ticket, so long as it isn't the end of the road.

And we do want to improve the quick inserter. It is arguably the most used interface, and right now the frecency inside means that some blocks get more prominence than they deserve simply because you don't discover others to bump them down the list. So just to explore the idea, here's what it would look like if we added a custom scrollbar:

W  custom scrollbar

Note it would have to be custom so it doesn't fade out on Mac or mobile systems, or the point is lost.

Another option is to add paging dots:

W  pager dots

That 3rd option would be the same as the current "Browse all" button.

@paaljoachim
Copy link
Contributor

paaljoachim commented Sep 10, 2021

For the first option adding text it needs to be clear that those are the top 6 block options that can be used for the Navigation bar (+ editor).

The second option I did not even initially see the scrollbar until I read the text. I believe that scrollbars can easily be overlooked.

The third option uses the wide Browse all in a more practical way.

Brain storming. The Browse all is a big button which gives a hint that says if you do not see what you are looking for in the 6 blocks above you will need to click the Browse all and see all the blocks even those not related to Navigation.
Keeping the user inside the quick inserter will help focus on the current task at hand. Adding a block to a Navigation.

Some explorations.
Quick-Inserter-ver1

Adds the arrow/chevron we are used to from opening and closing the sidebar settings panels.

Quick-Inserter-ver2
Adds dots in the side of the Browse all bar.

Quick-Inserter-ver3

Adds dots to the top center area giving a hint that this is just one of three block areas one can click through. It gives clarity showing that there are more than 6 quick inserter blocks available.

@annezazu
Copy link
Contributor Author

annezazu commented Feb 7, 2022

This experience has been iterated upon SO MUCH since I opened this issue thanks to the work around a lighter experience: #34041

Here's a current view:

Screen Shot 2022-02-06 at 7 10 37 PM

I'm going to close this out as a result as I don't think this feedback applies anymore :)

@annezazu annezazu closed this as completed Feb 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

8 participants