Skip to content

Enhance the in-canvas Link UI to show an entity preview when linking to an entity #72583

@getdave

Description

@getdave

What

When editing a Navigation Item block in the canvas, the current Link UI shows a locked URL field with the message “Synced with your post” when the link points to an internal entity.

This makes it difficult for users to clearly understand what the item is linking to.

This Issue introduces a concise entity preview within the Link UI when the destination is a Post, Page, or other supported entity type.

The preview replaces the locked URL field and displays key details such as title, type, icon, and permalink. Existing designs (below) should be used as a reference and refined through further iteration.

Why

Users benefit from being able to immediately recognise what a navigation item links to while editing it. Showing a clear preview in the Link UI reduces ambiguity, removes reliance on interpreting URLs, and aligns the canvas editing experience with improvements being introduced in the sidebar and Editable List View.

This also creates a more predictable and cohesive editing experience across contexts.

How

  • Replace the existing locked URL field in the Link UI with a concise preview when the destination is a supported entity.
  • Display key information (title, type, icon, permalink) in a compact form that mirrors the preview provided in the sidebar.
  • For external URLs, continue showing the standard raw URL field with no preview.
  • Include an “unsync and edit” mechanism, consistent with current behaviour, allowing users to convert the link into an editable URL field when needed.
  • Support previews for all Navigation Link variations that link to entities (for example Posts, Pages, custom post types, terms).
  • Use the provided designs as the baseline, with Design contributors leading further refinement.
  • Ensure this work aligns with and complements related Issues around entity previews (see Display a concise preview of the linked entity in the Navigation Item block sidebar #73311).

User Stories

As a user, I want to clearly see which piece of content a menu item links to when editing it in the canvas, so I don’t have to interpret URLs or leave the Link UI to check.

As a user, I want the Link UI to display consistent entity information across both canvas and sidebar contexts, so the editing experience feels predictable.

As a user, I want the ability to unsync and manually edit the URL when necessary, so I can override or customise a link.

Visuals

The design below by @jasmussen can be used for reference.

Image

As per #71630 (comment), now the feature is implemented the UI should be enhanced to better convey:

  • you are linking to an entity
  • which entity you are linking to (a URL isn't the best way of doing this)

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