1

I just upgraded a project to WordPress 6.0.1, and now have load of wp-container-* inline styles injected which are breaking my site:

<style>.wp-container-2 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;}.wp-container-2 > * { margin: 0; }</style>
<style>.wp-container-3 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;justify-content: center;}.wp-container-3 > * { margin: 0; }</style>
<style>.wp-container-5 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;}.wp-container-5 > * { margin: 0; }</style>
<style>.wp-container-6 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;justify-content: center;}.wp-container-6 > * { margin: 0; }</style>
<style>.wp-container-8 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;}.wp-container-8 > * { margin: 0; }</style>
<style>.wp-container-9 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;justify-content: center;}.wp-container-9 > * { margin: 0; }</style>
<style>.wp-container-11 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;}.wp-container-11 > * { margin: 0; }</style>
<style>.wp-container-12 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;justify-content: center;}.wp-container-12 > * { margin: 0; }</style>

In addition there are also styles overriding my styling for Gallery blocks - for example:

<style> .wp-block-gallery-4{ --wp--style--unstable-gallery-gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) ); gap: var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )}</style>

This is overriding my Tailwind CSS and I can't see where they are coming from.

Anyone encountered / solved this?

5
  • 2
    have you been changing the layout options in the block editor? And have you set up a theme.json to configure or remove those controls? Is your theme a block theme? Classic? Hybrid?
    – Tom J Nowell
    Jul 13 at 16:54
  • @TomJNowell I haven't made any changes in the editor that would lead to these styles. In particular it's the specificity that's problematic - they are overriding theme styles. I have got a theme.json file but the settings aren't getting rid of the offending inline styles (eg. "settings": {"spacing": {"blockGap" : null} } } has no effect. The wp-block-gallery-*` styles which are causing issues don't seem to be available as settings in the theme.json file. Jul 13 at 18:02
  • I'm not seeing block gallery styles in your question, and there are other parameters in the spacing section such as margin padding and units
    – Tom J Nowell
    Jul 13 at 18:22
  • 1
    I've edited the question to show the gallery styles. Jul 13 at 19:06
  • @codewithfeeling edited my answer to add something that might help with the gallery block styles.
    – Lisa
    Jul 14 at 23:18

1 Answer 1

0

These styles are styles applied through the block settings toolbar.

This code will remove the wp-container-id class for every block:

remove_filter( 'render_block', 'wp_render_layout_support_flag', 10, 2 );

This was found on this page. It has more advice on removing block styles and altering them as well.

Also found on the above page was this code to remove all block styles on the front. It might help the second part of your question I missed.

function prefix_remove_core_block_styles() {
global $wp_styles;

foreach ( $wp_styles->queue as $key => $handle ) {
    if ( strpos( $handle, 'wp-block-' ) === 0 ) {
        wp_dequeue_style( $handle );
    }
}
}
add_action( 'wp_enqueue_scripts', 'prefix_remove_core_block_styles' );
3
  • 1
    Thanks a lot for this Lisa - it's a partial solve since it does indeed remove the container styles... but the block gallery inline styles remain. I wonder why they aren't also removed? Jul 14 at 18:52
  • @codewithfeeling I missed the bottom part of your question. Added something that removes core block styles on the front that start with wp-block- .
    – Lisa
    Jul 14 at 23:11
  • Thanks again @Lisa – but the second piece of code does not remove the .wp-block-gallery-* inline styles. It dequeues styles with the "wp-block-library" handle, but the inlines remain. So frustrating. Jul 19 at 11:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.