Get Started

Preview

Last modified:

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.",
      "keywords": [
        "block",
        "native"
      ],
      "version": "1.0.0",
      "textdomain": "blockstudio",
      "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.",
      "keywords": [
        "block",
        "native"
      ],
      "version": "1.0.0",
      "textdomain": "blockstudio",
      "example": {
        "attributes": {
          "title": "This title will be shown in the preview"
        }
      },
      "blockstudio": true
    }

        
Copy
index.php 

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