Gutenberg: Navigation Block: Improve initial state.

[mtias]

Right now adding a navigation block loads all top level pages. We should instead use the placeholder patterns to allow users to choose whether they want to start with existing pages, import an existing menu, or start from scratch.

@melchoyce created this mockups some time ago to address this need:

Some older mockups around the placeholder:

---

I see two separate tasks here:

• [ ] Add placeholder component with initial options for load existing top-level pages (current behaviour) and start from scratch (empty menu).
• [ ] Add ability to import an existing menu (if one exists).

[karmatosed]

I totally agree there should be a better placeholder. I will assign this to myself and work on some mockups today.

[getdave]

Happy to wrangle the dev on this one once we have a design.

Just noting:

• that "existing menu" may require adding a new REST API endpoint to allow us to access Menus.
• the Link UI doesn't currently support "Categories". Therefore creating a menu with these in could be a problem in terms of editing.

[karmatosed]

I have been going backwards and forwards on this a bit tonight. I have settled I think on a potential direction which either works or can serve as idea fuel for an iteration tomorrow.

If we can link to existing menus here is my suggestion:

I didn't add a skip as for me the 'skip' is to create a blank page. I actually don't like the 'fill it out with all pages' option, but maybe that could be the default if people prefer there. Maybe it's an option though to 'add all pages'.

The second is perhaps the easiest to do in version one if accessing menus isn't easy:

[draganescu]

@getdave I think the second option above is what we need at this stage right?

[getdave]

I would agree @draganescu.

It would be good it @mtias could confirm he's happy to skip the Menu piece for now, we can split that into a separate Issue.

Thanks for the design and thinking @karmatosed 👍

I'll take this one unless anyone objects.

[mtias]

It would be good it @mtias could confirm he's happy to skip the Menu piece for now, we can split that into a separate Issue.

Yes, happy with that.

I have some feedback on the design.

• The button text seems a bit too long and repetitive ("Create..."), can we simplify?
• It should also be possible to fit the two buttons in a row with terser actions.

[karmatosed]

This is a suggestion but we can have a copy review also. I choose a button and menu as really don't like when we have 2 buttons, but if that's something people want it can change.

[mtias]

Maybe the first one could say "All Top Pages" or similar.

[michelleweber]

I feel like I want the button and link to say "Create page menu" and "Create empty menu" for parity and clarity.

Even better, maybe, would be something like "Create page menu" and "Create custom menu," with updated text above that says something like "Create a menu that includes all of your site's current pages, or build a custom menu with a mix of links."

(Which also makes me just want two buttons, to show that these are two different but equal options, but I'm not a designer :) )

[getdave]

I've created this PR with a reasonable approximation of the design. Feel free to leave further feedback there for me to action.

@mtias I have a technical query that I could do with some assistance on if possible.

[mapk]

I remember Matt saying we're getting away from calling this a "menu". Should this be something we reflect in this work? "Menu" does feel nice in context to how the wording is structured, but if moving away from that word is a goal, we should align that here too.

[shaunandrews]

Worked up a few more ideas around the Navigation block's initial state. The first uses two buttons with a skip to let you choose from either your existing pages or existing menus (if one or more exists):

The second mockup uses radio buttons to outline all the available options:

The third mockup simplifies things down to adding all top-level pages, a dropdown for existing menus (if they exist) and a skip button:

[shaunandrews]

After posting my comment above, I refreshed the page and realized I didn't see a bunch of comments. (Never trust Github to be up-to-date.)

That said, here's another option we could consider:

[getdave]

So as things stand for MVP it looks like we're going to ship with this implementation. We can then iterate towards:

• Shaun's designs.
• Adding Menus

...in follow up PRs.