humanmade / humanmade/query-filter

JSON Styles break after filtering

Open
#41 4 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
123
Forks
33
Avg merge
6h 7m
Merged PRs (30d)
5

Description

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.