Schema

To improve development with autocomplete and validation in your IDE, Blockstudio introduces its own schema:

View Blockstudio schema

The Blockstudio schema is an (always up-to-date) copy of the WordPress core block.json schema with an additional blockstudio property that houses all plugin features like field schemas without interfering with potential future core properties.

Add to JSON

Simply add a $schema key with a value of https://blockstudio.dev/schema/block to your block.json and your IDE should start to give you hints about Blockstudio specific properties.

{
  "$schema": "https://blockstudio.dev/schema/block",
  "name": "blockstudio/native",
  "title": "Native Block",
  "category": "text",
  "icon": "star-filled",
  "description": "Native Blockstudio block.",
  "blockstudio": true
}

IDE Support

VS Code

VS Code automatically picks up the schema from the $schema property.

For workspace-wide settings, add to .vscode/settings.json:

{
  "json.schemas": [
    {
      "fileMatch": ["**/block.json"],
      "url": "https://blockstudio.dev/schema/block"
    }
  ]
}

JetBrains IDEs

PhpStorm and other JetBrains IDEs support JSON Schema via the $schema property automatically.

Available Schemas

Benefits

• Autocomplete: Get suggestions for all available properties
• Validation: Catch errors before runtime
• Documentation: Hover over properties for inline documentation
• Type Safety: Ensure correct value types