Editor - Examples

Last modified: February 25 2023.

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:

index.php


                <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:

index.php


                <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.

block.json


                {
      "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.

block.json


                {
      "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.

block.json


                {
      "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