Different blocks loading the same stylesheet several times.

• Ramate

• January 30, 2024 at 4:12 pm

Hello,

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 main 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",
  "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 to avoid the style.css to be loaded so many times?

As the style path is required on the json, I tried to point the style in the json to an inexistent file path, it seams to work not repeating loading the style and everything shows fine in the front end as the classes are present in my main style.css. But I imagine it can lead to other issues.

Is there any solution for this?

• Ramate

• January 30, 2024 at 5:09 pm

Unfortunatelly I noticed that by pointing the style to a non existent path, removes the style I beautifully had in the backend/gutenberg.

That was the improvised solution I found to not load the same stylesheet several times.

I am wondering if this is in fact one or another. Or I load the main style.css in a repetitive way on the frontend or I have the styles of the blocks in the backend.