Skip to content

Scope navigation overlay patterns to only be insertable within overlay template parts #75241

@getdave

Description

@getdave

What

Navigation overlay patterns (such as "Centered navigation", "Overlay with black background", "Overlay with accent background", etc.) are currently available globally in the pattern library/inserter. Users can insert these patterns anywhere - on pages, in templates, or in any template part.

When overlay patterns are inserted outside of an overlay template part context:

  • The overlay content appears as regular visible content on the page
  • The Close button is non-functional and not clickable
  • The pattern displays outside of its intended overlay context
  • Users become confused about why the pattern doesn't work as expected

Overlay patterns should be scoped to only appear in the pattern inserter when editing an overlay template part, similar to how other contextual patterns are restricted.

Why

Overlay patterns are designed specifically for use within overlay template parts. They are not suited to non-overlay contexts (pages, regular templates, or other template parts) and will not function correctly when inserted there. The Close button won't work, the overlay structure won't behave as expected, and the content will appear as regular page content.

User Feedback (from Call for Testing):

"At first, I created a navigation mobile overlay as a block from the block inserter. This initially confused me because it added it to the page and was visible on desktop as a regular block, and the 'Close' block was not clickable, so I couldn't close the overlay. I can see a user doing this and becoming confused. We probably should create some kind of messaging that it should be created in the Patterns tab in the editor and not added directly to the page/template."

When overlay patterns are globally available, users naturally discover and try to use them without realizing they only work in specific contexts. This causes confusion and frustration.

Scoping overlay patterns to only appear when editing overlay template parts prevents this confusion and ensures patterns are only available where they'll work correctly.

How

Explore approaches to restrict overlay pattern availability:

  • Scope overlay patterns to only appear in the pattern inserter when editing an overlay template part (similar to how header/footer patterns are contextual)
  • Add pattern category filtering based on the current editing context (overlay template part)
  • Consider block pattern metadata to mark patterns as "overlay-only"
  • Ensure the Navigation Overlay Close block is also restricted to overlay contexts

Keep in mind the discoverability trade-off - patterns should be easy to find when in the right context.

User Stories

As a user creating a navigation overlay, I want to only see overlay patterns when editing my overlay template part, so I'm not confused by patterns that appear elsewhere but don't work.

As a site builder browsing patterns for my homepage, I want overlay-specific patterns to be hidden from the pattern library, so I don't accidentally insert non-functional overlay content onto my page.

As a WordPress user unfamiliar with overlays, I want the pattern inserter to only show me patterns that work in my current context, so I can successfully build my site without encountering broken functionality.

As a user editing an overlay template part, I want to easily discover all available overlay patterns in the inserter, so I can choose the best starting point for my mobile navigation design.

Screenshots

Image

Metadata

Metadata

Assignees

No one assigned

    Type

    No fields configured for Task.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions