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