Skip to content

LinkControl Refresh #50891

@richtabor

Description

@richtabor
Member

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

Follow-up

Inline links

CleanShot 2023-05-30 at 13 09 50

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

CleanShot 2023-05-30 at 13 56 24

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

CleanShot 2023-05-30 at 13 11 23

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.

Activity

changed the title [-]LinkControl Refresh[/-] [+]LinkControl: Refresh[/+] on May 23, 2023
changed the title [-]LinkControl: Refresh[/-] [+]LinkControl refresh[/+] on May 23, 2023
changed the title [-]LinkControl refresh[/-] [+]LinkControl Refresh[/+] on May 23, 2023
fabiankaegy

fabiankaegy commented on May 24, 2023

@fabiankaegy
Member

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

getdave commented on May 24, 2023

@getdave
Contributor

@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.

the removal of the URL in the suggested items when searching for any piece of content

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

richtabor commented on May 24, 2023

@richtabor
MemberAuthor

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.

Do you mean in a scenario where two pages are titled “About”, you wouldn’t know which is which?

richtabor

richtabor commented on May 24, 2023

@richtabor
MemberAuthor

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 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

fabiankaegy commented on May 24, 2023

@fabiankaegy
Member

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.

Do you mean in a scenario where two pages are titled “About”, you wouldn’t know which is which?

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 with au/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:

  • Top 10 block editor related features shipping in WordPress 6.2
  • Top 10 block editor related features shipping in WordPress 6.1
  • Top 10 block editor related features shipping in WordPress 6.0

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

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs Accessibility FeedbackNeed input from accessibility[Feature] Link EditingLink components (LinkControl, URLInput) and integrations (RichText link formatting)[Package] Block editor/packages/block-editor[Type] OverviewComprehensive, high level view of an area of focus often with multiple tracking issues

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @draganescu@scruffian@getdave@mirka@MadtownLems

        Issue actions

          LinkControl Refresh · Issue #50891 · WordPress/gutenberg