The standard Lorem Ipsum passage, used since the 1500s

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Section 1.10.32 of “de Finibus Bonorum et Malorum”, written by Cicero in 45 BC

“Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?”

EN NL

Remove global styles added by Gutenberg plugin

I try to keep my website code as (c)lean as possible. After installing the separate Gutenberg Plugin (not to be confused with the default Gutenberg functionality in WordPress). I stumbled upon additional global styles in the code inspector.

Wordpress Gutenberg Global Styles Inline
WordPress Gutenberg Global Styles Inline

I found out that the styles are added inline in the header by the Gutenberg Plugin. I don’t understand why the plugin adds this bunch of useless css. I cannot find any setting to change these and I hope they will remove this functionality in the next release (currently 9.1.1).

Wordpress Gutenberg Global Styles Inline Css
WordPress Gutenberg Global Styles Inline Css

How to remove the added inline styles

The styles have an id=’global-styles-inline-css’ and can be removed with the following function.

/**
Force removal of styles we don't want or need
*/
function custom_print_styles_array($styles){
// Define style(s) to remove
$styles_to_remove = array(
'global-styles', // Added by Gutenberg plugin
);
// Loop through defintion and remove styles
if(is_array($styles) && count($styles) > 0){
foreach($styles as $key => $code){
if(in_array($code, $styles_to_remove)){
unset($styles[$key]);
}
}
}
return $styles;
}
add_filter('print_styles_array', 'custom_print_styles_array');

Tip

If you are not sure what the name or ID of your added stylesheet is you can var_dump($styles) to get an overview of the printed styles for the current page.

Keep me informed if you see any change in the next release of the Gutenberg plugin?

Leave a Reply