Completely disabling duotone filters along with their hidden SVG HTML output

Published on 15/09/2022

For as long as I’ve been working with the WordPress block editor, the duotone filters have barely been useful to me. There’s maybe one project out of the 25+ I’ve realized with the block editor that actually use duotone filters. For all others, I’ve so far disabled them by setting the duotone option in theme.json to an empty array []:

{
    "version": 1,
    "settings": {
        "color": {
            "duotone": []
        }
    }
}

This does disable the duotone option within the block editor. What it does not do is preventing WordPress from outputting all the default SVG within the website code that’s normally used to apply the filters.

I’ve now learned that in order to completely disable the duotone filters including the frontend SVG output, you have to set the duotone option to null:

{
    "version": 2,
    "settings": {
        "color": {
            "duotone": null
        }
    }
}

In newer projects, I’m also on v2 of theme.json. I have not tested if this makes any difference though. I’ve tested this with the latest WordPress (6.0.2 as of writing this). Behaviour may vary if you’re on an older version.