Strange issue. Any page with a query loop and filters that has blocks that use filesystem registered JSON block styles (i.e. .is-style-button-outline registered by putting a JSON files in the theme like /styles/blocks/button-outline.json) loses it's styling after filtering.
For example given a button with the following classes:
class="wp-block-button is-style-outline is-button-size-large is-style-outline--10"
The inline CSS before filtering will be:
:root :where(.wp-block-button.is-style-outline--10 .wp-block-button__link) {background-color: transparent;}
The inline CSS after filtering will be:
:root :where(.wp-block-button .wp-block-button__link) {background-color: red;}
The "reload" seems to regenerate inline CSS which reverts to just the defaults in theme.json? Maybe? Not sure. It's confusing.
My button that is NOT inside the Query Loop. And the page has only ONE Query Loop.
The simple workaround is to register Block Styles via JS instead and create all of the SCSS/CSS in the theme's CSS file(s) as opposed to using JSON which gets inlined on load. Would be nice though to be able to use JSON files for styling.
Strange issue. Any page with a query loop and filters that has blocks that use filesystem registered JSON block styles (i.e. .is-style-button-outline registered by putting a JSON files in the theme like /styles/blocks/button-outline.json) loses it's styling after filtering.
For example given a button with the following classes:
class="wp-block-button is-style-outline is-button-size-large is-style-outline--10"The inline CSS before filtering will be:
:root :where(.wp-block-button.is-style-outline--10 .wp-block-button__link) {background-color: transparent;}The inline CSS after filtering will be:
:root :where(.wp-block-button .wp-block-button__link) {background-color: red;}The "reload" seems to regenerate inline CSS which reverts to just the defaults in theme.json? Maybe? Not sure. It's confusing.
My button that is NOT inside the Query Loop. And the page has only ONE Query Loop.
The simple workaround is to register Block Styles via JS instead and create all of the SCSS/CSS in the theme's CSS file(s) as opposed to using JSON which gets inlined on load. Would be nice though to be able to use JSON files for styling.