Skip to content

Explore moving the [+] Inserter Into the Block Toolbar #73646

Open

Description

@getdave

What

Explore moving the contextual [+] inserter from the canvas into the block toolbar (initially for blocks that support direct insertion of child items).

A first exploration would target the Navigation block, using a toolbar-based [+] as the primary affordance for adding "Page" items.

If successful, this pattern could expand to other candidates.

Why

Inline inserters create a couple of consistent UX problems:

  • They appear and disappear based on selection, causing layout shifts.
  • Their position in the canvas makes it unclear which block they belong to.
  • it's often not clear where the inline [+] will be adding a block (source) - is it inside the block (inner blocks) or right outside of it?

A toolbar-based inserter offers:

  • A stable, predictable place to add items.
  • Clearer association with the selected block.
  • Potential for a better experience for blocks with direct-insertion behaviour.
  • clarity about the wrapper / child dependency.

How

Start small exploring the toolbar-based [+] for the Navigation block only. This block is the ideal candidate and already supports an Add Page item in the block toolbar when in contentOnly mode so this can be extended.

We'll then validate usability, a11y, clarity, and overall editor behaviour. If successful, we could then explore applying the pattern to a small set of additional blocks with similar insertion needs, including:

  • Buttons
  • Gallery
  • Social Icons

Visuals

Some initiation explorations:

Block Screenshot
Navigation Image
Gallery Image

Activity

  1. getdave commented on Nov 28, 2025

    @getdave
    ContributorAuthor

    Here is an Issue tracking the requirement for Navigation #73647

  2. mtias commented on Nov 28, 2025

    @mtias
    Member

    Thank you for writing this down. I see it as a natural evolution of what we tried in the gallery block way back then, since the inline inserters cause layout shifts and become clunky. I like systematizing it with the dark [+]. There's also another side benefit which is that it makes it clear the wrapper / child dependency. Right now it's often not clear where the inline [+] will be adding a block — is it inside the nav menu or right outside of it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions