Skip to content

Add preset image editing options to remove an item or replace an item#312

Merged
dkotter merged 11 commits intoWordPress:developfrom
dkotter:feature/image-remove-replace
Mar 19, 2026
Merged

Add preset image editing options to remove an item or replace an item#312
dkotter merged 11 commits intoWordPress:developfrom
dkotter:feature/image-remove-replace

Conversation

@dkotter
Copy link
Copy Markdown
Collaborator

@dkotter dkotter commented Mar 17, 2026

What?

Closes #236

Adds two new image editing preset options: Remove item, Replace item

Why?

While you can always use the included textarea to make conversational edits to an image (including removing or replacing an item) it may be easier or feel more familiar to be able to select an item within the image to remove or replace. When using either of these new preset options, you will draw on top of the image (e.g. circle the item you want to edit) and then add an additional prompt (when replacing) to describe what you want to swap in.

How?

  • Adds two new preset options that show in the AI Edit image mode: Remove item, Replace item
  • When either is selected, render an image canvas that allows you to draw on top of the current image
  • When finished, apply that drawing to the image and send that off to the LLM, along with a built-in prompt
  • When replacing an item, also will show a textarea where you put in details about what you want the replacement to be which gets added to our built-in prompt
  • Once the image is generated, the same existing flow is shown

Use of AI Tools

Generated and executed a plan using Claude Code running Opus 4.6. Did some final refinement myself and all testing

Testing Instructions

  1. Install the AI Provider for Google plugin
  2. Pull this PR down and run npm install && npm run build
  3. Add valid Google credentials
  4. Turn on the Image Generation experiment
  5. Ensure you have an existing image in the Media Library
  6. In the Media Library grid view, click on an image and then in the modal that shows, click the Edit Image button
  7. In the edit modal that shows, click the new AI Edit button
  8. Ensure you see four preset options including the new Remove item and Replace item buttons
  9. Click Remove item. Ensure the original image is shown and you have the ability to draw on the image
  10. Circle something you want removed then click Apply
  11. Ensure an image is generated that has that item removed
  12. Go back and click the Replace item button. Ensure the original image is shown and you have the ability to draw on the image
  13. Circle something you want replaced and then add your replacement item before clicking Apply
  14. Ensure an image is generated that has that item replaced

Screenshots

Image Edit mode with the new Remove item and Replace item buttons Image Edit mode with Remove item active showing an item in the image circled Image Edit mode with Replace item active showing an item in the image circled and replacement text added Open WordPress Playground Preview

@dkotter dkotter added this to the 0.6.0 milestone Mar 17, 2026
@dkotter dkotter self-assigned this Mar 17, 2026
@codecov
Copy link
Copy Markdown

codecov bot commented Mar 17, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 57.85%. Comparing base (0d1ec92) to head (e491390).
⚠️ Report is 12 commits behind head on develop.

Additional details and impacted files
@@            Coverage Diff             @@
##             develop     #312   +/-   ##
==========================================
  Coverage      57.85%   57.85%           
  Complexity       615      615           
==========================================
  Files             46       46           
  Lines           3165     3165           
==========================================
  Hits            1831     1831           
  Misses          1334     1334           
Flag Coverage Δ
unit 57.85% <ø> (ø)

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 jeffpaul mentioned this pull request Mar 18, 2026
33 tasks
@jeffpaul
Copy link
Copy Markdown
Member

Similar to #305 (comment) let's ensure these two buttons are present by default on the second line of buttons that are all AI Edit functionality but not include the AI Edit button as a requirement to press first. Also, let's update the button copy to Title Case instead of Sentence case.

@dkotter
Copy link
Copy Markdown
Collaborator Author

dkotter commented Mar 19, 2026

Similar to #305 (comment) let's ensure these two buttons are present by default on the second line of buttons that are all AI Edit functionality but not include the AI Edit button as a requirement to press first. Also, let's update the button copy to Title Case instead of Sentence case.

Makes sense, will get those changes in place though at this point, will be easier once #292 and #305 get merged so holding on this until then

@dkotter dkotter marked this pull request as ready for review March 19, 2026 20:02
@github-actions
Copy link
Copy Markdown

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>

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

@jeffpaul jeffpaul self-requested a review March 19, 2026 20:05
@jeffpaul
Copy link
Copy Markdown
Member

  1. Perhaps instead of Apply the button should say Remove in the Remove Item flow?
Screenshot 2026-03-19 at 3 07 59 PM
  1. Similarly perhaps Replace in the Replace Item flow?
Screenshot 2026-03-19 at 3 09 11 PM

Otherwise, no notes, ship it.

jeffpaul
jeffpaul previously approved these changes Mar 19, 2026
@dkotter dkotter merged commit b0fdee8 into WordPress:develop Mar 19, 2026
15 checks passed
@dkotter dkotter deleted the feature/image-remove-replace branch March 19, 2026 20:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add generative image edit actions (inpaint and outpaint)

2 participants