css - WordPress 6 - inline container styles breaking my site

admin管理员组

文章数量:1122846

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?

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?

• css

Share Improve this question edited Jul 14, 2022 at 11:00 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Jul 13, 2022 at 16:05 codewithfeelingcodewithfeeling 47644 silver badges66 bronze badges 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 ♦ Commented Jul 13, 2022 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. – codewithfeeling Commented Jul 13, 2022 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 ♦ Commented Jul 13, 2022 at 18:22
• 1 I've edited the question to show the gallery styles. – codewithfeeling Commented Jul 13, 2022 at 19:06
• @codewithfeeling edited my answer to add something that might help with the gallery block styles. – Lisa Commented Jul 14, 2022 at 23:18

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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' );

本文标签： cssWordPress 6inline container styles breaking my site