ACF Blocks - Different blocks loading the same stylesheet several times

73 Views Asked by At

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

0

There are 0 best solutions below