-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Closed
Labels
Needs Accessibility FeedbackNeed input from accessibilityNeed input from accessibility[Feature] Link EditingLink components (LinkControl, URLInput) and integrations (RichText link formatting)Link components (LinkControl, URLInput) and integrations (RichText link formatting)[Package] Block editor/packages/block-editor/packages/block-editor[Type] OverviewComprehensive, high level view of an area of focus often with multiple tracking issuesComprehensive, high level view of an area of focus often with multiple tracking issues
Description
This issue combines design explorations into one implementation plan and supersedes #49091 for tracking LinkControl. There are three key area of this proposal: inline, navigation, and image links.
I've drawn out the flows for each key area below, consolidating feedback into actionable issues to improve link application across the editor experience. And the tasks listed are prioritized in general implementation order.
Tasks
- To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
Follow-up
- To pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
Inline links

Key concepts:
- Initial state suggests pages (scrollable area).
- Search results return from all available post types.
- "Add new page" opens this modal.
- Only either “Add link” or “Add new page” is rendered, based on the field value.
- Press enter, or click “Add link:” to add a link/item.
- Clicking on an inline link brings up the edit state of the link.
- The “Save” button is disabled unless there are changes.
Navigation links

Key concepts:
- Initial state suggests pages (scrollable area).
- Search results return from all available post types.
- “Add block” control is appended to the foot of the component.
- Navigation Link block variations (Post Link, Category Link, Tag Link, etc) initial state renders type based on the variation—i.e. Category Link renders categories.
- Navigation Link search results return items based on the query type.
Media links

Key concepts:
- Replaces the existing control on media blocks (Image, Media & Text).
- Initial state suggests pages (scrollable area).
- Search results return from all available post types.
- Media-specific tooling to link to the image file and the attachment page.
props to @getdave @jasmussen @jameskoster @SaxonF.
priethor, annezazu, getdave and mdtanjid0jasmussen, getdave and bph
Metadata
Metadata
Assignees
Labels
Needs Accessibility FeedbackNeed input from accessibilityNeed input from accessibility[Feature] Link EditingLink components (LinkControl, URLInput) and integrations (RichText link formatting)Link components (LinkControl, URLInput) and integrations (RichText link formatting)[Package] Block editor/packages/block-editor/packages/block-editor[Type] OverviewComprehensive, high level view of an area of focus often with multiple tracking issuesComprehensive, high level view of an area of focus often with multiple tracking issues
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
[-]LinkControl Refresh[/-][+]LinkControl: Refresh[/+][-]LinkControl: Refresh[/-][+]LinkControl refresh[/+][-]LinkControl refresh[/-][+]LinkControl Refresh[/+]fabiankaegy commentedon May 24, 2023
Thank you for working on this proposal. At first glance, I really like the refined UI here.
Something I'm a little worried about though, is the removal of the URL in the suggested items when searching for any piece of content. A lot of sites I'm working on have a ton of content with sometimes very similar names. Since the URL needs to be unique, it helps editors on those large sites to be able to better differentiate between the very similarly named posts. Looking at these explorations here, I feel like that nuance is getting lost here, and whilst the designs look great with that very ideal content I worry that more complex sites will struggle a lot without these additional contextual clues.
getdave commentedon May 24, 2023
@richtabor Thank you for these designs. These address many of the concerns I've raised previously about the designs that have been proposed in the past and also unifies a lot of the flows. That's great.
I think we should now look at what is feasible within the scope of 6.3 and look to address those issues that are the most impactful. I anticipate this effort may run into 6.4, but that does of course depend on how many contributors engage with this effort.
I agree with Fabian here. I've received feedback before that adding additional context helps to find the correct entity. I appreciate their is a design/visual trade off here, but it may be considered a UX regression if we don't include it. How much do you feel this impacts on the usability of the control? For example, does the additional "noise" of the URL make it harder to scan the results?
richtabor commentedon May 24, 2023
Do you mean in a scenario where two pages are titled “About”, you wouldn’t know which is which?
richtabor commentedon May 24, 2023
I put the task list in implementation order (theres a bit of leeway of course). Of those, what do you think we won’t get to?
From my POV, perhaps the “Add block” state may take the most effort.
I’m cool with keeping the media linking out of the initial effort (but having a clear technical path for that context).
fabiankaegy commentedon May 24, 2023
The example of two about pages is not the one I would have gone for even though thinking about it as soon as you add multilingual installations into the mix that may very well exist. Where you have two pages called About. One with the url
/en/about
and one withau/about
because of localized / legal differences 🤷What I've seen sadly too often is duplicate copies of a page for making revisions and then being able to use the URL makes it easier especially when you are still in the early days of a website before it goes live to choose the correct version.
What I think would also be great to see is how very long page titles get handled. If there is any truncation happeing in the title itself having the url there helps because the way it is truncated usually is different to the title. (Title usually cutts of everything from the end and url truncated in the middle to show the end. Which can often be the most important part.)
Like imagine having these posts:
If the URL doesn't appear we should at least ensure there is never any truncation happening on the titles :) So showing some longer titles in the mockup is probably a good idea just to showcase that from the beginning :)
Because of the similar names across multisite or staging sites with duplicate content I personally think it helps a ton.
Thinking about it more I actually have another relevant story from just yesterday where the URL saved me. I was working on a site and wanted to link to a page I had just created. Because I still had an older page with the same title in the trash the url automatically appended
-2
at the end of the URL. And I only caught that mistake when I tried to add that page to the navigation block because you usually don't often see the URL of things when just publishing content.Yeah, I would have probably caught it not too late after when visiting the page on the frontend. But even that isn't always a given because many browsers don't show the full URL anymore.
145 remaining items