I’m working on a hybrid theme and cannot figure out why block-specific styles aren’t being output on my site’s frontend. All the standard CSS derived from the theme.json is being included, but block specific styling is not. For example, I have a group block I’ve configured in the editor to be a grid layout with X columns. If I look in the inspector in the editor, I can see wordpress applying this styling by creating a class called wp-container-core-group-is-layout-3 which includes these rules:
.editor-styles-wrapper .wp-container-core-group-is-layout-3 {
grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr));
container-type: inline-size;
}In the editor, this is added as an inline style but that CSS isn’t making it through to the frontend which means the child blocks just span the width of the container (because no ‘grid-template-columns’ rule is getting applied).
I’m guessing I’m missing something in my functions.php or maybe even my page template that tells WordPress to output these style rules, but I cannot figure out what might be missing. I have the following supports (among others) in my functions.php
add_theme_support( 'wp-block-styles' );
add_theme_support( 'enable-layout-styles' );Any advice would be much appreciated.
I’m running WordPress 6.6.2 and Gutenberg 19.2.0