Link editing UI Audit

[adamziel]

What is this issue?

This is an issue which sole purpose is supporting the discussion in #24099. This issue is not a bug report or a feature request on it's own.

Basic building blocks

URLInput

As of July 17th, we use <URLInput /> as a basic building block for all things related to URL editing:

URLInput is a component that renders an input and has the following responsibilities:

• Request suggestions in response to typing
• Shows a loading indicator when suggestions are being requested
• Renders suggestions (using basic default component or a custom one passed via a prop)
• Handles suggestion selection including keyboard bindings (up/down arrows)
• Manages the focus of the input (e.g. it restores the focus after clicking on a suggestion)
• Manages showSuggestions state flag

That’s a lot and it doesn’t fit all contexts easily (e.g. it’s challenging to use it in BlockToolbar)

Referenced in:

packages/block-editor/src/components/url-input/button.js          <URLInputButton />
packages/block-editor/src/components/url-popover/link-editor.js   <LinkEditor />
packages/block-library/src/social-link/edit.js                    <SocialLinkEdit />

LinkControl

The most widely used UI for editing links:

It acts as a wrapper on top of URLInput which:

• Provides a preview state where the link is not editable
• Uses a custom component to display suggestions (supports highlighting and more detailed information)
• Supports creating a new page inline
• Manages „Open in new tab” attribute

Referenced in:

packages/block-editor/src/components/media-replace-flow/index.js: <MediaReplaceFlow />
packages/block-library/src/button/edit.js:                        <ButtonEdit />
packages/block-library/src/navigation-link/edit.js:               <NavigationLinkEdit />
packages/edit-site/src/components/page-switcher/index.js:         <PageSwitcher />
packages/format-library/src/link/inline.js:                       <InlineLinkUI />

URL Editing UIs

URLInput and LinkControl are powering every other link editing UI. Let’s see how they’re used:

<MediaReplaceFlow />

It makes it possible to replace one media file with another without removing the media block. <LinkControl /> powers the „Current media URL” part of the popover below:

Suggestions are not displayed, but it seems like they’re still requested as the following progress indicator suggests:

I don’t think the entire machinery of <LinkControl /> needs to be used here - this is essentially a regular input field and we could replace it with one.

Referenced in:

packages/block-library/src/audio/edit.js
packages/block-library/src/cover/edit.js
packages/block-library/src/file/edit.js
packages/block-library/src/image/image.js
packages/block-library/src/media-text/media-container.js
packages/block-library/src/site-logo/edit.js
packages/block-library/src/video/edit.js

<PageSwitcher/>

Full site editing provides a page switcher widget that has a free typing lookup feature:

Referenced in:

packages/edit-site/src/components/header/index.js:     

What's needed here is the input and the suggestions list. We don't need link preview, settings (opens in new tab), or a way to create a new post inline (?). It could also use some cleaning up (e.g. getting rid of the „post” badge or the localhost:8889 part of the URL).

<InlineLinkUI />

Referenced in:

packages/format-library/src/link/index.js:    link/edit

Note that this will be replaced by in-toolbar link editing explored in issue #23375.

<URLInputButton/>

It’s not used anywhere, I’d say let’s try removing it entirely.

<LinkEditor /> / <URLPopover />

Referenced in:

packages/block-editor/src/components/media-placeholder/index.js
packages/block-library/src/social-link/edit.js
packages/format-library/src/text-color/inline.js

LinkEditor is used in a few different contexts. When used in media placeholder or social link, it’s just a regular input field that doesn’t need to fetch any suggestions:

I recommend replacing the URLInput in the above components with a regular input field or a component from @wordpress/components.

Then there is a the following color picker which, surprisingly, uses a URLPopover internally:

It doesn’t have anything to do with URLs though, and we even have a different color picker component that uses a regular Popover:

I recommend replacing the URLPopover in the above components with a regular Popover component.

Lastly, the image block uses a customized version of URLPopover to support Media File and Attachment Page choices. Upon typing, it displays page suggestions using only page title and no URL:

This should be solved as a part of the in-toolbar link editing in #23375.

Summary

I believe this covers all places where URLInput or LinkControl are being used. Let's discuss proper next steps in respective issues listed at the top.