showing lots of style tags in footer in block theme

Hi @hozefasmile! These style blocks are automatically generated by Gutenberg as part of rendering Group blocks. Their presence is normal and does not indicate any issues with the theme.

Is there a specific issue you’re seeing with the Group block formatting that you would like to adjust?

There is no issue in the theme, but I am concerned about website speed score at https://developers.google.com/speed/pagespeed/insights/ , its the same css coming repeat and repeat again. Why we need to have repeat the block css when once it already loaded? Please check the link I provided, you get the idea what I am saying about.

• This reply was modified 3 years, 2 months ago by Hozefa Saleh.

Thanks for the additional context! I’m seeing a speed score of 90 from the link you provided. Which aspect of the speed analysis are you do you find troubling?

One other note, each of the script tags on your site describes a different element. As an example, here’s the code from your page (formatted for clarity):

Content body

         <header class="wp-container-6140c186ae0b4 alignfull site-header is-style-armando-no-bottom-margin wp-block-template-part"></header>
         <main class="wp-container-6140c186afa18 wp-block-group site-main alignfull">
            <h2 class="has-text-align-center" style="line-height:3">Oops! That page can’t be found.</h2>
            <p class="has-text-align-center">It looks like nothing was found at this location. Maybe try one of the links below, or a search?
            </p>
            <div style="height:30px" aria-hidden="true" class="wp-block-spacer">
            <ul class="wp-block-latest-posts__list is-grid columns-3 has-dates has-author aligncenter wp-block-latest-posts">
               <li>
                  <a href="https://uniquesweb.co.in/demo/practice/2021/09/07/hello-world/">Hello world!</a>
                  <div class="wp-block-latest-posts__post-author">by wp-administrator<>
                  <time datetime="2021-09-07T12:36:36+00:00" class="wp-block-latest-posts__post-date">September 7, 2021</time>
               </li>
            </ul>
            <div style="height:30px" aria-hidden="true" class="wp-block-spacer"><>
         </main>
         <div class="wp-container-6140c186afc9a wp-block-group is-style-armando-box-shadow has-silver-background-color has-background">
            <form role="search" method="get" action="https://uniquesweb.co.in/demo/practice/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search">
               <div class="wp-block-search__inside-wrapper " ><input type="search" id="wp-block-search__input-1" class="wp-block-search__input " name="s" value="" placeholder=""  required /><button type="submit" class="wp-block-search__button  " >Search</button><>
            </form>
         <>
         <footer class="wp-container-6140c186b01de alignfull site-footer wp-block-template-part"></footer>
      <>

Styling

<style>.wp-container-6140c186ae0b4 .alignleft { float: left; margin-right: 2em; }.wp-container-6140c186ae0b4 .alignright { float: right; margin-left: 2em; }.wp-container-6140c186ae0b4 > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }</style>
<style>.wp-container-6140c186afa18 > * {max-width: 1200px;margin-left: auto !important;margin-right: auto !important;}.wp-container-6140c186afa18 > .alignwide { max-width: 1400px;}.wp-container-6140c186afa18 .alignfull { max-width: none; }.wp-container-6140c186afa18 .alignleft { float: left; margin-right: 2em; }.wp-container-6140c186afa18 .alignright { float: right; margin-left: 2em; }.wp-container-6140c186afa18 > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }</style>
<style>.wp-container-6140c186afc9a > * {max-width: 1200px;margin-left: auto !important;margin-right: auto !important;}.wp-container-6140c186afc9a > .alignwide { max-width: 1400px;}.wp-container-6140c186afc9a .alignfull { max-width: none; }.wp-container-6140c186afc9a .alignleft { float: left; margin-right: 2em; }.wp-container-6140c186afc9a .alignright { float: right; margin-left: 2em; }.wp-container-6140c186afc9a > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }</style>
<style>.wp-container-6140c186b01de .alignleft { float: left; margin-right: 2em; }.wp-container-6140c186b01de .alignright { float: right; margin-left: 2em; }.wp-container-6140c186b01de > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }</style>

Note that in the above HTML, each style tag references a unique Group block with the following IDs attached:

6140c186ae0b4
6140c186afa18
6140c186afc9a
6140c186b01de

The styling for each group block is independent, which is why there are 4 different style tags.

• This reply was modified 3 years, 2 months ago by Madison Swain-Bowden.
• This reply was modified 3 years, 2 months ago by Madison Swain-Bowden.

There is one more thing that we need to consider here is that all these css are added in footer in block theme, Why we need to load them in footer ? CSS generally added in either header or if needed higher priority, then we can add it just before the rendering of block html, keeping it very low below in footer is removing all possibilities of overriding it. And many are also important marked, for example

‘.wp-container-61c8182ed4679 > * {max-width: 650px;margin-left: auto !important;margin-right: auto !important;}’

this make div to set margin left, right value to a different value almost impossible or only by adding it at very bottom including a php file.

I agree. This is very critical bug. Loading structure styles in footer, makes site a huge shifting when it’s loaded. And we can see this on all block themes. This makes very high CLS and mobile-friendly issues

i fight it too, i make use of sessioStorage etc to storage as much as i can locally, and now this pollution ocming in. Gutenberge needs to set all by classes, this id based approcah generating lots of stuff makes me want to remove it. Hey u Gutenberg devs, if u ask why many ppl still tend to use old classic editor etc, its mostly this, avoiding generated pollution in theme…

im thinking about rmeoving the wp_footer, but would really love to hear there is a normal, global, solution.. not crazy workarounds that can mess up things…

any other solution, maybe. woul dbe registering a route to some /gutenberg.generated.css with implemented caching, so client does not load it every click..

talkin bout Gutenberg, providing own bootstrap like responsive blocks would be great success, together with visual aid for blocks (showing small grey font list of classes applied to block) – or – hear me out – allow blocks within shortcode

like [col cnt=3] your block here [*col] – maybe add it to toolbar as icon [/] called “apply shortcode to this block”

Further more, this behaviour of Gutenberg throw errors in the W3C validator (https://validator.w3.org/):
Error: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

This is the weird issue I am also getting a style tag at the bottom of the page and it is also breaking the layout on one of my pages. please help to get rid of this style tag which is generated in the footer automatically

I use BeaverBuilder (no Gutenberg) and I get Containers with styles, too.

It was throwing these errors in HTML Validator plugin:
Error: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

These are the lines of code that were being generated after closing footer tag but before closing body tag:

<style>.wp-container-1 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-1 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-1 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style>
<style>.wp-container-2 > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.wp-container-2 > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.wp-container-2 > .aligncenter { margin-left: auto !important; margin-right: auto !important; }</style>

I tried this but it did not work:
remove_filter( ‘render_block’, ‘wp_render_layout_support_flag’, 10, 2 );
remove_filter( ‘render_block’, ‘gutenberg_render_layout_support_flag’, 10, 2 );

I contacted BeaverBuilder support and they told me to try disabling the Footer Widgets in Footer Widgets Display. It worked. The error is gone, but so is my use of the Footer widgets (thankfully I did not use them on that website, but I have others that do).

WordPress needs to handle whatever this css injection is fairly quickly.

Agree with you all.

Another thing worth mentioning is that, in our case, a lot of <style> tags are showing even if no blocks are being used on that page. So we are generating a lot of useless HTML at the end of the page.

I’m sure this has no easy fix, but it’s something worth fixing soon.