Editor - Examples
Last modified:
The experience of developing blocks inside the editor can be enhanced by adding
example attributes to the block.json
, so the preview will better resemble how
the block would look with actual data being applied to it.
Take this code as an example:
<h1><?php echo $a['title']; ?></h1>
Copy
Since the block is not being displayed inside the context of the editor, no text will show inside the H1 tag. It is possible to use the null coalescing operator to provide a default value if the first operand doesn't exist like so:
<h1><?php echo $a['title'] ?? 'This is the title'; ?></h1>
Copy
However, this can quickly pollute the template code, making it harder to parse and unnecessarily complex.
Usage
Just like WordPress core, Blockstudio is using the example key for defining preview data.
{ "apiVersion": 2, "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 is a title" } }, "blockstudio": { "attributes": [ { "type": "text", "id": "title", "label": "Title", } ] } }
Copy
Select
When adding examples to select-like field types with a values and labels (select, radio, checkbox etc.), the object has to include the value key.
{ "apiVersion": 2, "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": { "select": { "value": "javascript" } } }, "blockstudio": { "attributes": [ { "type": "select", "id": "select", "label": "Select", } ] } }
Copy
Images
Blockstudio provides an easy way to populate the files field type with example data.
{ "apiVersion": 2, "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": { "files": { "blockstudio": true, "type": "image", "amount": 20 } } }, "blockstudio": { "attributes": [ { "type": "files", "id": "images", "label": "Images", } ] } }
Copy