10up-toolkit icon indicating copy to clipboard operation
10up-toolkit copied to clipboard

"Version" property in block.json is required for SCSS support

Open Jorgu5 opened this issue 6 months ago • 2 comments

Describe the bug

Here I came up with a very strange bug, which caused me today a lot of trouble and couple hours. The problem is that, when "version" property is not defined in block.json, the style and editorStyle properties, when defined like that

{
  "style": "file:./style.css",
  "editorStyle": "file:./editor.css"
}

Are not finding properly the CSS files when bundled from SASS and ending up with an error, despite the fact that style.css and editor.css has been created properly, however based on the source in the error, it's looking in the wrong place (not in dist).

ERROR in ENOENT: no such file or directory, open '.../includes/blocks/accordion/style.css

When you add a version property to the block.json everything works properly.

The problem is that version property is optional as Wordpress documentation states, neither I have found in your documentation strictly that version property is required (it exist in examples though)

Steps to Reproduce

  1. Create a simple WP Block with block.json
  2. Create styles.scss and add the property style with style.css to the block.json
  3. Add / Remove version property.

Screenshots, screen recording, code snippet

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "version": "0.1.0" // remove 
  "name": "block/accordion",
  "title": "Accordion",
  "category": "design",
  "icon": "list-view",
  "description": "Create an accordion with multiple expandable sections.",
  "supports": {
    "html": false
  },
  "attributes": {
    "accordionItems": {
      "type": "array",
      "default": [
        {
          "title": "",
          "description": "",
          "image": {
            "id": 0,
            "url": "",
            "alt": ""
          }
        }
      ]
    }
  },
  "example": {
    "attributes": {
      "accordionItems": [
        {
          "id": "example-1",
          "title": "Accordion Item 1",
          "description": "This is the content of accordion item 1."
        },
        {
          "id": "example-2",
          "title": "Accordion Item 2",
          "description": "This is the content of accordion item 2."
        }
      ]
    }
  },
  "editorScript": "file:./index.js",
  "style": "file:./style.css",
  "editorStyle": "file:./editor.css"
}

Environment information

N/A

WordPress information

N/A

Code of Conduct

  • [X] I agree to follow this project's Code of Conduct

Jorgu5 avatar Aug 07 '24 19:08 Jorgu5