Skip to content

Improve UI clarity for navigation overlay template parts #75242

@getdave

Description

@getdave

What

When users create and edit navigation overlays, the UI doesn't clearly communicate what type of template part they're working with.

Currently, when creating navigation overlays using the Navigation block's "create" functionality, the UI displays:

  • In the breadcrumb: "Overlay · Template Part"
  • In the template parts list: "Overlay 1", "Overlay 2", "Overlay 3"
Image

The generic term "Overlay" doesn't indicate that this is specifically a navigation overlay. Users can't tell from the UI alone what type of overlay they're editing or what it's used for. This is part of the broader language consistency issue tracked in #74939.

User Feedback (from Call for Testing):

"Having the template part default name just being 'overlay' doesn't feel super clear that it is a navigation overlay."

Why

Clear UI labels help users understand what they're working with and reduce confusion. This is especially important for navigation overlays since:

  1. Context matters: Users need to understand they're editing a navigation-specific component, not a generic overlay
  2. Discovery: When users see "Overlay 1" in their template part list or breadcrumb, it's unclear what it contains or what it's for
  3. Multiple overlays: Users may create several navigation overlays for different purposes - unclear labels make them hard to distinguish
  4. Consistency: The UI should align with:
  5. Avoiding confusion: Generic labels like "Overlay" could apply to many different types of overlays; being specific improves clarity

When the UI clearly shows "Navigation Overlay" instead of just "Overlay", users can immediately understand what they're working with and successfully manage their navigation overlays.

How

Explore approaches to make the UI more clearly communicate what type of template part users are working with:

Possible approaches:

  • Update the default naming pattern to be more descriptive (e.g., prefix with "Navigation" so new template parts are named "Navigation Overlay 1", "Navigation Overlay 2", etc. instead of just "Overlay 1", "Overlay 2")
  • Enhance the breadcrumb display to provide additional context beyond just the template part name
  • Add visual indicators (icons, badges, or labels) in the UI to distinguish navigation overlays from other template parts
  • Update the template parts list view to show template part types or categories more prominently

Considerations:

Related work:

User Stories

As a user creating a navigation overlay, I want the UI to clearly show "Navigation Overlay" in the breadcrumb and template part list, so I immediately understand what I'm editing without having to guess or investigate.

As a site builder managing multiple template parts, I want navigation overlay template parts to be clearly labeled as "Navigation Overlay 1" and "Navigation Overlay 2", so I can easily identify them in my template parts list without having to open and inspect each one.

As a WordPress user new to navigation overlays, I want the UI to consistently use clear "Navigation Overlay" terminology, so I can build a clear mental model of what this feature is and how it works.

As a user who creates multiple overlays for different purposes, I want the UI labels to be specific enough that I can distinguish navigation overlays from other potential overlay types, so I can manage my site's template parts effectively.

Metadata

Metadata

Assignees

No fields configured for Enhancement.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions