Integrate Pexels and Google Images to Gutenberg media sidebar

[simison]

Gutenberg (since 14.7) has a new "media" tab in the inserter sidebar:

Since then, the sidebar also has OpenVerse available.

It would be good to add WP.com's Google Photos and Pexels media sources to this sidebar.

Currently those image sources are available in the media block:

Media block	Media modal

The "calypso media modal" which will stop functioning in the editor as 3rd party cookie support goes away, and once we finally remove the Calypso-Gutenberg iframe:

VideoPress doesn't currently play with the sidebar, it's on their radar but isn't being worked on however they have carried out a useful exploration - pe4Cmx-LC-p2. We don't need to work on this but we do need to be aware that they (and other unknown third parties) will follow our footsteps.

Next steps:

• Open/find an issue in GB repo about making the sidebar extensible
• Review any existing proposals, or create a new one for how extension could work - do this in the open
• Open a PR adding extension points
• Add Pexels and gphotos extensions to wpcom (or calypso/jetpack etc)

[ianstewart]

On .com there's currently some integration problem as the tab doesn't show up.

Looks like this part works now at least.

[simison]

VideoPress is experimenting with the sidebar too pe4Cmx-LC-p2

[dsas]

Dropped this from forge roadmapping because https://github.com/orgs/Automattic/projects/472/views/38?groupedBy%5BcolumnId%5D=Status&pane=issue&itemId=27081286 is tracking that

[dsas]

The VideoPress P2 linked above explains roughly what we need to do, though it looks like adding to inserterMediaCategories is still not possible - it's a private/experimental setting. @ntsekouras are there any plans to change this? Is there anything that we could do to help?

[ntsekouras]

Definitely we need to make an API for that, but right now we're very close to the new WP release. We should start working on this early to be definitely ready for the next one.

[ntsekouras]

It's a long shot to have it ready in just a few days for 6.3, but I opened a PR about making the media categories extensible. I'd appreciate some testing there if any of you find some time 😄

[simison]

WP.com runs Gutenberg for all sites so it'd be fine if it's not in 6.3 yet?

[ntsekouras]

WP.com runs Gutenberg for all sites so it'd be fine if it's not in 6.3 yet?

Oh, that's great then!

[dsas]

Uploaded @ntsekouras PR to my wpcom sandbox and from the wp-admin editor I'm now able to run some hacked together pexels fetch

wp.blockEditor.registerInserterMediaCategory( {
	name: 'pexel13',
	labels: {
		name: 'Pexels13',
        
	},
	mediaType: 'image',
	async fetch( query = {} ) {
		// /wpcom/v2/sites/216813947/external-media/list/pexels?_envelope=1&number=20&path=recent&search=mountain&_gutenberg_nonce=de7555b5f0&_locale=user

		const url = 'https://public-api.wordpress.com/wpcom/v2/sites/216813947/external-media/list/pexels?_envelope=1&number=20&path=recent&search=mountain&_locale=user';
	
		const response = await wp.apiFetch( {url: url} );
		const results = response.media;
		return results.map( ( result ) => ( {
			...result,
			// If your response result includes an `id` prop that you want to access later, it should
			// be mapped to `InserterMediaItem`'s `sourceId` prop. This can be useful if you provide
			// a report URL getter.
			// Additionally you should always clear the `id` value of your response results because
			// it is used to identify WordPress media items.
			sourceId: result.ID,
			id: undefined,
			caption: result.caption,
			previewUrl: result.thumbnails.thumbnail,
			url: result.URL
		} ) );
	},
	getReportUrl: null,
	isExternalResource: true,
} );

and it works!

There's something going on with jetpack-layout-grid that I need to investigate, but I assume that's to do with a different gb trunk change, not Nik's diff

[dsas]

The current pexels code lives in jetpack we will have to see how we can extract stuff to supply the fetch function for the inserter sidebar API.

[rcrdortiz]

Updated the end date since we haven't been working on this because we needed to work on the GS on personal plans A/B test project.

[rcrdortiz]

Referencing this issue since they share the same requirements.

[rcrdortiz]

We've now released these changes.