Add option for rendering SVG filters when the filter doesn't appear in block markup #53662
Labels
Global Styles
Anything related to the broader Global Styles efforts, including Styles Engine and theme.json
[Package] Block editor
/packages/block-editor
[Type] Enhancement
A suggestion for improvement.
Problem
Trac: https://core.trac.wordpress.org/ticket/59017
Prior to WP 6.3 duotone filters from global styles were always rendered on every page that required global styles. In 6.3 optimizations were added to selectively render duotone filters that appeared in block markup to save a few kilobytes of SVGs that were often never used. This was one of the most asked for issues in Gutenberg, #38299.
However, some sites have already been relying on these default styles and SVG filters within their external CSS stylesheets for things that cannot be done in the editor or theme.json.
The "global styles" feature was, conceptually, just a global stylesheet integrated with editor settings for adjusting that stylesheet. It even included a set of default styles for patterns so that patterns could be used across themes. Using this conceptual framework, one would expect all styles to always be available.
Gutenberg is has been working towards removing CSS entirely from themes since the site editor was introduced. Twenty Twenty Three was the first core theme proving that a variety of themes could be built without additional CSS. And there are other efforts to do more conditional rendering of styles such as #45198 for block styles.
Existing Solutions
There are a couple different solutions for duotone filters at the time being that don't require a Gutenberg change. Each solution depends on how you've used the duotone filters on your page.
Add static SVGs to the page
With this, all of the SVG filters can be accessed in CSS with using their SVG id as a url:
filter: url('#wp-duotone-id');
.If you were using the CSS custom properties, those will need to be included in your stylesheet.
Re-add the old deprecated duotone filter.
If you aren't concerned about deprecation warnings, instead of copying the filters to the page, you can just run the old duotone hooks directly. This has the benefit that updates to the theme.json will be reflected in the rendered output.
Possible Solutions
If global styles continues to remove styles unused by blocks, we may just want to document that and leave global styles out of custom stylesheets entirely instead of the solutions listed below.
The trac ticket mentions two possible solutions for forcing rendering SVG filters that I've tried to provide more concrete examples for here.
1. Add an option in theme.json to always render certain options
I think this option most closely matches how other global styles features work, and would most likely be the natural place to look for such a setting.
Depending on if other presets become optimized out for performance like duotone, this common interface could
The drawbacks of this approach is that you'll still have some pages that don't use SVG filters that have the global filters.
It could take on a number of shapes. Here are two possible examples.
Adding a property to each preset
Adding an array of preset identifiers
2. Add a filter to force rendering of certain filters
Instead of adding settings to theme.json, we could take the filter route.
This is much more hidden than the theme.json option. And I don't think that all theme authors would be comfortable with this approach if they're simply working with the theme.json file. But it is much more flexible, as you could choose to use other conditionals such as
is_page()
,is_singular()
, etc..The text was updated successfully, but these errors were encountered: