Closed wongjn closed 2 months ago
Yeah. I have the same issue, breaking styles in the editor and front-end.
Thanks for writing up this detailed issue @wongjn it has really helped with the debugging 👍
I can replicate the problem.
The sample theme.json snippet also highlights the possibility that empty CSS rules can be generated using theme.json custom css.
I believe the bugs can be isolated to the process_blocks_custom_css
function. I'll work on getting a fix up shortly.
A fix is up in https://github.com/WordPress/gutenberg/pull/63980 and backport is available over in https://github.com/WordPress/wordpress-develop/pull/7097.
I have the same issue.
If I add this to my theme.json
"core/post-template": {
"css": " & .sticky .wp-block-post-title a::after { content: \"*\"}"
},
This generates this code
:root :where(.wp-block-post-template .sticky .wp-block-post-title a::after) {
content: "*"
}
Which does not work, But it would if the pseudo class ::after was left outside the :where selector like this
:root :where(.wp-block-post-template .sticky .wp-block-post-title a)::after {content: "*"}
Apart from this, for each css property added we get an empty css like this one in the example that I provide:
:root :where(.wp-block-post-template) {}
it would be great if these empty css properties where not added
Thanks for the extra confirmation @dballari 👍
As noted above, there is already a proposed fix that addresses both of these issues. See https://github.com/WordPress/gutenberg/pull/63980 for more details.
If you feel comfortable doing so, it would be great if you could test that PR and confirm the fix works for you 🤞
sorry @aaronrobertshaw I have not been able to test your PR, my build process fails I think because of this package @wordpress/babel-preset-default:build if I'm able to solve it, I will test
Description
With the CSS specificity change in WordPress 6.6, most rules are now wrapped in
:root :where()
. However, pseudo-elements like::before
and::after
cannot be wrapped in:where()
.This means
theme.json
like this:Produces:
Which is invalid CSS and causes the CSS rule to no longer apply.
Step-by-step reproduction instructions
core/heading
instyles.blocks
intwentytwentyfour/theme.json
:Compare this to the equivalent in 6.5.5:
Which is valid CSS.
Screenshots, screen recording, code snippet
No response
Environment info
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.