How to remove extra global-styles-inline-css? #36834
Comments
|
Hi, thanks for reporting. Unfortunately, this has been decided to be included within Core Gutenberg regardless if you don't use the gradients, because there's the assumption that other themes and plugins may rely on though css variables. More information is at #24684 and you can share your reaction in there as well. |
|
Why it became or was "decided" to be a forced inline is (as skorasaurus says) "unfortunate". The decision to control and optimize assets should be a decision made by the developer IMO. There are plenty of developers who prefer to use alternate solutions to Gutenberg (and I'm not talking about gross page builders) #Lazyblocks Also, minifying the injection doesn't make the pill any easier to swallow. Even if the payload is only 8.51kb (which it is) it's pretty crappy to just splash someone's source code with: --wp--preset--color--black: #000000; |
|
(edit by @audrasjb : spammer) |
|
Brilliant!! Thank you @brkcd for this contribution! |
|
Thank you! |
|
wp_dequeue_style( 'global-styles' ); does the job. Thanks. @brkcd |
|
For some reasons, |
This solved it for me too. |
Unfortunately, this is not working in new WordPress 5.9.1. |
This is working for me: |
|
Since v5.9.1 |
|
That looks promising. Thank you SO much for sharing, @douglas-johnson and @vijayhardaha I struggle to get it to work, though. Pasting the code into Code Snippets (where I've got other minor snippets working fine btw), like this:
No effect. What am I missing? |
|
Hi @oldrup , the code is incorrect. It should look like this: |
|
That did the trick @wpgaurav! Thank you so much for helping me out with my amateurish function.php edits 🙏 I'll do more thorough tests with different themes and the Gutenberg editor (which I still use with non-FSE themes) to see if this approach have any negative consequences. But it sure looks good. Thanks again. |
|
@wpgaurav Thank you for the fix for global styles. I am working with a theme that behaves fine in 5.8.3 but is struggling on > 5.9. The removal of the global styles has resolved some of my issues but still having issues with Duotone filters on frontend. My theme was designed to use pjax and from quick look at the source it appears duotone inline styles are now in the footer rather than inline with the image that has the filter applied to it? Would anyone be able to advise on how to use the svg styles as they were in 5.8.3? Having them in the footer pretty much renders my page layouts pointless as pjax only updates the body content NOT the footer. Seems a little counterintuitive to place them in the footer. |
For version 5.9.1remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );For version 5.9.0 or lessremove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );If for some reason code doesn't work then use code like thisfunction custom_wp_remove_global_css() {
remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
}
add_action( 'init', 'custom_wp_remove_global_css' );OR function custom_wp_remove_global_css() {
remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
}
add_action( 'init', 'custom_wp_remove_global_css' ); |
|
remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' ); Works fine for me, thanks |
|
@DoubleMarv Yeah, it's changing with almost every release (that drives me nuts). Here's the complete list for now: #36834 (comment) |
Thanks, Works fine for me |
|
@vijayhardaha @alirezarezamand Thanks for these. While these successfully remove the 'container-' inline styles on the front-end, they are still getting loaded on the back-end in the editor, overriding styles in my editor styles. Is there any way to also remove them on the back-end as well? Separately, echoing sentiments expressed by @agent-617, @vyskoczilova, and others - As a developer who simply wants to control the CSS on multiple websites, it has become an exhausting game of whack-a-mole overriding these additions to Gutenberg. While SVG filters and common CSS variables are neat features, and inline styles/scripts have some performance benefits (though they take a huge priority in the cascade, making them nearly impossible to override), these should not be part of core, but rather plugins, and in either situation, be opt-in, not opt-out via opaque, non-obvious filters. |
For backendremove_action( 'enqueue_block_editor_assets', 'wp_enqueue_global_styles_css_custom_properties' );
remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' ); |
|
Thanks! Appreciate it.
…On Fri, Mar 25, 2022 at 12:32 PM Vijay Hardaha ***@***.***> wrote:
For backend
remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_global_styles_css_custom_properties' );remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' );
—
Reply to this email directly, view it on GitHub
<#36834 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAE25UA2UVSNEZKE32XV3PLVBXTAJANCNFSM5IWX3IQA>
.
You are receiving this because you commented.Message ID:
***@***.***>
--
badfeather.com
|
|
@vijayhardaha Just tried these out. The |
I don't think you can remove those, I guess those get generated from Block Editor JS on load or change, not from PHP. |
|
@vijayhardaha Got it. Ok, thanks for the follow-up. |
|
As per this source, you need to dequeue as per: |
|
The above suggestion work for the css in the head and svg filters, but there are also inline styles at the end of the body lol |
|
Found it! (I think)
This also changes the HTML classes of the rendered blocks. |
|
Can somebody help me how I specifically remove inline CSS for one block only? <style id="wp-block-navigation-link-inline-css">
.wp-block-navigation .wp-block-navigation-item__label{overflow-wrap:break-word;word-break:normal}.wp-block-navigation .wp-block-navigation-item__description{display:none}
</style>Why TF is it even done this way that the HTML gets polluted with these many snippets of CSS where most of it seems NOT dynamic at all. The CSS should be loaded from files and CSS variables should be printed out inline for the dynamic parts. This is so stupid and inefficient. The browser will never cache the CSS individually, and it just blows up the HTML size for every single page. |
I can confirm that on 6.0 RC1; these two functions remove the preset colors and gradients global-styles-inline-css |
Hm. I'm getting the preset colors and gradients back if testing Gutenberg 13.2 plugin on a WP 5.9.3 website
Oh. And the hardcoded duo-tone filters are also back as non-cachable embeded styles 🙄 New filter names maybe?
|
|
On Gutenberg 13.2 and WP6.0 RC2 (and on WP 5.9.3); The css within the global-styles-inline-css will not appear when using a classic theme without theme.json ; when wrapping the remove_action function into a callback function like below: (For clarity; In both instances, (5.9.3. and WP 6RC2), the hardcoded duotone svg shown in your second image do not display for me; what theme are you using? |
I'm still on WP 5.9.3, and was just testing the Gutenberg 13.2 plugin to maybe take advantage of the new features. I'm using the Blocksy Theme (classic non FSE, no theme.json afaik) I got rid of the inline global styles and duotone SVG's, using exactly the callback action mentioned - Until I installed GB 13.2. With GB 13.2 enabled, the global styling and SVG's are returns. Just verified using the Generate Press theme. Locating the styling and the SVG "requires" you to turn Line Wrap on in the view source windows, as they are output on a single line and easily goes unnoticed with line wrap off. Got any ideas on how to troubleshoot further? Edit: Uploading the view source outputs did not work as expected, but I can provide a link if useful. |
|
@nextgenthemes this issue is about global styles putting an inline CSS block on non-FSE themes. Your question is not the same, you should create a new issue. Also this issue is already marked as closed, so it's likely to be ignored in favor of open issues. Also:
This is very easy to say, but devoid of all debugging data, and very aggressive. There's no information about which version of Gutenberg or WordPress you're using, wether you use global styles, what the changes you made to the separator block were that triggered this, etc. Nevermind ignoring that a lot of peoples sites have lengthy bootstrap times that would eliminate those efficiency gains for a dynamic css file, it is never that simple. And to top it all off you swore at the people you wanted help from and called them stupid. I know it's frustrating, but it pays to be kind. People won't want to help you if it looks like you're starting an argument. My recommendations:
Anybody who requires further assistance should open a new ticket, or a new regression/bug ticket, with details of their setup. |
|
@tomjn I know this is a different issue, I was just hoping there are people around here on the same "Fight the GB styles" quest in here where I can get a quick answer to this, apparently not. Also, it seems you do not really fully get what I mean. I made no changes to the separator block, and I do not even know if this is an "issue" or just a (bad) decision the devs made. I currently run master with the #40385 patch merged in and GB build with GitHub's issues are not for support question, that is why I went to stack exchange. So far, I thought this is more of a support question. If you think I should add to 4.2k issues for something that I just do not know?
No clue what you mean. I am not talking about dynamic CSS, I am talking static default block style CSS. For example, this. Almost every single Block does this on my experimental theme. This seems like the CSS is extracted from files only to inject it. <style id="wp-block-post-title-inline-css">
/**
* Colors
*/
/**
* Breakpoints & Media Queries
*/
/**
* SCSS Variables.
*
* Please use variables from this sheet to ensure consistency across the UI.
* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
*/
/**
* Colors
*/
/**
* Fonts & basic variables.
*/
/**
* Grid System.
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
*/
/**
* Dimensions.
*/
/**
* Shadows.
*/
/**
* Editor widths.
*/
/**
* Block & Editor UI.
*/
/**
* Block paddings.
*/
/**
* React Native specific.
* These variables do not appear to be used anywhere else.
*/
/**
* Converts a hex value into the rgb equivalent.
*
* @param {string} hex - the hexadecimal value to convert
* @return {string} comma separated rgb values
*/
/**
* Breakpoint mixins
*/
/**
* Long content fade mixin
*
* Creates a fading overlay to signify that the content is longer
* than the space allows.
*/
/**
* Focus styles.
*/
/**
* Applies editor left position to the selector passed as argument
*/
/**
* Styles that are reused verbatim in a few places
*/
/**
* Allows users to opt-out of animations via OS-level preferences.
*/
/**
* Reset default styles for JavaScript UI based pages.
* This is a WP-admin agnostic reset
*/
/**
* Reset the WP Admin page styles for Gutenberg-like pages.
*/
.wp-block-post-title {
word-break: break-word;
}
.wp-block-post-title a {
display: inline-block;
}
</style> |
|
@nextgenthemes as I said, this is not the place for it, so I didn't bother to read past the first paragraph, and will continue to ignore it. You need to create a new issue, this issue had a different subject and was closed. |
|
I am using WP 6.1 and |
|
On Wordpress 6.3 this doesn't work. The solutions described above won't remove the spammy variables. |
Interesting. I'm in 6.3.2 and still works like a dream. I'm also not seeing the SVG spam issue that others have reported. It might be worth checking if a plugin or something else in your code is re-adding those actions. For context my use-case is hybrid theme. I'm using ACF Blocks and traditional stylesheets for global styles so don't want all this FSE junk in there. |
|
I didn't like the idea of removing everything in the global-inline-styles, however this is how I ended up removing all the extra colors, gradients, and duotone settings: This reduces a substantial chunk of opinionated inline styles while keeping other layout-based styles intact. Before After Note: Some of the styles/colors are coming from my theme's |
|
Thank you @bd-viget ! This definitely helped me get rid of some of the inline code while keeping the default Gutenberg styling (so the site still looks like it has a structure). :-) |
Hi team,
I am using Gutenberg with a non-FSE theme and there is some extra CSS on my site which I don't need.
<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%);</style>The CSS is long and I have pasted only a part of it.
How can I remove these inbuilt presets?
The text was updated successfully, but these errors were encountered: