How to disable inline styling (style id=’global-styles-inline-css’)?

Resolved

(@oldrup)

Hey

Has anyone found a way to dequeue/disable the inline styling that appears to occur on every page in 5.9? It’s quite a hefty block, and I do not use core colours, gradients font sizes in any of my projects.

Code below.

<style id='global-styles-inline-css'>
body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
</style>

Viewing 15 replies - 1 through 15 (of 22 total)

1 2 →

Moderator t-p
(@t-p)

2 years, 2 months ago

dequeue/disable the inline styling that appears to occur on every page in 5.9?

Please note 5.9 is released yet.

It’s still in RC version

If you need learn more about 5.9, please try reviewing this 5.9 field guide: https://make.wordpress.org/core/2022/01/10/wordpress-5-9-field-guide/
Thread Starter Bjarne Oldrup
(@oldrup)

2 years, 2 months ago
I’m aware is in RC, that’s why I’m testing 🙂

The embedded stylesheet seems fixed and appears to be included on all pages and posts, regardless of using a FSE theme or not. Please correct me if I’m mistaken.

(More details on https://github.com/WordPress/gutenberg/blob/fdf44339124fab9043a489820aa98e4bfee810be/docs/explanations/glossary.md)

Affecting all WordPress users, I was just wondering if anyone had found a way to eliminate that extra overhead.
- This reply was modified 2 years, 2 months ago by Bjarne Oldrup.
Moderator t-p
(@t-p)

2 years, 2 months ago

I’m aware is in RC, that’s why I’m testing

Okay, my opology. You are on the right forum.

linux4me2
(@linux4me2)

2 years, 2 months ago

I haven’t tested this yet, but you might try creating a child theme of the block theme you’re testing and adding a theme.json that sets different values for those you don’t want to use; i.e, eliminate the ones you aren’t using.

I can’t find it now, but I think I read somewhere that the child theme’s theme.json will override the parent theme’s, and might allow you to eliminate unused styles?

Moderator Marius L. J.
(@clorith)

2 years, 2 months ago

Hiya,

Totally understand where you are coming form, but the inline styles are presented by the blocks, and not the theme (although the theme will add a chunk to define the global variables for reference where applicable).

If you have suggestions for better approaches, I would recommend opening a ticket with the Gutenberg repository, where development of the block editor happens, outlining the pain points, and maybe even suggested improvements.

As this isn’t a bug with the 5.9 release, I’m marking the topic as resolved for now, but I do hope you’ll take me up on my suggestion and create a ticket!
Brawl
(@brawl345)

2 years, 2 months ago
Copy this into your functions.php or a mu-plugin:
```
/*  DISABLE GUTENBERG STYLE IN HEADER| WordPress 5.9 */
function wps_deregister_styles() {
    wp_dequeue_style( 'global-styles' );
}
add_action( 'wp_enqueue_scripts', 'wps_deregister_styles', 100 );
```
Or rather add this to the long list of delobating you have to do because WordPress insists on shoving this buggy ueseless editor in everyone’s face.
agent617
(@agent617)

2 years, 2 months ago
Thanks @brawl345 this is an elegant solution.

Alternatively, we can remove the Gutenberg theme library on the front-end (if not necessary) along with the inline injection, and save an additional 77.3KB in the DOM. As well as address WooComm variant with the following:
```
//REMOVE GUTENBERG BLOCK LIBRARY CSS FROM LOADING ON FRONTEND
function remove_wp_block_library_css(){
wp_dequeue_style( 'wp-block-library' );
wp_dequeue_style( 'wp-block-library-theme' );
wp_dequeue_style( 'wc-block-style' ); // REMOVE WOOCOMMERCE BLOCK CSS
wp_dequeue_style( 'global-styles' ); // REMOVE THEME.JSON
}
add_action( 'wp_enqueue_scripts', 'remove_wp_block_library_css', 100 );
```
Thanks to brkcd git comment
Thread Starter Bjarne Oldrup
(@oldrup)

2 years, 2 months ago

Thank you both @brawl345 and @agent617. That is very much appreciated. I try to keep a tight ship, and it’s nice to be able to reduce the bloat (and !important styles).

The snippet works, and, yes, will be added to my already existing html output clean-up snippet 😉

The topic has been discussed on github as well:
https://github.com/WordPress/gutenberg/issues/24684

Thank you all so much for pitching in.
Bjarne
travaudoma
(@travaudoma)

2 years, 2 months ago
```
add_action( 'wp_enqueue_scripts', 'remove_global_styles' );
function remove_global_styles(){
wp_dequeue_style( 'global-styles' );
}
```
caseygovero
(@caseygovero)

2 years, 2 months ago

To me this is just a bad practice to include inline styles. Due to security, organizations have moved to Content Security Policies. This popped up on my site as these global styles are being blocked and throwing errors on my sites.

I wonder why these weren’t placed in a generated stylesheet.

Phil
(@probablynotphil)

2 years, 2 months ago

Thanks for sharing the solution to this. The long list of things to disable/dequeue after each update keeps on growing…

squire2k
(@squire2k)

2 years, 2 months ago

Thanks for the solution! It’s a shame this is the direction that WordPress is going. I wish WordPress would release 2 versions 1) For Developers, a clean core to develop websites on and 2) For users who require a Wix style build your own website.

Not only are we having to continually strip stuff out that is not needed, this is bad practice from both security AND keeping file sizes down.

Also, since when did class names in CSS include the actual colour name?

–wp–preset–gradient–luminous-vivid-amber-to-luminous-vivid-orange

CSS class names should be completely independent of the actual colour – e.g .highlight

Yuk!
idad5
(@idad5)

2 years, 1 month ago
I totally agree with all of you!

Additionally it is rather annoying to have all those styles affecting the global context and lengthening the (css-)debug output for every element everywhere. It would annoy me even if I were using the Gutenberg-Editor…

Gutenberg should have been a plugin from the start instead of cluttering the core.
- This reply was modified 2 years, 1 month ago by idad5.
Thread Starter Bjarne Oldrup
(@oldrup)

2 years, 1 month ago
Update. Changes were made to the SVG’s added at the end of the body since WP 5.9.1.

This snippet solved that for me – tested with 5 different themes.
```
// Remove Global Styles and SVG Filters from WP 5.9.1 - 2022-02-27
function remove_global_styles_and_svg_filters() {
	remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
	remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
}
add_action('init', 'remove_global_styles_and_svg_filters');

// This snippet removes the Global Styles and SVG Filters that are mostly if not only used in Full Site Editing in WordPress 5.9.1+
// Detailed discussion at: https://github.com/WordPress/gutenberg/issues/36834
// WP default filters: https://github.com/WordPress/WordPress/blob/7d139785ea0cc4b1e9aef21a5632351d0d2ae053/wp-includes/default-filters.php
```
The inline comments are obviously not needed, but I’d like to have a link to the source and more detailed info.
- This reply was modified 2 years, 1 month ago by Bjarne Oldrup.
- This reply was modified 2 years, 1 month ago by Bjarne Oldrup.
bkjproductions
(@bkjproductions)

2 years, 1 month ago

@oldrup Thank you for this! Good points about color names, @squire2k!

In WP 5.9.2 I notice that these SVG filters are immediately after the opening BODY tag, would there be some reason they have to be there?