[Resolved] Do WordPress Gutenber Blocks use dynamic css?

Home Forums Support [Resolved] Do WordPress Gutenber Blocks use dynamic css?

Home Forums Support Do WordPress Gutenber Blocks use dynamic css?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2286977
    Rostyslav

    Hello,

    I would like to know if when I use WordPress Gutenberg Block in page A. And in page B I dont use Gutenberg. Will wordpress load the css from page A on Page B or on other pages? In other words, will wordpress load the Gutenberg Css on a page that I am using it or that css will be loaded on all pages of a website?

    I am combining Generateblocks with some WordPress default Gutenberg blocks. As I know, generateblocks use dynamic CSS. But I dont know if that is a good practice combining them. I just want to load all my css dynamically on pages where it is just used.

    Thanks!

    #2286997
    Fernando
    Customer Support

    Hi Rostyslav,

    Some WP Block settings like text color are added inline, which means it’s not loaded in other pages.

    WordPress however loads a stylesheet for all pages for WP Blocks. It can be dequeued though if you want: https://smartwp.com/remove-gutenberg-css/

    Hope this clarifies!

    #2287014
    Rostyslav

    Hello,

    I know that Customizer Css is loaded in all pages. But if I use just Gutenberg block styles that are in the editor without additional Css, does it also load all that CSS in all pages?

    What is your recomedation as best practice to get the fastest website? Only using Generateblocks?

    #2287027
    Fernando
    Customer Support

    Yes, that’s what I meant; not Additional CSS.

    WordPress loads a stylesheet style.min.css which has CSS for its Blocks on all pages even if no WP Block is used in the editor.

    If you use a WP Block, there’s also CSS added in-line, so if you’re not using WP Blocks, those in-line CSS wont be added, but the stylesheet will still be there.

    Not using WP Blocks will reduce inline CSS so that may be a bit faster. If you dequeue the stylesheet, that may help as well. If you’re using an Optimization plugin, you can probably try removing unused CSS as an alternative, though this sometimes causes issues as well.

    #2287062
    Rostyslav

    Just last question. If for example I use WordPress image block and there are many integrated features like border radius that adds this CSS (not inline)

    .wp-block-image.is-style-circle-mask img, .wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img {
        border-radius: 9999px;
    }

    Will this css be loaded in all pages of my site or just in this particular page (not inline css)?

    #2287203
    David
    Staff
    Customer Support

    Hi there,

    WP will load its block-library CSS on every page including that.

    #2287228
    Rostyslav

    Thanks

    #2287257
    David
    Staff
    Customer Support
    #2287273
    Rostyslav

    Hi again! How can I load wordpress block styles, if and only if the block is present on the page?

    Any tip or php rule?

    #2287282
    David
    Staff
    Customer Support

    This article explains:

    https://make.wordpress.org/core/2021/07/01/block-styles-loading-enhancements-in-wordpress-5-8/

    But i would recommend reading the Comments left by Tom and I.
    TLDR: The method WP choose to use means loading the styles in the Footer. Unless you use an optimizer to scrape those styles and add them to the head, you will most likely experience CLS.

    #2287302
    Rostyslav

    To complicated for me. I am going to leave it as it is.

    Another question. As I know Generateblocks use dynamic CSS true? But if I give a custom class to a GB container and then add CSS in a customizer for that class, that CSS is loading in all pages. How can I also load that custom CSS that I add to Generateblocks blocks dynamically?

    1) Create hook with
    <link rel="stylesheet" src="style.css">
    for all pages separately

    2) Any tip?

    #2287329
    David
    Staff
    Customer Support

    As I know Generateblocks use dynamic CSS true?

    That is true.

    Theres no easy way to do that, you would have to parse the entire page checking for existence of that class, and that would happen on every page. So it really is not worth doing. You would be better to either:

    a. put the CSS in a child theme stylesheet. So the browser can cache that file on first load.
    b. use a cache plugin to combine the CSS files into a cacheable file.

    #2287567
    Rostyslav

    Hello!

    Can you check if I did it properly. Link in private area.

    #2288184
    David
    Staff
    Customer Support

    So the Additional CSS is no longer inline in the <head> of your site, i can see it is now in an autoptimize file.
    And those files are being cached by the browser.

    #2288245
    Rostyslav

    Thank you!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.