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: jeffpaul <[email protected]>
Co-authored-by: dkotter <[email protected]>
Co-authored-by: karmatosed <[email protected]>

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.
✅ Project coverage is 72.40%. Comparing base (99d5a03) to head (d59a740).

@@            Coverage Diff             @@
##             develop     #546   +/-   ##
==========================================
  Coverage      72.40%   72.40%           
  Complexity      1162     1162           
==========================================
  Files             68       68           
  Lines           5596     5596           
==========================================
  Hits            4052     4052           
  Misses          1544     1544           

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

I quickly tested locally by just copying the SVG markup into our ai-icon.tsx file but this new icon doesn't work great at the smaller size we show in the admin. Ends up looking blurry/pixelated, which I realize the icon does that on purpose but doesn't work great at small scale:

Now maybe this is a mistake on my end and there's a "better" way to pull that SVG markup into our icon file that would resolve this. But wondering if we need a solid line version of the icon to use in the admin?

@karmatosed perhaps an alt version that appears better that these lower resolutions/sizes?

I tried to make it work smaller but it doesn't so lets just use the original one smaller simplified.

@dkotter are you able to try that ^ image in the settings page and block toolbar?

Does look better but the old icon was 24x24 and this one is 132x184. Would be great if it was the same size or at least a 1:1 ratio, otherwise it doesn't match other icons, in particular in the block toolbar:

I couldn't get exact square so maybe...

I actually think the border might be better to be a true 1:1

So this looks better though the border does make it stand out more as compared to other block toolbar icons.

The main issue that I need help on (someone that's better with SVG and CSS) is that this SVG has inline fill attributes and that overrides the styling that is automatically added to the block toolbar. So if you hover over the icon there, it should get a blue fill color but that's not working. Same with blocks that have previously been resized using AI, the toolbar icon should default to blue but that's no longer working. I've tried a few CSS tweaks but haven't found one that full resolves it.

The main issue that I need help on (someone that's better with SVG and CSS) is that this SVG has inline fill attributes and that overrides the styling that is automatically added to the block toolbar

Tried a few other approaches and finally found one that seems to more or less fix the problem so just pushed that up. This is looking good to me now.

I'd prefer there wasn't the dark square/rectangular outline around the image in the settings header and block toolbar, but if that's the best we can do in time for v1 then let's go ahead and ship this and come back to try and remove that in a follow-up release.

Messing with the SVG markup a bit, I was able to remove that border so it looks like this now:

Awesome, ship it!