Iterate placeholder state for navigation block

[karmatosed]

This was found in Chrome. If you add a navigation block to a column block you get the following:

Now, it's a small spot, but I would expect maybe it doesn't break out of the container.

cc @jasmussen as this might be due to interface changes.

[jasmussen]

Excellent ticket.

Outside of the obvious improvements that can be made — rephrase, or rephrase when small like this, I would suggest this also opens up a separate question: why do we have a placeholder state for this menu at all?

It may be just me, but I have not a single time created a menu and pressed "Create Empty". Every single time I've created a menu, I click "Crete from all top-level pages", to the point that this seems redundant.

An added benefit to getting rid of the placeholder state is that it more immediately becomes obvious to a user what they just inserted. Right now many of our placeholders look exactly the same: squint and you can't tell the difference between a navigation menu and an embed placeholder. By immediately outputting a menu that will likely be the default choice anyway, we simply smooth out the process.

That doesn't mean we should remove all placeholders, just that we should not default to using them.

How do you create an empty menu, then?

For one, I'd consider replacing this menu icon with an "Edit Menu" label:

And I'd then consider adding some quality of life buttons to this interface:

For example a "Reset" or "Clear Menu" button. If we combine that with an "are you sure", that seems fine.

[karmatosed]

It may be just me, but I have not a single time created a menu and pressed "Create Empty". Every single time I've created a menu, I click "Crete from all top-level pages", to the point that this seems redundant.

I can actually see a use case for this, but do agree it's probably not as common. For example, building a particular type of menu from scratch. An example would have been social links but we have that now. I wonder if we default to having build from all though if you have a lot that could be 'a lot' of removing pages?

Maybe the edit could be a 'remove all' pages? I don't mind that idea of a reset/clear at all.

[jasmussen]

I do like the inverse thinking of defaulting to a good default and then providing options to account for what's possibly an edgecase.

[tellthemachines]

There's a "create from existing menus" option being worked on here. If we remove the placeholder, how might that be approached?

[karmatosed]

@tellthemachines let me mark this for exploring in design as I think it could do with a holistic approach.

[jasmussen]

There's a "create from existing menus" option being worked on here. If we remove the placeholder, how might that be approached?

I'd honestly put that in the toolbar! I'll respond on the ticket.

[karmatosed]

@jasmussen awesome, thanks.

[karmatosed]

Noting just changing the title of this issue so this can now focus on some iterations to the first state.

[karmatosed]

I sat down to take a look at iterating here. Here is what we have now:

There is other work in #21727 that starts from:

As noted, we could either have then either add an icon, perhaps like this:

Alternatively, having the option under the ellipsis could work:

As far as feedback goes, I think deciding where the option should go is a great next step.

[jasmussen]

Thanks for exploring this! Just looking at it I'm getting a possibly crazy idea — what if instead of using the Plus button appender, we use the text one and customize the placeholder text? We might even wrap that text appender inside menu item classes so that it can look like a "menu item placeholder". Too crazy?

[karmatosed]

Thanks for exploring this! Just looking at it I'm getting a possibly crazy idea — what if instead of using the Plus button appender, we use the text one and customize the placeholder text? We might even wrap that text appender inside menu item classes so that it can look like a "menu item placeholder". Too crazy?

I don't think that's too out there. Just to see if on the same page it could look like this?

There might be an argument for adding here a drop-down, but I feel we're then heading into it being the placeholder.

[jasmussen]

Oh that's right I did forget that you can add more than one type of thing there, gosh darnit. But yes that was what I was thinking, if the menu item was square and blue! Hmm thanks for trying that, let me sleep on it :D

[dwolfe]

@jasmussen The placeholder state has always seemed off to me too, and a comment you made on a different issue crystallized it for me: an empty navigation block has no value. I think the choice in the placeholder state isn't empty/full, but rather shortcut/manual. "Build me a menu from this existing list of stuff" or "I want to curate my own list of links." It's a subtle shift, but I think there's value in both approaches, we just need to present them in the right way.

[jasmussen]

It's a subtle shift, but I think there's value in both approaches, we just need to present them in the right way.

Yep. @shaunandrews pointed out that currently menu items aren't added to a menu when new pages are added. I wonder if we can make it so that when you insert a navigation block, by default it's chained to what pages you have, and when you make an edit, it becomes customized and unchained — with a snackbar notice informing you of said fact.

This is a half baked idea, not digestible yet. But sharing in case it inspires either of you.

[dwolfe]

@jasmussen You triggered an idea earlier - one issue I noted about the current placeholder is that "Top-level pages" doesn't give you a sense of what the resulting menu will be - I originally thought that we should at least improve that button with a badge showing the number of links that would be created, but as I was thinking about serving the use cases I mentioned above ("Use a shortcut" or "I'll do it myself"), I wondered if a group of selectable elements might cover a wider range of possibilities:

This is a really rough visual, but hopefully the idea comes through. The dropdown (from #18869) could allow the user to start with any of a few different options – top-level pages would be one, plus any existing menus, and probably an "empty" option – which could then be further customized with a few clicks. (Basically bulk add - the advantage is speed, versus adding/removing links one-by-one, which would each require multiple clicks and possibly input.)

I haven't thought through all the details, but the bottom sketch above imagines how it could adapt to a narrower space.

[jasmussen]

Lots of small improvements that can benefit the navigation block. So long as we don't paint ourselves into a corner with tying those tightly to the Placeholder component, it seems like a fine iterative step.

However to be more clear about the limitation we've seen with the Placeholder component: it encourages form-like design that looks nothing like the block will, when rendered. This is increasingly going to be a problem as we move towards full site editing with lavish templates and accurate WYSIWYG.

Here's TwentyNineteen rendered, for example:

Now imagine the not too distant future where the above is simply a page template waiting to be customized by a user. You might be looking at this:

That's an exaggerated sketch, but it's a reminder that it would be good to start thinking about how the Placeholder component affects templates, and what we can do to minimize the massive shift in layout it causes.

[draganescu]

Closing this in favor of #23207

[mtias]

Now it's closed :)