Image Block: Duotone feature/tool affecting caption display

[retnonindya]

Quick summary

When an image (Image Block) has Duotone feature active, the caption ( <figcaption> ) is displayed differently. This happens on classic themes (tested so far: Toujours and Twenty Fifteen)

Steps to reproduce

1. Make sure the website uses a classic theme. e.g. Toujours
2. Create a post/page
3. Insert an image using Image Block
4. Add caption
5. Insert another image using Image Block
6. Set duotone filter
7. OR, set duotone filter, then click "Unset"
8. Add caption

What you expected to happen

Both images should have the caption displayed in the same way (same font size, same color, same display)

What actually happened

• The Image Block with regular image will display the caption properly as expected

• The Image Block with duotone-applied image will have the caption text displayed just like regular text

• And this is when the duotone filter is set to "Unset". Notice how the image is back to "normal", but the caption display stays.

The cause:

<figure class="wp-duotone-unset-1">

... or...

<figure class="wp-duotone-COLOR CODE">

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

Workaround:

• Remove duotone filter from the image (not ideal), or...
• Use CSS (only applicable on WPCOM site in the Premium plan and above)

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple: Could Not Replicate
• Tested on AT: Could Not Replicate
• Tested on Self-hosted: Could Not Replicate

📌 FINDINGS/SCREENSHOTS/VIDEO

• Tested with the following themes: Toujours, Twenty Fifteen, Twenty Nineteen, Twenty Twenty, Twenty Twenty-One
• In all test, the figcaption's styling was unimpacted by any changes to the Image block's duotone.

Simple Example

https://user-images.githubusercontent.com/27249804/227043718-133ab63b-3d34-49a3-b9f1-8980371703a1.mov

📌 ACTIONS

• Closed as could not replicate (please reopen if the issue reoccurs)