diff --git a/src/components/BulkGenerateModal.tsx b/src/components/BulkGenerateModal.tsx index 6f7817b..6a81a99 100644 --- 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 new file mode 100644 index 0000000..d1428c4 --- /dev/null +++ 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 index 79e4f60..b50a70c 100644 --- 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 index c45bf00..846f9c3 100644 --- a/src/editor/components/GenerateAltButton.tsx +++ b/src/editor/components/GenerateAltButton.tsx @@ -10,7 +10,7 @@ interface GenerateAltButtonProps { currentAlt?: string; onGenerate: (alt: string) => void; customPrompt?: string; - saveAltGlobally?: boolean; + saveAltInMediaLibrary?: boolean; } export default ({ @@ -18,7 +18,7 @@ export default ({ 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 index 86db460..bebf2cb 100644 --- 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,18 +14,19 @@ 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', )} > @@ -32,11 +34,18 @@ export default ({ 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>