Wordpress Gutenberg FSE 恼人的内联 CSS

Question

我正在尝试删除一些 CSS，它是由 Wordpress 在前端添加的。在上次更新时，Wordpress 正在添加这样的类:

<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 用于主要 block 。

问题是它还添加了一些 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;
}

这个 CSS 与我的 block 有冲突，我在其中添加单个类来设置边距。

有人可以帮助我如何删除该 css 吗？或者删除那个类？有趣的事实是 wp-container-620d42ff1d800 每次页面刷新都不同。

谢谢!

Answer 1

blockGap 功能 var( --wp--style--block-gap ); 默认不启用。如果您在 theme.json 中启用了 blockGap 或 appearanceTools，您可以通过将其设置为 null 来再次禁用它:

主题.json:

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

查看 theme.json 引用: https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#spacing

如果要删除 wp-container-random 和生成的对齐、边距和 flex 样式，可以禁用布局功能。将此添加到您的主题 functions.php 或类似内容中:

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

如果你激活了古腾堡:

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

wp_render_layout_support_flag 的来源:https://github.com/WordPress/WordPress/blob/master/wp-includes/block-supports/layout.php#L142