Skip to content

Fix: Duotone handle block style variations - #78229

Open
DarkMatter-999 wants to merge 3 commits into
WordPress:trunkfrom
DarkMatter-999:fix/duotone-block-style-variations
Open

Fix: Duotone handle block style variations#78229
DarkMatter-999 wants to merge 3 commits into
WordPress:trunkfrom
DarkMatter-999:fix/duotone-block-style-variations

Conversation

@DarkMatter-999

Copy link
Copy Markdown
Contributor

What?

Closes #77539

This PR ensures that duotone filters applied to block style variations in Global Styles (e.g., a "Rounded" variation of an Image block) are correctly rendered on the frontend and take precedence over the base block's duotone settings.

Why?

Previously, the WP_Duotone_Gutenberg class only checked for duotone settings applied to the base block type. If a user styled a specific variation with a different duotone, the frontend would either fallback to the base block's filter or apply no filter at all. This occurred because the logic did not account for the variations path in theme.json and didn't check the block's className for is-style-{variation} triggers during render.

How?

  • Updated get_all_global_style_block_names to iterate through block variations in the theme.json data. It now stores variation-specific duotones using the key format blockName:variationName.
  • Updated render_duotone_support to parse the block's className attribute. If an is-style- class is found that matches a stored variation, that duotone is prioritized.
  • Added a check to ensure the style variation duotone is enqueued via enqueue_global_styles_preset before falling back to the default block duotone.
  • Added PHPUnit tests to verify both the rendering of variation duotones and the correct precedence when both a base block and a variation have duotones defined.

Testing Instructions

  • Using a block theme, go to Editor > Styles > Blocks > Image.
  • Set a Duotone filter for the base Image block.
  • In the same menu, select the "Rounded" variation and set a different Duotone filter.
  • Save the changes.
  • Create a post with two Image blocks: leave one as "Default" and set the other to the "Rounded" style.
  • View the frontend.
  • Expected: The default image and the rounded image should have different filters as we had set.

Screenshots or screencast

Before:

style-variation-duotone.mov

After:

style-variation-duotone-fix.mov

Use of AI Tools

I used Gemini 3 Flash to help draft the PR description and structure the summary based on my code changes. And Deepseek v4 Flash (via OpenCode) for initial PR review.

@DarkMatter-999
DarkMatter-999 marked this pull request as ready for review May 13, 2026 09:47
@github-actions

Copy link
Copy Markdown

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@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: DarkMatter-999 <lakshyajeet@git.wordpress.org>
Co-authored-by: adithya-naik <adithyanaik@git.wordpress.org>
Co-authored-by: dpmehta <mehtadev@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>

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

@DarkMatter-999

Copy link
Copy Markdown
Contributor Author

I am happy to backport this to Core after the review 😇

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.

Duotone filter doesn't work for block style variations in global styles.

1 participant