Links: Automatically Format a New Hyperlink With Title Text From the Link Destination

[lancewillett]

This change would immediately improve readability across a third of the web.

How might we encourage more useful and readable link titles instead of bare URLs or "here" or "#"? My suggestion is to adopt a common pattern from other editors such as Bear, GitHub, Asana, and Google Docs.

Automatically format a new hyperlink with title text from the link destination.

Typical workflow has one too many steps. When adding a link into the editor, I often go to the target page and copy/paste the URL first into the editor. Then, as a second step, I copy/paste the title text of the page as a "paste over" action to format the URL.

What if that second step is automated? What if Gutenberg goes to the target, async, and retrieves the title text? It could be the default behavior and create more readable links.

Other editors:

GitHub formats GitHub internal URLs this way, after saving the comment by replacing the bare URL with a full hyperlink.

Asana creates an inline hyperlink to other Asana links immediately after you paste the bare URL, using an async process, which updates in the textarea without a prompt.

Bear (the Mac and iOS app) does it on paste, with any bare URL.

Google Docs prompts you to replace the text automatically for other Google documents when you hover over the bare URL.

CC @mtias and @karmatosed in case this is previously suggested and I missed it.

[lancewillett]

Bear app:

Google Docs:

#18061

Oh — I was wrong about GitHub behavior; it doesn't pull the full title, just the issue number.

[karmatosed]

I love this idea. It feels like a small but easy step to improving the experience. My first feelings are that making this as automated as possible is the best path. As you can edit later, just having the best guess feels right.

What if that second step is automated? What if Gutenberg goes to the target, async, and retrieves the title text? It could be the default behavior and create more readable links.

This feels like worth moving into PR and then seeing if we want to iterate.

[karmatosed]

I'm going to add a visual of what code outputs today on add a link:

One iteration might be to allow editing of link titles and anything brought in as details.

[designsimply]

#11930 was a similar request except it was specifically for the search option in the link inserter when adding a link to an existing post or page from the same site. It was a really nice enhancement! See #21240. Props @pwkip cc @aduth.

FWIW, I would love to see an update like this!

[pwkip]

Thanks for the props :) I do believe this made sense for internal links. For external ones I'm not so sure if it would be better.

My thoughts:

• pasting an external link in the editor already tries to do some smart stuff by converting it to an embed code. Which I personally find frustrating sometimes. adding more "smart" stuff on top of this, might be a bit much.
• A web page title is often not the same as the post title. For example a post with the title "My thoughts about external links" will have a public title of: "My thoughts about external links - Bobby's super nice blog - Just another WordPress Site". We could also crawl the entire page and get the first <h1>, but then we are assuming that everyone is writing semantically correct websites. (which is very much not the case)

I'm not opposed the idea if we could make it work in a good way.. but I do believe it should be optional. After inserting the link add option: "attempt to replace this link with title"

[pipetko]

I am not testing this https://www.wpexplorer.com/wp-auto-post-link-title-attributes/