Skip to content

Link UI: Add and edit links directly within the block toolbar #23375

@shaunandrews

Description

@shaunandrews

Some blocks, like the Paragraph, Navigation Link, and Button block, require a URL for the block to function. Right now these blocks tend to open addition UI to allow for manipulation of this required data:

image

You'll notice that the Paragraph block alters the link icon in the toolbar, allowing a user to unlink the selected text. Navigation Link and Button blocks don't follow this pattern, instead clicking on the icon always opens the link UI.

For the Navigation Link block specifically, we've been looking at exposing the URL directly within the block's toolbar (#23023):

image

The next logical step for this UI is to allow manipulation of the data from directly within the toolbar. As this isn't an isolated need, this issue aims to explore how we could allow for manipulation of URL (or general text-based) data directly from any block's toolbar.

--

linke-ui-4

The somewhat mysterious link icon is replaced with a more obvious text label; Edit Link when a link has been set, and Link when there is no link set.

image

If there's a link, hovering over this button for a few seconds will display the current URL in a tooltip:

image

When clicked, a new Link UI appears with :focus moved to the URL input alongside options like "Open in new window" and a Done button. The Link UI consumes the toolbar, hiding the selected block's buttons.

image

--

This also touches on some recent work around Reusable blocks and Templates (#23213), where there is often the need to display/change a descriptive name:

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Block] ButtonsAffects the Buttons Block[Block] ImageAffects the Image Block[Block] ParagraphAffects the Paragraph Block[Feature] Link EditingLink components (LinkControl, URLInput) and integrations (RichText link formatting)[Feature] List ViewMenu item in the top toolbar to select blocks from a list of links.[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions