移除古腾堡编辑器添加的Duotone SVGs 和冗余的内联样式

WordPress 更新越来越让人摸不着头脑了，自 WordPress 5.9版本更新以来，我的网站前端和后端都有一些 Duotone 添加的SVG标签，这些标签是看不到的，会自动插入我们的网站。这些元素是一些无效的元素，根本看不见。

那么它们可以用来做什么呢？

Duotone 是双色选择器，如上图所示，当我们使用古腾堡编辑器创建内容，并且使用图像来来说明文字时，可以选择向图像添加颜色过滤器，这些SVG对应于编辑图像时可用的不同过滤器。

移除头部SVG

方法一

观察代码时发现头部的svg是通过wp_body_open钩子添加的，当移除wp_body_open时这些SVG就会被移除，因此我们可以在 WordPress 主题文件 functions.php 文件中添加如下代码来移除这些 SVG 标签。

/**
 * 移除 WordPress 古腾堡编辑器自动添加的 Duotone SVGs
 *
 * @author lerm
 * @link   https://lerm.net
 */
remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );

方法二

可以通过theme.json配置文件才能禁止那些 svg 图像的输出，首先在主题根目录下新建theme.json 文件，然后加入如下内容。

{
	"version": 1,
	"settings": {
		"color": {
			"duotone": null
                }
        }
}

移除底部 style 标签

在底部代码中包含<style>.wp-container-x ...</style> 可以添加如下代码移除sytle标签。

/**
 * 移除 WordPress 古腾堡编辑器在页脚添加的sytle标签
 *
 * @author lerm
 * @link   https://lerm.net
 */
remove_filter('render_block', 'wp_render_layout_support_flag');

以上代码仅移除页面底部的<style>.wp-container-x ...</style>标签，对于由于双色调试器添加的<style>标签和SVG标签是不起作用的，如果想要在前端彻底禁用图片的双色编辑器功能，可以在functions.php中添加如下代码；

/**
 * 移除 WordPress 古腾堡编辑器前端禁用duotone编辑器
 *
 * @author lerm
 * @link   https://lerm.net
 */
remove_filter('render_block', 'wp_render_duotone_support');

remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
remove_filter('render_block', 'wp_render_layout_support_flag');
remove_filter('render_block', 'wp_render_duotone_support');