How to Disable Gutenberg Duotone Filter

WordPress’s latest update for version 5.9 has hard coded HTML which places Scalable Vector Graphics (SVG) filters after the HTML body tag. This SVG code seems to be related to compatibility for Safari browsers for Duotone filter.

As you may know that latest version of WordPress content management system uses Block Editor which allows website owners to easily create blocks of HTML through WordPress Dashboard. WordPress Gutenberg block editor although powerful is NOT used on most WordPress sites.

That means, it’s just HTML code that is not needed for your website to work if your website is not using block editor. Furthermore: most WordPress installations using premium themes do not need support for Duotone filters, so disabling Duotone block support flag is now part of SEO for WordPress.

Video Lesson Showing How to Disable WordPress Duotone Support for Safari

How to Disable Gutenberg Duotone Filter

You must have access to web hosting and conduct a full site backup first. Then, to disable Gutenberg Duotone Filter you’ll need to edit functions.php file to remove svg WordPress action. The file location for fuctions.php is usually located at:

Web Hosting Account > public_html > wp-content > themes > your Current Theme > functions.php

Simply download the file first as a backup, then, add:

function rankya_remove_global_styles() { remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' ); remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' ); } add_action('after_setup_theme', 'rankya_remove_global_styles', 10, 0);

Other Options to Get Rid of SVG Code After Body Tag in WordPress

Since most wordpress sites are installed differently using different Themes, if for some reason the above WordPress code block did not disable the Gutenberg Duotone Filter, then, you may try different troubleshooting techniques as outlined.

You can create a JSON file and name it theme.json and then add (you can use Microsoft Notepad while ensuring the file name ends with .json) { "version": 1, "settings": { "color": { "duotone": [], "customDuotone": false } } } Where does the above file go? Simply upload it inside your WordPress Theme Folder.

Below are different WordPress Actions and Filters which may be of use for your specific setups. function rankya_remove_wp_render_duotone_support_and_global_styles() { // remove SVG and global styles remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles'); // remove wp_footer actions for global inline styles remove_action('wp_footer', 'wp_enqueue_global_styles', 1); // remove render_block filters remove_filter('render_block', 'wp_render_duotone_support'); remove_filter('render_block', 'wp_restore_group_inner_container'); remove_filter('render_block', 'wp_render_layout_support_flag'); } add_action('after_setup_theme', 'rankya_remove_wp_render_duotone_support_and_global_styles', 10, 0);

Websites Using WordPress Built Theme (e.g. Twenty Twenty-One)

If you are using freely available popular WordPress theme such as Twenty Twenty-One, then, you may also dequeue global-styles using this code below add_action('wp_print_styles', 'rankya_remove_styles', 100000); add_action('wp_print_footer_scripts', 'rankya_remove_styles', 100000); function rankya_remove_styles(){ wp_deregister_style('global-styles'); wp_dequeue_style('global-styles'); } //removes global inline styles

Not Using Gutenberg Block Editor?

Most websites (especially website’s built prior to Gutenberg can confidently disable the wp-block-library CSS including global-styles. add_action('wp_print_styles', 'rankya_remove_styles', 100000); add_action('wp_print_footer_scripts', 'rankya_remove_styles', 100000); function rankya_remove_styles(){ wp_deregister_style('wp-block-library'); wp_dequeue_style('wp-block-library'); wp_deregister_style('wp-block-library-theme'); wp_dequeue_style('wp-block-library-theme'); wp_deregister_style('global-styles'); wp_dequeue_style('global-styles'); } //removes wp-block-library styles

What WordPress Files Adds SVG HTML Code

Are you a WordPress developer? Wondering how WordPress generates this XML code? Most WordPress built-in themes use built in function called wp_body_open. <body <?php body_class(); ?>> <?php wp_body_open(); ?> This is a new way WordPress makes adding code to WordPress specific themes such as Twenty Twenty-One. For example: Skip Link focus feature which is very important in terms of accessibility may depend on other code to work, hence wp_body_open function to the rescue.

With the latest WordPress version 5.9 in 2022, WordPress team has gone ahead and hard coded in wp-includes/block-supports/duotone.php that registers duotone using WP_Block_Supports::get_instance()->register And here’s why?

Safari renders elements incorrectly on first paint when the SVG filter comes after the content that it is filtering, so they force a repaint with a WebKit hack which solves the issue.

The problem obviously is that other browsers also renders this code. This means, there is a large block of HTML code that is NOT needed on non-safari browsers. The team at WordPress could have made sure the HTML code only runs on Safari instead of Chrome or Edge. So let’s see if the team finds a more elegant solution instead of devouring core code and making us as WordPress site owners be left with unneeded code.

You can also do something like this if you DO NEED the duotone support for Safari $user_agent = $_SERVER['HTTP_USER_AGENT']; if (stripos( $user_agent, 'Safari') !== false) { //run code for Safari here. Basically leave empty } else { function rankya_remove_global_styles() { remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' ); remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' ); } add_action('after_setup_theme', 'rankya_remove_global_styles', 10, 0); }

NOTE: if you are using Twenty Twenty-Two Theme which is basically Gutenberg Built theme, then, you should NOT disable Block Editor, or else your site won’t work without wp-block editor.

You can download the sample functions for disabling Duotone SVG Filter for WordPress.