feat: allow saving generated text in a media library from block edito…

…r context
android-com-pl · Aug 18, 2024 · 6c228f3 · 6c228f3
1 parent fd3f182
commit 6c228f3
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 12 deletions.
diff --git a/src/components/BulkGenerateModal.tsx b/src/components/BulkGenerateModal.tsx
@@ -14,6 +14,7 @@ import generateAltText from '../utils/generateAltText';
 import sleep from '../utils/sleep';
 import BulkGenerationTable from './BulkGenerationTable';
 import CustomPromptControl from './CustomPromptControl';
+import SaveAltInMediaLibraryControl from './SaveAltInMediaLibraryControl';
 
 export interface BulkGenerateModalProps {
   attachmentIds: number[];
@@ -30,6 +31,9 @@ export default function BulkGenerateModal({
 }: BulkGenerateModalProps) {
   const [overwriteExisting, setOverwriteExisting] = useState(false);
   const [customPrompt, setCustomPrompt] = useState('');
+  const [saveAltInMediaLibrary, setSaveAltInMediaLibrary] = useState(
+    context === 'mediaLibrary',
+  );
   const [isGenerating, setIsGenerating] = useState(false);
   const { attachments, hasResolved } = useAttachments(attachmentIds);
   const [altGenerationMap, setAltGenerationMap] = useState<AltGenerationMap>(
@@ -100,7 +104,7 @@ export default function BulkGenerateModal({
 
       const task = generateAltText(
         id,
-        context === 'mediaLibrary',
+        saveAltInMediaLibrary,
         customPrompt,
         abortController.current.signal,
       )
@@ -166,6 +170,12 @@ export default function BulkGenerateModal({
       shouldCloseOnEsc={!isGenerating}
       style={{ maxWidth: '48rem' }}
     >
+      <CustomPromptControl
+        value={customPrompt}
+        onChange={setCustomPrompt}
+        disabled={isGenerating}
+      />
+
       <ToggleControl
         label={__(
           'Overwrite existing alternative texts',
@@ -187,11 +197,13 @@ export default function BulkGenerateModal({
         disabled={isGenerating}
       />
 
-      <CustomPromptControl
-        value={customPrompt}
-        onChange={setCustomPrompt}
-        disabled={isGenerating}
-      />
+      {context === 'editor' && (
+        <SaveAltInMediaLibraryControl
+          checked={saveAltInMediaLibrary}
+          onChange={setSaveAltInMediaLibrary}
+          disabled={isGenerating}
+        />
+      )}
 
       <BulkGenerationTable
         loading={hasResolved}

diff --git a/src/components/SaveAltInMediaLibraryControl.tsx b/src/components/SaveAltInMediaLibraryControl.tsx
@@ -0,0 +1,42 @@
+import { ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { ComponentProps } from 'react';
+
+interface SaveAltInMediaLibraryControlProps {
+  label?: string;
+  checked: ComponentProps<typeof ToggleControl>['checked'];
+  onChange: ComponentProps<typeof ToggleControl>['onChange'];
+  disabled?: ComponentProps<typeof ToggleControl>['disabled'];
+}
+
+const DEFAULT_LABEL = __(
+  'Save alt text in media library',
+  'alt-text-generator-gpt-vision',
+);
+
+export default function SaveAltInMediaLibraryControl({
+  label = DEFAULT_LABEL,
+  checked,
+  onChange,
+  disabled = false,
+}: SaveAltInMediaLibraryControlProps) {
+  return (
+    <ToggleControl
+      label={label}
+      checked={checked}
+      onChange={onChange}
+      help={
+        checked
+          ? __(
+              'Alternative text will be saved in the WordPress media library, making it available for reuse across site.',
+              'alt-text-generator-gpt-vision',
+            )
+          : __(
+              'Alternative text will only be saved for the current editor block.',
+              'alt-text-generator-gpt-vision',
+            )
+      }
+      disabled={disabled}
+    />
+  );
+}
diff --git a/src/editor/components/GalleryBlockInspectorControls.tsx b/src/editor/components/GalleryBlockInspectorControls.tsx
@@ -44,7 +44,7 @@ export default ({ clientId }: GalleryBlockInspectorControlsProps) => {
       <Panel>
         <PanelBody
           title={__(
-            'AI Alternative Text Generator',
+            'Alternative Text Generator',
             'alt-text-generator-gpt-vision',
           )}
         >

diff --git a/src/editor/components/GenerateAltButton.tsx b/src/editor/components/GenerateAltButton.tsx
@@ -10,15 +10,15 @@ interface GenerateAltButtonProps {
   currentAlt?: string;
   onGenerate: (alt: string) => void;
   customPrompt?: string;
-  saveAltGlobally?: boolean;
+  saveAltInMediaLibrary?: boolean;
 }
 
 export default ({
   imgId,
   currentAlt = '',
   onGenerate,
   customPrompt,
-  saveAltGlobally = false,
+  saveAltInMediaLibrary = false,
 }: GenerateAltButtonProps) => {
   const [isGenerating, setIsGenerating] = useState(false);
   const { createSuccessNotice, createErrorNotice } = useDispatch(noticesStore);
@@ -39,7 +39,11 @@ export default ({
     try {
       setIsGenerating(true);
 
-      const alt = await generateAltText(imgId, saveAltGlobally, customPrompt);
+      const alt = await generateAltText(
+        imgId,
+        saveAltInMediaLibrary,
+        customPrompt,
+      );
       onGenerate(alt);
 
       await createSuccessNotice(

diff --git a/src/editor/components/ImageBlockInspectorControls.tsx b/src/editor/components/ImageBlockInspectorControls.tsx
@@ -3,6 +3,7 @@ import { Panel, PanelBody } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import CustomPromptControl from '../../components/CustomPromptControl';
+import SaveAltInMediaLibraryControl from '../../components/SaveAltInMediaLibraryControl';
 import GenerateAltButton from './GenerateAltButton';
 
 /**
@@ -13,30 +14,38 @@ export default ({
   setAttributes,
 }: {
   attributes: ImageBlockAttrs;
-  setAttributes: ImageBlockSetAttrs;
+  setAttributes: ImageBlockProps['setAttributes'];
 }) => {
   if (!attributes.id) return null;
 
   const [customPrompt, setCustomPrompt] = useState('');
+  const [saveAltInMediaLibrary, setSaveAltInMediaLibrary] = useState(false);
 
   return (
     <InspectorControls>
       <Panel>
         <PanelBody
           title={__(
-            'AI Alternative Text Generator',
+            'Alternative Text Generator',
             'alt-text-generator-gpt-vision',
           )}
         >
           <CustomPromptControl
             value={customPrompt}
             onChange={setCustomPrompt}
           />
+
+          <SaveAltInMediaLibraryControl
+            checked={saveAltInMediaLibrary}
+            onChange={setSaveAltInMediaLibrary}
+          />
+
           <GenerateAltButton
             imgId={attributes.id}
             currentAlt={attributes.alt}
             customPrompt={customPrompt}
             onGenerate={(alt) => setAttributes({ alt })}
+            saveAltInMediaLibrary={saveAltInMediaLibrary}
           />
         </PanelBody>
       </Panel>