logo

Preview

Gutenberg allows previewing blocks when hovering over the block in the fixed block inserter. To enable the preview of blocks made with Blockstudio, simply set the example key to an empty object.

block.json 

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

      
Copy

Custom data

It is also possible to provide structured data in the example key, so any custom attributes are correctly being rendered.

block.json 

            {
      "name": "blockstudio/native",
      "title": "Native Block",
      "category": "text",
      "icon": "star-filled",
      "description": "Native Blockstudio block.",
      "example": {
        "attributes": {
          "title": "This title will be shown in the preview"
        }
      },
      "blockstudio": true
    }

      
Copy
index.php
index.twig 

          <h1><?php echo $a['title']; ?></h1>
Copy

          <h1>{{ a.title }}</h1>
Copy

InnerBlocks

If your block relies on InnerBlocks, it is possible to provide a template for the InnerBlocks.

block.json 

            {
      "name": "blockstudio/native",
      "title": "Native Block",
      "category": "text",
      "icon": "star-filled",
      "description": "Native Blockstudio block.",
      "example": {
        "innerBlocks": [
          {
            "name": "core/paragraph",
            "attributes": {
              "content": "This is the default InnerBlocks block."
            }
          }
        ]
      },
      "blockstudio": true
    }

      
Copy