A bug that add several repeating css in content bottom

  • hozefasmile

    (@hozefasmile)


    2 years, 7 months ago

    I am using TT1 blocks theme and gutenberg latest version in wordpress 5.8. I noticed that the pages are generating lots of style tag at bottom after content with repeating CSS, for example
    <style>.wp-container-6137aab4c21f8 > * {max-width: 610px;margin-left: auto !important;margin-right: auto !important;}.wp-container-6137aab4c21f8 > .alignwide { max-width: 1240px;}.wp-container-6137aab4c21f8 .alignfull { max-width: none; }.wp-container-6137aab4c21f8 .alignleft { float: left; margin-right: 2em; }.wp-container-6137aab4c21f8 .alignright { float: right; margin-left: 2em; }.wp-container-6137aab4c21f8 > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }</style>

    see the demo site http://uniquesweb.co.in/ntheme/ , what would be the reason ? is it a bug in block based theme ( full site editing theme ), or its a bug of gutenberg latest version ? So anybody have idea about this ?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support David Smith

    (@get_dave)

    2 years, 7 months ago

    Hi @hozefasmile.

    I don’t believe this is a “bug” but rather it’s intentional behaviour of Global Styles generating per-block layout styles.

    These are generated in this area of the code:

    https://github.com/WordPress/gutenberg/blob/trunk/lib/block-supports/layout.php

    You can find out more about the layout config at:

    On layout and content width in WordPress 5.8

    Is this feature causing problems for you or were you just curious? Please do let us know.

    I’ll ask folks working on the feature to see if they can chime in here as well.

    Thanks again.

    Thread Starter hozefasmile

    (@hozefasmile)

    2 years, 7 months ago

    It is a concern about page speed. In source code if you deeply see the style tags generated, you will find that every group block is adding the same css again and again, for example
    max-width: 610px;margin-left: auto !important;margin-right: auto !important;
    This is coming with same value for each group block, so suppose we are using group block frequently from creating the layout of the site every section, so it will come lots of time, may be 50 or more time, and so this same css will be applied 50 or more time, which is useless. If we apply a custom style to a group block, then it should come in a separate style tag at bottom, that is ok, but we are apply the default group block css again and again for each group block entity.

    This repetition of css code, will increase html page size, and may reduce the page speed score as we use lots of blocks on the page.

    So the fundamental question is, why default css of group block is being applied individually for each group block instance ? it can be applied separately in a single style tag, as comes for all other blocks, we can apply those default styles in the head tag under “global-styles-inline-css” style tag

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘A bug that add several repeating css in content bottom’ is closed to new replies.

Tags