Registering Attributes

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

Basic Example

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:

Property	Type	Description
`id`	string	Unique identifier for the attribute
`type`	string	The field type (text, textarea, select, etc.)
`label`	string	Label displayed in the editor
`default`	mixed	Default value for the attribute
`help`	string	Help text displayed as a tooltip next to the label
`position`	string	Where the field appears: `inspector` (default) or `toolbar`
`conditions`	array	Conditional 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:

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:

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:

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

PHP

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

Or in Twig:

Twig

<h1>{{ a.title }}</h1>
<p>{{ a.content }}</p>

Field Patterns Cookbook