Archived topic
Do Wordpress Gutenber Blocks use dynamic css?
15 replies · Started by Rostyslav on July 19, 2022
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!
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!
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?
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.
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)?
Hi there,
WP will load its block-library CSS on every page including that.
Thanks
You're welcome
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?
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.
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?
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.
Hello!
Can you check if I did it properly. Link in private area.
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.
Thank you!
