WordPress: Add a media inserter to the block editor using the registerInserterMediaCategory

README.md

I did this to show how easy it is to create your own media inserter. In production I would create a a server that returns the json.

Install

1. Create a block
   • in wp-content/plugins run npx @wordpress/create-block@latest my-image-inserter
   • cd my-image-inserter
2. Copy index.js to my-image-inserter/src/index.js
3. Delete my-image-inserter/my-image-inserter.php
4. Copy plugin.php to my-image-inserter/plugin.php
5. Copy images.json to my-image-inserter/images.json
6. Run npm run build
7. Activate the plugin

Documentation, see registerInserterMediaCategory

Images are from https://picsum.photos/

Example

Test the search by entering the number 1 or 2 or 3 ... It's a partial match search on the title field.

Copyright and License

This plugin is copyright © 2024 Per Soderlind.

This plugin is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

images.json

{
	"images": [
		{
			"sourceId": "image-1",
			"title": "Image 1",
			"caption": "Image 1",
			"alt": "Image 1",
			"url": "https://picsum.photos/id/619/2500/1667",
			"previewUrl": "https://picsum.photos/id/619/600/400"
		},
		{
			"sourceId": "image-2",
			"title": "Image 2",
			"caption": "Image 2",
			"alt": "Image 2",
			"url": "https://picsum.photos/id/18/2500/1667",
			"previewUrl": "https://picsum.photos/id/18/600/400"
		},
		{
			"sourceId": "image-3",
			"title": "Image 3",
			"caption": "Image 3",
			"alt": "Image 3",
			"url": "https://picsum.photos/id/1027/2500/1667",
			"previewUrl": "https://picsum.photos/id/1027/600/400"
		},
		{
			"sourceId": "image-4",
			"title": "Image 4",
			"caption": "Image 4",
			"alt": "Image 4",
			"url": "https://picsum.photos/id/1025/2500/1667",
			"previewUrl": "https://picsum.photos/id/1025/600/400"
		},
		{
			"sourceId": "image-5",
			"title": "Image 5",
			"caption": "Image 5",
			"alt": "Image 5",
			"url": "https://picsum.photos/id/1024/2500/1667",
			"previewUrl": "https://picsum.photos/id/1024/600/400"
		},
		{
			"sourceId": "image-6",
			"title": "Image 6",
			"caption": "Image 6",
			"alt": "Image 6",
			"url": "https://picsum.photos/id/1023/2500/1667",
			"previewUrl": "https://picsum.photos/id/1023/600/400"
		},
		{
			"sourceId": "image-7",
			"title": "Image 7",
			"caption": "Image 7",
			"alt": "Image 7",
			"url": "https://picsum.photos/id/1022/2500/1667",
			"previewUrl": "https://picsum.photos/id/1022/600/400"
		},
		{
			"sourceId": "image-8",
			"title": "Image 8",
			"caption": "Image 8",
			"alt": "Image 8",
			"url": "https://picsum.photos/id/1021/2500/1667",
			"previewUrl": "https://picsum.photos/id/1021/600/400"
		},
		{
			"sourceId": "image-9",
			"title": "Image 9",
			"caption": "Image 9",
			"alt": "Image 9",
			"url": "https://picsum.photos/id/1020/2500/1667",
			"previewUrl": "https://picsum.photos/id/1020/600/400"
		},
		{
			"sourceId": "image-10",
			"title": "Image 10",
			"caption": "Image 10",
			"alt": "Image 10",
			"url": "https://picsum.photos/id/1019/2500/1667",
			"previewUrl": "https://picsum.photos/id/1019/600/400"
		}
	]
}

index.js

import { __ } from "@wordpress/i18n";

// Register a new media category in the block editor inserter
wp.data.dispatch("core/block-editor").registerInserterMediaCategory({
	name: "my-images-category", // Unique name for the media category
	labels: {
		name: __("My JSON Images"), // Display name for the media category
		search_items: __("Search My JSON Images"), // Label for the search input
	},
	mediaType: "image", // Type of media this category handles
	async fetch(query = {}) {
		// Fetch the JSON data from local file.
		const response = await window.fetch(myJSON.images);

		// Parse the JSON response
		const jsonResponse = await response.json();

		// Create a regular expression for searching images titles
		const regexp = new RegExp(query.search, "i");

		// Filter images based on the search query
		const results = jsonResponse.images.filter((image) =>
			regexp.test(image.title),
		);

		// Map the filtered posts to the required format
		return results.map((image) => ({
			...image,
		}));
	},
	getReportUrl: null, // No report URL provided
	isExternalResource: true, // Indicates if the resource is external
});

plugin.php

<?php
/**
 * Plugin Name:       Inserter Media Category
 * Description:       Insert a media category in the editor.
 * Requires at least: 6.6
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            Per Soderlind
 * Author URI:        https://soderlind.no
 * Plugin URI:        https://gist.github.com/soderlind/7084a4b9785b23ad99ec46d35dbfce59#file-plugin-php
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       my-json
 *
 * @package CreateBlock
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}


/**
 * Enqueue the block's assets for the editor.
 */
add_action(
	'enqueue_block_editor_assets',
	function (): void {
		$asset_file = include plugin_dir_path( __FILE__ ) . 'build/index.asset.php';

		wp_enqueue_script(
			'my-json-images',
			plugin_dir_url( __FILE__ ) . 'build/index.js',
			$asset_file['dependencies'],
			$asset_file['version'],
			true
		);

		wp_set_script_translations(
			'my-json-images',
			'my-json'
		);

		wp_add_inline_script(
			'my-json-images',
			'const myJSON = ' . wp_json_encode(
				[
					'images' => plugin_dir_url( __FILE__ ) . 'images.json',
				]
			),
			'before'
		);
	}
);