Only add the Generate Alt Text button to selected image blocks#356
Only add the Generate Alt Text button to selected image blocks#356dkotter merged 3 commits intoWordPress:developfrom
Conversation
…cks to ensure we don't show that when in the pattern editing mode
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## develop #356 +/- ##
==========================================
Coverage 57.70% 57.70%
Complexity 617 617
==========================================
Files 46 46
Lines 3173 3173
==========================================
Hits 1831 1831
Misses 1342 1342
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
gziolo
left a comment
There was a problem hiding this comment.
The proposed change makes perfect sense.
There was a problem hiding this comment.
Minor suggestion: from a React standpoint, it might be better to always render <BlockEdit> in a stable position (inside the fragment) and only conditionally render <AltTextControls>. Right now, toggling isSelected and changing other conditions causes <BlockEdit> to shift between being a standalone element and a fragment child, which can trigger unnecessary unmount/remount cycles.
Something like:
const showControls =
props.name === 'core/image' &&
props.isSelected &&
aiAltTextGenerationData?.enabled;
return (
<>
<BlockEdit { ...props } />
{ showControls && (
<AltTextControls
clientId={ props.clientId }
attributes={ props.attributes }
setAttributes={ props.setAttributes }
/>
) }
</>
);I haven't located a concrete bug caused by this here, but based on past experience, keeping the component tree structure stable avoids subtle re-mounting and therefore order issues. Not a blocker — just a refinement to consider as a follow-up.
… <BlockEdit> in the same place to avoid any mounting problems
@gziolo That's a good idea, thanks for the feedback. Updated that here: 76baf57 |
What?
Closes WordPress/ai-provider-for-openai#16
Ensure we add the alt text generation controls only to selected image blocks
Why?
As reported in the above issue, if you have an image block within a pattern and you toggle back and forth between the image and another block in the pattern, the alt text generation button ends up displaying weird (that issue mentions it duplicating but I wasn't able to reproduce that).
To fix this, we just need to ensure we only show our controls on selected image blocks.
How?
Instead of checking if the current block is an image, we also add a check to ensure that block is currently selected
Use of AI Tools
None
Testing Instructions
npm i && npm run buildScreenshots