diff --git a/includes/Classifai/Providers/OpenAI/DallE.php b/includes/Classifai/Providers/OpenAI/DallE.php index 0168df2fb..7a3b4a070 100644 --- a/includes/Classifai/Providers/OpenAI/DallE.php +++ b/includes/Classifai/Providers/OpenAI/DallE.php @@ -112,6 +112,14 @@ public function enqueue_admin_scripts( $hook_suffix = '' ) { true ); + wp_enqueue_script( + 'classifai-inserter-media-category', + CLASSIFAI_PLUGIN_URL . 'dist/inserter-media-category.js', + get_asset_info( 'inserter-media-category', 'dependencies' ), + get_asset_info( 'inserter-media-category', 'version' ), + true + ); + /** * Filter the default attribution added to generated images. * diff --git a/src/js/gutenberg-plugins/inserter-media-category.js b/src/js/gutenberg-plugins/inserter-media-category.js new file mode 100644 index 000000000..e71921b97 --- /dev/null +++ b/src/js/gutenberg-plugins/inserter-media-category.js @@ -0,0 +1,67 @@ +/** + * Some code here was copied from Jetpack's implementation of the inserter media category. + * See https://github.com/Automattic/jetpack/pull/31914 + */ +import apiFetch from '@wordpress/api-fetch'; +import { dispatch, select, subscribe } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { addQueryArgs } from '@wordpress/url'; + +const { classifaiDalleData } = window; + +const isInserterOpened = () => + select( 'core/edit-post' )?.isInserterOpened() || + select( 'core/edit-site' )?.isInserterOpened() || + select( 'core/edit-widgets' )?.isInserterOpened?.(); + +const waitFor = async ( selector ) => + new Promise( ( resolve ) => { + const unsubscribe = subscribe( () => { + if ( selector() ) { + unsubscribe(); + resolve(); + } + } ); + } ); + +waitFor( isInserterOpened ).then( () => + dispatch( 'core/block-editor' )?.registerInserterMediaCategory?.( + registerGenerateImageMediaCategory() + ) +); + +const registerGenerateImageMediaCategory = () => ( { + name: 'classifai-generate-image', + labels: { + name: classifaiDalleData.tabText, + search_items: __( 'Enter a prompt', 'classifai' ), + }, + mediaType: 'image', + fetch: async ( { search = '' } ) => { + if ( ! search ) { + return []; + } + + const images = await apiFetch( { + path: addQueryArgs( classifaiDalleData.endpoint, { + prompt: search, + format: 'b64_json', + } ), + method: 'GET', + } ) + .then( ( response ) => + response.map( ( item ) => ( { + title: search, + url: `data:image/png;base64,${ item.url }`, + previewUrl: `data:image/png;base64,${ item.url }`, + id: undefined, + alt: search, + caption: classifaiDalleData.caption, + } ) ) + ) + .catch( () => [] ); + + return images; + }, + isExternalResource: true, +} ); diff --git a/webpack.config.js b/webpack.config.js index 10997e953..766c45322 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -26,6 +26,9 @@ module.exports = { ], 'post-excerpt': [ './src/js/post-excerpt/index.js' ], 'media-modal': [ './src/js/media-modal/index.js' ], + 'inserter-media-category': [ + './src/js/gutenberg-plugins/inserter-media-category.js', + ], 'generate-title-classic': [ './src/js/openai/classic-editor-title-generator.js', ],