Wordpress Gutenberg FSE Annoying Inline CSS

Question

I'm trying to remove some CSS, which is added on the front-end by Wordpress. On last update Wordpress is adding class like this:

<main id="app" class="wp-container-620d4049355bb wp-block-group">

<div class="wp-container-620d404934f13 entry-content wp-block-post-content">

wp-container-620d4049355bb / wp-container-620d404934f13 for main blocks.

The problem is it's also adding some CSS:

.wp-site-blocks > * + * {
  margin-top: var( --wp--style--block-gap );
}

.wp-site-blocks > * {
  margin-top: 0;
  margin-bottom: 0;
}

.wp-container-620d4049355bb > * {
  margin-top: 0;
  margin-bottom: 0;
}

.wp-container-620d404934f13 > * + * {
  margin-top: var( --wp--style--block-gap );
  margin-bottom: 0;
}

This CSS have a conflict with my blocks, where I'm adding single classes for setting margin.

Does anyone could help me how can I remove that css? Or remove that class? Funny fact is that wp-container-620d42ff1d800 is different every page refresh.

Thank you!

Answer 1

The blockGap feature, var( --wp--style--block-gap ); is not enabled by default. If you enabled blockGap or appearanceTools in theme.json, you can disable it again by setting it to null:

theme.json:

{
    "version": 2,
    "settings": {
        "spacing": {
            "blockGap": null
        }
    }
}

See the theme.json reference: https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#spacing

If you want to remove the wp-container-random and the generated alignments, margins, and flex styles, you can disable the Layout feature. Add this to your themes functions.php or similar:

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

And if you have Gutenberg active:

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

Source for the wp_render_layout_support_flag: https://github.com/WordPress/WordPress/blob/master/wp-includes/block-supports/layout.php#L142