I created several blocks using the ACF Pro 6 block.json. The styles of each block I defined using Tailwind. I found it handy to point the style setting of each block to my main style.css, as i am using basically the same classes everywhere.
But it happens that my main style.css is being loaded several times, as much blocks I have. The blocks being used or not in the page.
Here is one example of block.json:
{
"name": "customizable-card-08",
"title": "Text and Video",
"description": "A customizable card with title, text, link, and color options.",
"style": "file:../../style.css", // <---- trouble
"category": "gechem-blocks",
"icon": "format-aside",
"apiVersion": 2,
"keywords": ["video", "text"],
"acf": {
"mode": "edit",
"renderTemplate": "card_08.php",
"postTypes": ["post", "page"]
},
"supports": {
"anchor": true
}
}
How can I prevent style.css from loading multiple times?
Since the style path is required in the JSON, I attempted to direct the style in the JSON to a non-existent file path. This seems to prevent the style from being loaded repeatedly, and everything appears correctly on the front end since the classes are included in my main style.css. However, it removes the style I beautifully had in the backend/Gutenberg.
Is there a solution where I can have the style.css not being loaded repeatedly and keep style on the back-end?
Thanks <3
-
I also tried add_filter( 'should_load_separate_core_block_assets', '__return_true' ); but the styles would be still loaded on the footer instead of the head.Ramate– Ramate2024年01月31日 10:33:07 +00:00Commented Jan 31, 2024 at 10:33
-
With the advantage of loading just if the block is present in the page.Ramate– Ramate2024年01月31日 10:48:03 +00:00Commented Jan 31, 2024 at 10:48