Twenty Twenty-Five: Add a few basic duotones so the tool doesn't feel broken

[Joen]

In the new Twenty Twenty-Five default theme, only a few of the style variations (such as Midnight) come with duotone color presets. As a result, for most of the style variations, the duotone toolbar option appears broken (see attachment), even though you can make your own custom duotones. While it is an option to not provide any presets, as a default theme it would benefit from leveraging all that the software has to offer.

Suggestion: add a few generic and useful duotone presets that work well across all style variations, so at least the menu isn't empty. For example it could be a simple grayscale duotone filter, perhaps even dark grayscale. It doesn't have to be more than one ortwo presets for the filter menu to become clearer as a result.

[Joen]

Empty duotone menu

[beafialho]

Thanks for reporting @Joen! I'll work on some duotones for each variation and will post a reply here.

Trac ticket: https://core.trac.wordpress.org/ticket/62475

Key Changes:
Added default duotone styles to ensure the duotone functionality feels complete and intuitive.
These duotones provide users with a set of predefined options that enhance visual design flexibility.

Testing Instructions:

1. Apply the changes and activate the Twenty Twenty-Five theme.
2. Add a block that supports duotones, such as an image or cover block.
3. Check the availability and application of the new default duotone styles.

[im3dabasia1]

Screencast of the duotone presets

[im3dabasia1]

@Joen , I’ve added a few basic duotones to the Twenty Twenty Five theme and raised a corresponding PR for it.

Please let me know if there are any changes or improvements needed. Here’s the link to the​PR.

[Joen]

Thank you, nice work. Though per @beafialho's note above, and knowing she designed the original theme, I'd love to see what values she might propose. Perhaps you can update your PR when she gets time to ponder some values?

[afercia]

For history, it's worth noting this was originally proposed in ​https://github.com/WordPress/twentytwentyfive/issues/122. Props should fo to @poena for the original report.

[desrosj]

Moving to the next minor milestone. It's wortwhile to push out bugs as we fix them. A release of TT5 before the end of the year would be great to clean up any outstanding issues for the theme.

[beafialho]

For history, the duotones were removed here: ​https://github.com/WordPress/twentytwentyfive/issues/308

I think it makes more sense to have specific duotones than default ones, like this issue suggests, so I have worked on some duotones for each variation, and the default one.

Here's a video showing them: ​https://cloudup.com/cXJIy6z9aUb

I have attached the theme file with the new duotones in each .json file to this issue.

[beafialho]

2025 with duotones

[im3dabasia1]

Thank you very much, @beafialho, for the duotones. I have updated my PR with the duotones as suggested by @beafialho.

Please let me know if I missed anything.

cc: @Joen

[Joen]

Nice work, @im3dabasia1. I can confirm in testing that the duotones look right to me. I would appreciate an additional check, if @beafialho has time, you can test using the Playground link here: ​https://github.com/WordPress/wordpress-develop/pull/7838

[beafialho]

Thank you for updating the PR. I have tested through the Playground link and the duotones are looking right.

[poena]

I am wondering if there is something we can do to make the duotone easier to use?
If I apply a duotone, and then switch style variations, I have to apply a duotone again.
I have not tested this, but I believe that if the duotones had the same slug, the user would not need to do this extra step?.

But that highlights another issue: The number of duotones is not the same, some variations have have three duotones. If I select the third duotone and then later switch the variation, which duotone should it be mapped to?

I also think I am running into an editor bug that I have not seen before.
If I activate the theme style variation "Twilight", and I add the duotone Twilight Blue to an image block, then the CSS class name on the figure for the image block is wp-duotone-twilight-blue.
This is correct.

But if I then switch back to the theme style variation "Default", (without making any other changes)
this CSS class name is changed to wp-duotone-varpresetduotonetwilight-blue-2 and I don't think that is correct.

[Joen]

Indeed. Is the proposal to unify duotones across all variations (in that case, perhaps we keep just the two generic black and whites perhaps) and then open a separate block editor bug report, or is there more nuance?

[jorbin]

Based on the test reports, I think the next step for this is to for the change in the zip to become an actual PR/patch that can land in core and then for it to be given a final review and commit.

[im3dabasia1]

Hi @jorbin,

I have made the changes as suggested in the comment and have included the duotones, as recommended by @beafialho, from their theme zip file in the ​PR.

Please let me know if there is anything else I can assist with.

Thank you!

[abcd95]

I tested the changes, and they seem to work fine for me - ​Test Video

However, I noticed extra horizontal scroll when viewing on mobile viewport which I think is unrelated but I will investigate about this seperately.

[poena]

Replying to Joen:

Indeed. Is the proposal to unify duotones across all variations (in that case, perhaps we keep just the two generic black and whites perhaps) and then open a separate block editor bug report, or is there more nuance?

Its less of a proposal than a question and something that needs to be tested and explored.

I opened the issue about the CSS class names here ​https://github.com/WordPress/gutenberg/issues/67459

[poena]

A short recap of what I have found so far:

• Even if the duotone slugs in all variations are changed to a matching set like duotone-1 duotone-2 etc, the styling still breaks and the user still needs to re-apply the duotones when the variation is changed. The CSS class name on the blocks still breaks and this is not related to the theme.

• If the default duotone slugs are changed to a duotone-1 etc, then users do not need to re-apply duotones if they are switching from Twenty Twenty-Four to Twenty Twenty-five.
• Maybe needless to say but the existing midnight filter duotone can not be renamed unless replacement CSS is added, since existing styles will break.