10up / 10up-toolkit

Official 10up asset building toolkit.
114 stars 19 forks source link

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

Open Jorgu5 opened 3 months ago

Jorgu5 commented 3 months ago

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 versionproperty.

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

nicholasio commented 3 months ago

Thanks for you bug report. What's your 10up-toolkit version and are you using useBlockAssets flags?

Jorgu5 commented 3 months ago

I'm using 6.2.1 and yes, using useBlockAssets flag together with "useBlockModules and useScriptModules. I haven't tested how it behaves without using these flags