Skip to content

Block Editor: LinkControl: Present all options while editing link #20007

@aduth

Description

@aduth

Previously: #19462 (comment)
Related: #19365, #19570, #19971

A new link component introduced for the purposes of supporting the Navigation Link block (#17557, #18061) was incorporated into the paragraph block in #19462. The goal of this was to ensure a consistent link editing experience for all parts of the editor. However, the new link component regresses in the ideal workflow for editing a link.

From @MarcoZehe at #19462 (comment):

So, I want to select text, press CTRL+K or CMD+K, paste the URL, enter to submit, or tab to the submit button and hit Enter or Space, and be back in the text to continue working.

Because the revised link component only shows the "Open in New Tab" button as part of its preview state, concessions were made in #19462 such that pressing CMD+K while having a selection of text will only shift focus into the popover, but the user must still tab and select the "Edit" button to change the URL.

Proposal: The "Open in New Tab" toggle should be presented as an optional part of the editing state of the link component.

After #19365 Before #19365 Classic Editor
Link editing after #19365 image Link editing in Classic Editor

In the screenshots above, you can see that all link editing prior to #19365 would allow access to change settings associated with the link, including "Open in New Tab".

Important to consider are two related issues:

Implementation proposal:

  • When editing a link, the input should be accompanied by "Submit" and "Advanced Settings" buttons.
  • Clicking "Advanced Settings" should toggle the display of the "Open in New Tab" toggle option, as it did previously (needs design).

I am not certain one way or another whether "Open in New Tab" should apply the changes immediately when in the mode of editing a link. Considering #19365, I believe that part of the problem might have been attributable to the fact that there was very little visual difference between the "Preview" and "Editing" states of this dialog, and thus the user may have been confused about whether they were editing or previewing the link. This is less problematic with the new link UI, since the states are more visually distinctive. Otherwise, the expectations of editing a link could be such that the user would only expect their changes to take effect once submitted.

  Viewing Editing
Previous UI Previous UI viewing Previous UI editing
New UI New UI viewing New UI editing

Metadata

Metadata

Assignees

Labels

Needs DesignNeeds design efforts.[Feature] Link EditingLink components (LinkControl, URLInput) and integrations (RichText link formatting)[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] TaskIssues or PRs that have been broken down into an individual action to take

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions