Blocks
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.
{
"name": "blockstudio/native",
"title": "Native Block",
"category": "text",
"icon": "star-filled",
"description": "Native Blockstudio block.",
"example": {},
"blockstudio": true
}Custom Data
It is also possible to provide structured data in the example key, so any custom attributes are correctly being rendered.
{
"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
}<h1><?php echo $a['title']; ?></h1><h1>{{ a.title }}</h1>InnerBlocks
If your block relies on InnerBlocks, it is possible to provide a template for the InnerBlocks.
{
"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
}