Enable rich previews for internal links #33086

getdave · 2021-06-30T08:29:04Z

Description

This PR enables rich previews in the link UI for internal links. Currently we have a "middleman" method which short-circuits any attempts to fetch rich previews for internal URLs. However based on discussion in #32689 this is not needed as the only thing that originally made me think those requests did not work was the wp-env environment setup.

Closes #32689

How has this been tested?

Testing environment

⚠️ Please do not use wp-env to test this PR.

The best way to test this is on a site that is accessible to the internet or has a local hosts file mapping to ensure traffic can be routed to it. I recommend MAMP or Local by Flywheel (which is now free!).

If you attempt to test this using the default wp-env setup on localhost:8888 then it will not work. That's not a failure of the code, it's just a facet of the way WP ENV and Docker work.

Aside: you could use ngrok if using wp-env but it's fairly "involved".

Awareness of caching

Also when testing this be aware that there are x2 caches involved:

Local in memory cache - will cache a request for a rich preview until you refresh the page.
Server side transient cache - will cache a request for a given URL for 1hr. You can turn this off by shortcutting this conditional to make testing easier.

Testing Steps

Install the Gutenberg Plugin generated by Github action for this PR. You can follow these steps to guide you.
Ensure your site is accessible to the internet.
Go to the Customizer and set a Site Icon under Site Identity.
Create and publish a few Posts/Pages - make sure you assign a featured image and add a title, excerpt and some post content. I used FakerPress Plugin to do this for me.
Create a fresh Post with some text.
Create a link to one of the Posts you previously created.
Click away from the link to close the link UI.
Click on the same link again to open the rich preview.
You should see a rich preview of that URL even though it is internal. By default you should see:
- correct page title
- correct site icon

Note: unfortunately out of the box WP doesn't set a meta description or a reference to the canonical image for the page so we cannot reliably retrieve these items to display in the rich preview. @hellofromtonya any idea why this is? Why don't we set these by default?

Bonus: testing even richer previews!

In order to prove this feature does work if the correct meta data is made available in the page HTML, you can install a SEO Plugin to set these items for you.

Try installing ~~Yoast SEO~~ (don't install Yoast as they overide the inline link UI so they won't get rich previews) The SEO Framework Plugin.
Remember the notes above regarding caches. You will probably want to disable these at this point to ensure you are seeing the latest data rather than a cache.
Retry the above and see the new previews with more metadata including:
- image of the page
- description of the page.

Screenshots

Out of the box (no SEO Plugin)

Screen.Capture.on.2021-07-29.at.13-24-51.mov

With SEO Plugin

Screen.Capture.on.2021-07-29.at.13-24-01.mp4

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

This doesn’t necessarily need to be a remote URL. We could be fetching from an internal URL using the same mechanic so let’s not confuse people/things.

getdave · 2021-06-30T08:31:08Z

@hellofromtonya When testing this I've realised that the url-details endpoint doesn't look for og:description when searching for a description. How difficult would it be to update that?

getdave · 2021-07-29T11:54:16Z

packages/core-data/src/fetch/__experimental-fetch-url-data.js

+	if ( ! isURL( url ) ) {
+		return Promise.reject(
+			new TypeError( `${ url } is not a valid URL.` )
+		);
+	}
+
+	// Test for "http" based URL as it is possible for valid
+	// yet unusable URLs such as `tel:123456` to be passed.
+	const protocol = getProtocol( url );
+
+	if (
+		! isValidProtocol( protocol ) ||
+		! protocol.startsWith( 'http' ) ||
+		! /^https?:\/\/[^\/\s]/i.test( url )
+	) {
+		return Promise.reject(
+			new TypeError( `${ url } does not have a valid protocol.` )
+		);
+	}
+


Moving all the previous URL checking logic into the main function rather than in the intermediary.

getdave · 2021-07-29T11:54:59Z

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -76,54 +66,6 @@ function useBlockEditorSettings( settings, hasTemplate ) {

 	const { undo } = useDispatch( editorStore );

-	// Temporary home - should this live in `core-data`?
-	const fetchRichUrlData = useCallback(


This intermediary function is no longer required as we will be allowing rich previews for internal URLs as well as external.

bph · 2021-07-29T18:57:51Z

I followed your test instructions. Thank you for those!
It worked all very nicely!

This is such a great feature! It makes linking other pages or sites a fun activity and the experience for content QA is so much better.

On a side note, the gutenberg-plugin.zip downloaded from the PR rendered an error message, “The package could not be installed. No valid plugins were found.” on upload to a LocalWP site. It worked when adding the unzipped directory to the wp-content/plugins directory.

bph

From a user perspective, this looks feature complete.

talldan

LGTM, only one really minor comment

packages/block-editor/src/components/link-control/link-preview.js

See #33086 (comment)

getdave added 2 commits June 29, 2021 15:21

Rename url data function to avoid referencing remote

553717c

This doesn’t necessarily need to be a remote URL. We could be fetching from an internal URL using the same mechanic so let’s not confuse people/things.

Remove middleman method and allow previews for internal URLs

ed17842

getdave self-assigned this Jun 30, 2021

getdave added the [Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) label Jun 30, 2021

getdave requested review from azaozz and hellofromtonya June 30, 2021 08:31

This comment has been minimized.

Sign in to view

getdave mentioned this pull request Jul 29, 2021

url-details endpoint doesn't look for og:description when searching for a description #33754

Closed

getdave commented Jul 29, 2021

View reviewed changes

Rename var to improve self documenting code

b6a0fdf

getdave marked this pull request as ready for review July 29, 2021 12:27

getdave requested review from ellatrix and nerrad as code owners July 29, 2021 12:27

getdave requested review from kevin940726 and bph and removed request for nerrad and ellatrix July 29, 2021 12:27

Add unit test coverage for URL validation

50786d7

getdave requested review from Mamaduka and draganescu July 29, 2021 12:43

bph approved these changes Jul 29, 2021

View reviewed changes

talldan approved these changes Jul 30, 2021

View reviewed changes

packages/block-editor/src/components/link-control/link-preview.js Outdated Show resolved Hide resolved

Rename var to avoid hook naming convention

dad027e

See #33086 (comment)

getdave merged commit be20bec into trunk Jul 30, 2021

getdave deleted the try/enable-rich-previews-for-internal-links branch July 30, 2021 10:03

github-actions bot added this to the Gutenberg 11.3 milestone Jul 30, 2021

jsnajdr mentioned this pull request Mar 4, 2022

useBlockEditorSettings: remove unused unstableBase fetch #39221

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable rich previews for internal links #33086

Enable rich previews for internal links #33086

getdave commented Jun 30, 2021 •

edited

Loading

getdave commented Jun 30, 2021

This comment has been minimized.

getdave Jul 29, 2021

getdave Jul 29, 2021

bph commented Jul 29, 2021

bph left a comment

talldan left a comment

Enable rich previews for internal links #33086

Enable rich previews for internal links #33086

Conversation

getdave commented Jun 30, 2021 • edited Loading

Description

How has this been tested?

Testing environment

Awareness of caching

Testing Steps

Bonus: testing even richer previews!

Screenshots

Out of the box (no SEO Plugin)

With SEO Plugin

Types of changes

Checklist:

getdave commented Jun 30, 2021

This comment has been minimized.

getdave Jul 29, 2021

Choose a reason for hiding this comment

getdave Jul 29, 2021

Choose a reason for hiding this comment

bph commented Jul 29, 2021

bph left a comment

Choose a reason for hiding this comment

talldan left a comment

Choose a reason for hiding this comment

getdave commented Jun 30, 2021 •

edited

Loading