Merge pull request #749 from 10up/feat/724

feat/724: Adds "Generate image" button to media upload components

Author: dkotter

.eslintrc.json

@@ -19,7 +19,8 @@
 		"_": "readonly",
 		"File": "readonly",
 		"Headers": "readonly",
-		"requestAnimationFrame": "readonly"
+		"requestAnimationFrame": "readonly",
+		"React": "readonly"
 	},
 	"extends": ["plugin:@wordpress/eslint-plugin/recommended"],
 	"ignorePatterns": ["*.json"]

includes/Classifai/Features/ImageGeneration.php

@@ -209,6 +209,14 @@ public function enqueue_admin_scripts( string $hook_suffix = '' ) {
 			true
 		);
 
+		wp_enqueue_script(
+			'classifai-extend-image-blocks',
+			CLASSIFAI_PLUGIN_URL . 'dist/extend-image-blocks.js',
+			get_asset_info( 'extend-image-blocks', 'dependencies' ),
+			get_asset_info( 'extend-image-blocks', 'version' ),
+			true
+		);
+
 		/**
 		 * Filter the default attribution added to generated images.
 		 *

src/js/extend-image-block-generate-image.js

@@ -0,0 +1,69 @@
+import { Button } from '@wordpress/components';
+import { _nx } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+
+const allowedCoreBlocks = [
+	'core/image',
+	'core/gallery',
+	'core/media-text',
+	'core/cover',
+];
+
+/**
+ * Adds a `Generate image` button to the media-related blocks.
+ * @see {@link https://github.com/10up/classifai/issues/724}
+ *
+ * @param {React.ReactNode} Component The Wrapped Media upload component.
+ * @return {React.ReactNode} The transformed Media upload component.
+ */
+function addImageGenerationLink( Component ) {
+	return function ( props ) {
+		const { render, ...rest } = props;
+		let blockProps;
+
+		try {
+			blockProps = useBlockProps();
+		} catch ( e ) {
+			return <Component { ...props } />;
+		}
+
+		const { 'data-type': blockName } = blockProps;
+
+		if ( ! allowedCoreBlocks.includes( blockName ) ) {
+			return <Component { ...props } />;
+		}
+
+		let isSingle = 1;
+
+		if ( blockName && 'core/gallery' === blockName ) {
+			isSingle = Infinity;
+		}
+
+		return (
+			<>
+				<Component
+					{ ...rest }
+					mode="generate"
+					render={ ( { open } ) => (
+						<Button variant="tertiary" onClick={ open }>
+							{ _nx(
+								'Generate image',
+								'Generate images',
+								isSingle,
+								'Image or gallery upload',
+								'classifai'
+							) }
+						</Button>
+					) }
+				/>
+				<Component { ...props } />
+			</>
+		);
+	};
+}
+
+wp.hooks.addFilter(
+	'editor.MediaUpload',
+	'classifai/image-generation-link',
+	addImageGenerationLink
+);

webpack.config.js

@@ -42,6 +42,7 @@ module.exports = {
 		'generate-image-media-upload': [
 			'./src/js/media-modal/views/generate-image-media-upload.js',
 		],
+		'extend-image-blocks': './src/js/extend-image-block-generate-image.js',
 	},
 	module: {
 		rules: [