How to stop Gutenberg from outputting inline CSS for specific blocks?

admin管理员组

文章数量:1122846

I like to know how I can remove these individually.

<style id='wp-block-separator-inline-css'>
@charset "UTF-8";.wp-block-separator{border-bottom:1px soli ...
</style>

WP has a feature to add inline JS and (and also CSS I think) to registered scripts/styles. So dequeue should work, but it does not.

add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\action_wp_enqueue_scripts', 99 );

function action_wp_enqueue_scripts() {

    wp_dequeue_style( 'wp-block-navigation' ); // Comes from a file and works 
    wp_dequeue_style( 'wp-block-post-comments-form' ); // Comes from a file and works 
    wp_dequeue_style( 'wp-block-seperator' ); // Does not work
}

A hint to where exactly I find in the source on how these are handled would also help.

And BTW, I do not understand why these are handled in this stupid HTML polluting way in the first place. This does not seem to be dynamic for the most part, but FSE Themes are spammed with inline CSS for almost all blocks, only a few are loaded from CSS files. This causes the browser to never cache the CSS for blocks, very inefficient.

Asked the question and made this comment already on Github.

I like to know how I can remove these individually.

<style id='wp-block-separator-inline-css'>
@charset "UTF-8";.wp-block-separator{border-bottom:1px soli ...
</style>

WP has a feature to add inline JS and (and also CSS I think) to registered scripts/styles. So dequeue should work, but it does not.

add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\action_wp_enqueue_scripts', 99 );

function action_wp_enqueue_scripts() {

    wp_dequeue_style( 'wp-block-navigation' ); // Comes from a file and works 
    wp_dequeue_style( 'wp-block-post-comments-form' ); // Comes from a file and works 
    wp_dequeue_style( 'wp-block-seperator' ); // Does not work
}

A hint to where exactly I find in the source on how these are handled would also help.

And BTW, I do not understand why these are handled in this stupid HTML polluting way in the first place. This does not seem to be dynamic for the most part, but FSE Themes are spammed with inline CSS for almost all blocks, only a few are loaded from CSS files. This causes the browser to never cache the CSS for blocks, very inefficient.

Asked the question and made this comment already on Github.

• css
• block-editor

Share Improve this question edited May 17, 2022 at 13:10 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked May 16, 2022 at 9:26 NextGenThemesNextGenThemes 73577 silver badges2828 bronze badges 6

• 1 because those are one off properties of a single block, not something a general CSS file and class covers. It's much more efficient to use theme.json to set these parameters – Tom J Nowell ♦ Commented May 16, 2022 at 9:36
• @TomJNowel You are wrong, these are not "one off properties". They are printed one time and not again for each block, they have an ID. Gutenberg in fact also generates some dynamic one off CSS for group blocks and separator spacing settings based on specific containers that also looks messy but at least has a purpose. I do not see the purpose of this. – NextGenThemes Commented May 16, 2022 at 9:49
• Especially with HTTP/2 where HTTP requests mean NOTHING. GB should load these from a 1000 tiny CSS files if it has to, there is no point to inlining all of this, at least I do not see it. And you did not explain why. – NextGenThemes Commented May 16, 2022 at 9:51
• 1 @NextGenThemes "So dequeue should work, but it does not." - it actually does work, but you misspelled "separator" as "seperator" - note the "sepe". So try again, with the correct spelling... wp_dequeue_style( 'wp-block-separator' ); ? – Sally CJ Commented May 18, 2022 at 7:55
• 1 Thanks, @SallyCJ, it was that simple after all. Just a typo ;) – NextGenThemes Commented Aug 19, 2022 at 6:22

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 1

To get it off the unanswered list, adding the comment by @Sally CJ as answer:

---

There was a typo, it's separator not seperator. This works:

add_action( 'wp_enqueue_scripts', 'mytheme_wp_enqueue_scripts', 99 );

function mytheme_wp_enqueue_scripts() {
    wp_dequeue_style( 'wp-block-separator' );
}

本文标签： How to stop Gutenberg from outputting inline CSS for specific blocks