block editor - Add to Media Inserter Categories

admin管理员组

文章数量:1122846

As of Wordpress 6.2, Openverse was integrated into wordpress and it is available under the Media Tab of the Inserter.

I want to develop a plugin that integrates another stock image service into the Media Inserter Tab as well, but browsing through the documentation and the source code, there doesn't seem to be any hooks I can put it in.

From what I know, the categories are registered under the inserterMediaCategories const in editor js. Is there a way I can add to it in a plugin?

As of Wordpress 6.2, Openverse was integrated into wordpress and it is available under the Media Tab of the Inserter.

I want to develop a plugin that integrates another stock image service into the Media Inserter Tab as well, but browsing through the documentation and the source code, there doesn't seem to be any hooks I can put it in.

From what I know, the categories are registered under the inserterMediaCategories const in editor js. Is there a way I can add to it in a plugin?

• block-editor
• media

Share Improve this question asked Apr 24, 2023 at 4:44 merctraidermerctraider 2122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You can use the example from block-editor.js and adapt it for your requirements:

wp.data.dispatch('core/block-editor').registerInserterMediaCategory( {
    name: 'openverse',
    labels: {
        name: 'Openverse',
        search_items: 'Search Openverse',
    },
    mediaType: 'image',
    async fetch( query = {} ) {
        const defaultArgs = {
            mature: false,
            excluded_source: 'flickr,inaturalist,wikimedia',
            license: 'pdm,cc0',
        };
        const finalQuery = { ...query, ...defaultArgs };
        // Sometimes you might need to map the supported request params according to `InserterMediaRequest`.
        // interface. In this example the `search` query param is named `q`.
        const mapFromInserterMediaRequest = {
            per_page: 'page_size',
            search: 'q',
        };
        const url = new URL( 'https://api.openverse.org/v1/images/' );
        Object.entries( finalQuery ).forEach( ( [ key, value ] ) => {
            const queryKey = mapFromInserterMediaRequest[ key ] || key;
            url.searchParams.set( queryKey, value );
        } );
        const response = await window.fetch( url, {
            headers: {
                'User-Agent': 'WordPress/inserter-media-fetch',
            },
        } );
        const jsonResponse = await response.json();
        const results = jsonResponse.results;
        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.thumbnail,
        } ) );
    },
    getReportUrl: ( { sourceId } ) =>
        `https://wordpress.org/openverse/image/${ sourceId }/report/`,
    isExternalResource: true,
});

A basic example, which just returns a static image would look like this:

wp.data.dispatch('core/block-editor').registerInserterMediaCategory({
    name: 'my-images',
    labels: {
        name: 'my-images',
        search_items: 'Search my-images',
    },
    mediaType: 'image',
    async fetch(query = {}) {
        // Static image result
        const results = [
            {
                url: 'https://cdn.pixabay.com/photo/2024/09/30/08/11/bird-9085008_1280.jpg',
                previewUrl: 'https://cdn.pixabay.com/photo/2024/09/30/08/11/bird-9085008_1280.jpg',
                id: 9085008,
                caption: 'test',
                thumbnail: 'https://cdn.pixabay.com/photo/2024/09/30/08/11/bird-9085008_1280.jpg',
            }
        ];

        return results.map(result => ({
            ...result,
            sourceId: result.id,
            id: undefined,
            caption: result.caption,
            previewUrl: result.thumbnail,
        }));
    },
    isExternalResource: true,
});

本文标签： block editorAdd to Media Inserter Categories