Switch to more specific hooks to render the Generate Image buttons to avoid conflicts

[dkotter]

What?

Closes #487

Switch to using editor.MediaPlaceholder and editor.MediaReplaceFlow as our hooks instead of using editor.MediaUpload

Why?

As reported in #487, there's some scenarios where the Generate Image button is rendering (like above the caption field when that field is selected) where we don't want it.

Seems that when using the editor.MediaUpload hook to modify things, these sorts of "inline" components within an image block still show as being an image block even though they are nested within an image block.

I originally had fixed this by checking for a specific prop that only existed on the main image block but that seemed pretty fragile long term. Switch instead to using more specific hooks to add our buttons, both the inline placeholder button and the menu button.

How?

• Switch away from using editor.MediaUpload as our only hook and instead use editor.MediaPlaceholder to add our button to the media placeholder and editor.MediaReplaceFlow to add our button to the replace menu
• Add a new helper function to ensure we only target the blocks we want (blocks that support images)
• Add new helper functions to ensure our button in the media placeholder stays in the same position (after the Upload button) instead of the default of either at the beginning or at the end

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code, Cursor
Model(s): Sonnet 4.6, GPT-5.5
Used for: Debugging and suggesting solutions. Review and testing of each suggestion done by me.

Testing Instructions

1. Pull this PR down and run npm i && npm run build
2. Turn on the Image Gen Feature
3. Create a post and add an image block
4. Select an existing image for this block
5. Add a caption to this image in the block
6. Click into the caption and ensure you don't see an extra Generate Image button
7. Add an empty image block and ensure you do still see a Generate Image button and that works
8. For an image block that has an image already selected, click into the block and click Replace in the block toolbar. Ensure Generate Image shows in the dropdown and still works
9. Can also install the latest version of the Gutenberg plugin and turn on the Block fields: Show dataform driven inspector fields on blocks that support them experiment. This will then show the caption field in the image block sidebar. Ensure no extra Generate Image button shows there

Changelog Entry

Fixed - Ensure the Generate Image button doesn't render in contexts that aren't valid.

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dkotter <dkotter@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: vishnupprajapat <vishnuprajapat@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 69.16%. Comparing base (7aa7bcd) to head (1bc5fcf).

Additional details and impacted files

@@            Coverage Diff             @@
##             develop     #489   +/-   ##
==========================================
  Coverage      69.16%   69.16%           
  Complexity       981      981           
==========================================
  Files             63       63           
  Lines           4648     4648           
==========================================
  Hits            3215     3215           
  Misses          1433     1433           

Flag	Coverage Δ
unit	69.16% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jeffpaul]

Testing via instructions and this works as expected, thanks!