Blockstudio
BlocksAttributes

Registering Attributes

Attributes are defined within the blockstudio.attributes array in your block.json file.

Basic Example

block.json
{
  "name": "my-theme/my-block",
  "title": "My Block",
  "blockstudio": {
    "attributes": [
      {
        "id": "title",
        "type": "text",
        "label": "Title"
      },
      {
        "id": "content",
        "type": "textarea",
        "label": "Content"
      }
    ]
  }
}

Attribute Properties

All attributes share the following properties:

PropertyTypeDescription
idstringUnique identifier for the attribute
typestringThe field type (text, textarea, select, etc.)
labelstringLabel displayed in the editor
defaultmixedDefault value for the attribute
helpstringHelp text displayed below the field
positionstringWhere the field appears: inspector (default) or toolbar
conditionsarrayConditional logic for showing/hiding the field

Position

By default, all fields are displayed in the block inspector (sidebar). You can change this using the position property:

block.json
{
  "blockstudio": {
    "attributes": [
      {
        "id": "alignment",
        "type": "select",
        "label": "Alignment",
        "position": "toolbar",
        "options": [
          { "value": "left", "label": "Left" },
          { "value": "center", "label": "Center" },
          { "value": "right", "label": "Right" }
        ]
      }
    ]
  }
}

Default Values

Set default values using the default property:

block.json
{
  "blockstudio": {
    "attributes": [
      {
        "id": "title",
        "type": "text",
        "label": "Title",
        "default": "Hello World"
      },
      {
        "id": "showBorder",
        "type": "toggle",
        "label": "Show Border",
        "default": true
      }
    ]
  }
}

Help Text

Add help text to guide users:

block.json
{
  "blockstudio": {
    "attributes": [
      {
        "id": "apiKey",
        "type": "text",
        "label": "API Key",
        "help": "Enter your API key from the settings page"
      }
    ]
  }
}

Accessing Attributes

In your template, attributes are available via the $a shorthand (or $attributes):

index.php
<h1><?php echo $a['title']; ?></h1>
<p><?php echo $a['content']; ?></p>

Or in Twig:

index.twig
<h1>{{ a.title }}</h1>
<p>{{ a.content }}</p>
Guide: Field Patterns Cookbook

On this page