Site Editor: add a + button that allows you to add any entity in a dropdown

[annezazu]

Currently, when you're navigating in the Site Editor, you are shown an "add new" in each section but you can only add a specific entity when you're in each section as shown below:

https://github.com/WordPress/gutenberg/assets/26996883/9e99aa1a-3b15-4f2a-9bd3-374de988d66b

Taking inspiration from the overall toolbar when viewing your site, let's consider adding something similar to save folks time and clicks:

Mockup:

Open questions:

• Should the menu should show contextual suggestions (surface as the top option the section you're already in) or have a set menu that doesn't change based on where you are?
• Should it show as + or + new to match what's shown on the front end?

Those questions do not preclude adding the menu in the first place, as it'll be possible to adjust based on feedback.

See also the comments for some conversations around longer term possibilities.

[jasmussen]

Here's a quick sketch:

Figma.

Since individual sections have their own dedicated "Add [item]" buttons with prominence, anything beyond that would fall into the quick tool category, hence the idea of the dropdown.

[jasmussen]

@WordPress/gutenberg-design any objections to me updating this issue and adding "needs dev"?

[jameskoster]

I like this idea in general but I'm not 100% convinced about the options presented in the mockup.

I see they match the admin bar, but adding media items and users from within the site editor feels a bit off to me. Similarly I think I'd expect to find an option to create a pattern here.

It might be helpful to think about how this menu would work as a part of the broader admin design. Should it be contextual, or always present the same options? At the moment it feels like it would be contextual, which could be what is throwing me off.

[jasmussen]

Great feedback. Here's a fresh take that includes a plugin, as well as the frontend adminbar. Both with speculative visuals, but mainly to map out the behavior to ensure the path can lead in the right direction, rather than specifically suggesting any one or other path forward there. Dropdowns across the main dashboard, the site editor (aka "Design"), and a plugin, WooCommerce:

One idea you and I discussed in chat was also to leverage the command palette for these, pre-filled with "add". Worth including, even if this might not be where we start:

Let me know your thoughts, @WordPress/gutenberg-design!

Figma.

[jameskoster]

With the command palette approach, I reckon it should still return all options, but they could be ordered by context.

A drawback to the contextual menu is that it puts legitimate flows unreasonably out of reach. E.g: I just fulfilled an order, now I want to add a new page.

The command palette would solve this, but I understand it may not be feasible for a 'v1'. Alternative options to explore:

• The + menu is consistent regardless of context, containing all 'add' actions organised with flyouts. Probably needs a mockup as it could be unwieldy in practise.
• There's a "More" flyout at the bottom of the menu containing all the other add actions ordered alphabetically.
• Show contextual actions, but include a search to locate other actions.

[jasmussen]

With the command palette approach, I reckon it should still return all options, but they could be ordered by context.

Do we have a max amount of items to show? This is looking a bit overwhelming. Admittedly this example includes a plugin that adds additional CPTs, but still:

[jasmussen]

I'm not really feeling the consistent-everywhere dropdown:

Feel free to tinker if I'm misconstruing your idea!

For now I'll try to update the original issue with both a reduced mockup just for the site editor.

[jasmussen]

I've created a minimal MVP mockup that simply replicates the dropdown menu in the site editor. This will have intrinsic value in saving clicks, and solves the original issue. The conversation around the longer term view can likely also be more informed based on what we learn from that V1, i.e. whether it's the command palette or something else; the conversation here and mockups will be there for the V2.

[ntsekouras]

I don't believe there is a way to know who registered a custom post type through register_post_type. My comment refers to the mockup with WooCommerce having a nested dropdown.

[jameskoster]

This is looking a bit overwhelming.

I don't mind it, to be honest. It's fairly common to see a lot of suggestions in cmd+k interfaces. To refine the list you can type to search for whatever you're trying to add.

We might follow-up to show contextual suggestions by default, and 'hide' others behind a "More" button:

But I don't know if it's worth the additional logic. Ordering by context and leaning of search seems simpler to me.

[richtabor]

Are the icons necessary, and the "Add new" label up top?

Is the idea that this emulates the + New from the dashboard, or a different set of items to add?

[jasmussen]

Are the icons necessary, and the "Add new" label up top?

Seems okay without it too. No strong opinion:

Is the idea that this emulates the + New from the dashboard, or a different set of items to add?

Yes, the idea is that this "+ New" button available in the adminbar become available in these immersive situations. Whether we always show a consistent/full set of options, or a subset (contextual or otherwise), I think we can explore.