Attributes - Field types

Last modified:

General

All fields share the following properties:

id: string
A unique identifier for the field, which will be used get the value inside block templates. Must be unique within the current context.

key: string
Another identifier that can be used to uniquely identify fields across different contexts. (inside repeaters etc.)

label: string
The label for the field.

help: string
The help text for the field. Will be displayed in a tooltip next to the label.

hidden: boolean
Whether to hide the field UI in the editor. This is handy when using the variations API.

switch: boolean
Whether to display a switch that disables the field.

conditions: array
Conditional logic detailing when the field should be displayed in the editor.

Checkbox

Renders a set of checkbox inputs.

block.json

                                                {
            "title": "Checkbox field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "checkbox",
                  "type": "checkbox",
                  "label": "Checkbox",
                  "options": [
                    {
                      "value": "option-1",
                      "label": "Option 1"
                    },
                    {
                      "value": "option-2",
                      "label": "Option 2"
                    }
                  ]
                }
              ]
            }
          }
                                                                                                                                                                                                                                                        
      
      
Copy

Rendering examples

multiple-default.php
multiple-default.twig
multiple-both.php
multiple-both.twig

        <?php
foreach ($a['fieldName'] as $option): ?>
	<?php echo $option; ?>
<?php endforeach; ?>
Copy

        {% for option in a.fieldName %}
    {{ option }}
{% endfor %}

      
Copy

        <?php
foreach ($a['fieldName'] as $option): ?>
	<?php echo $option['value']; ?>
<?php endforeach; ?>
Copy

        {% for option in a.fieldName %}
    {{ option.value }}
{% endfor %}

      
Copy

Properties

default: array | string | number
Default value that should be applied when first adding the block.

fallback: array | string | number
Fallback value that that will display when field value is empty.

options: object (label: string, value: string | number)
Options to choose from.

returnFormat: string (value | label | both)
Specifies the return format value.

populate: object

Code

Renders a code editor.

block.json

                                                          {
            "title": "Code field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "code",
                  "type": "code",
                  "label": "code",
                  "default": ".selector { display: block; }"
                }
              ]
            }
          }
                                                                                                                                                                                                                                              
      
      
Copy

Rendering examples

default.php
default.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

Properties

default: string
Default value that should be applied when first adding the block.

fallback: string
Fallback value that that will display when field value is empty.

autoCompletion: boolean
Whether to enable autocompletion or not.

foldGutter: boolean
Whether to show the fold gutter or not.

height: string
The height of the editor.

language: string (css | html | javascript | json | twig)
The language to use for syntax highlighting.

lineNumbers: boolean
Whether to display line numbers or not.

maxHeight: string
The maximum height of the editor.

minHeight: string
The minimum height of the editor.

Color

Renders a color palette and color picker.

block.json

                                                                    {
            "title": "Color field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "color",
                  "type": "color",
                  "label": "Color",
                  "options": [
                    {
                      "name": "red",
                      "value": "#f00",
                      "slug": "red"
                    },
                    {
                      "name": "white",
                      "value": "#fff",
                      "slug": "white"
                    }
                  ]
                }
              ]
            }
          }
                                                                                                                                                                                                                                    
      
      
Copy

Rendering examples

default.php
default.twig
both.php
both.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

        <?php echo $a['fieldName']['value']; ?>
Copy

        {{ a.fieldName.value }}

      
Copy

Properties

options: object (name: string, value: string, slug: string)

populate: object

clearable: boolean
Whether the palette should have a clearing button or not.

disableCustomColors: boolean
Whether to allow custom color or not.

Date

Renders a date picker.

block.json

                                                                              {
            "title": "Date field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "date",
                  "type": "date",
                  "label": "Date"
                }
              ]
            }
          }
                                                                                                                                                                                                                          
      
      
Copy

Rendering examples

default.php
default.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

Properties

default: string
Default value that should be applied when first adding the block.

fallback: string
Fallback value that that will display when field value is empty.

startOfWeek: number
The day that the week should start on. 0 for Sunday, 1 for Monday, etc.

Datetime

Renders a date and time picker.

block.json

                                                                                        {
            "title": "Datetime field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "datetime",
                  "type": "datetime",
                  "label": "Datetime"
                }
              ]
            }
          }
                                                                                                                                                                                                                
      
      
Copy

Rendering examples

default.php
default.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

Properties

default: string
Default value that should be applied when first adding the block.

fallback: string
Fallback value that that will display when field value is empty.

is12Hour: boolean
Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is displayed and the time format is assumed to be MM-DD-YYYY (as opposed to the default format DD-MM-YYYY).

Files

Renders a button to the media library. Picked items can be reordered inline.

block.json

                                                                                                  {
            "title": "Files field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "files",
                  "type": "files",
                  "label": "Files",
                  "multiple": true,
                  "default": [1605]
                }
              ]
            }
          }
                                                                                                                                                                                                      
      
      
Copy

Rendering examples

default.php
default.twig
multiple-default.php
multiple-default.twig
id.php
id.twig
multiple-id.php
multiple-id.twig
url.php
url.twig
multiple-url.php
multiple-url.twig

        <?php $file = $a['fieldName'];
if ($file) {
    wp_get_attachment_image($file['ID'], 'full');
} ?>
Copy

        {% set file = a.fileName %}
{% if file %}
    {{ fn('wp_get_attachment_image', file.ID, 'full') }}
{% endif %}

      
Copy

        <?php $files = $a['fieldName'] ?? [];
foreach ($files as $file): ?>
	<?php wp_get_attachment_image($file['ID'], 'full'); ?>
<?php endforeach; ?>
Copy

        {% set files = a.fileName ?? [] %}
{% for file in files %}
    {{ fn('wp_get_attachment_image', file.ID, 'full') }}
{% endfor %}

      
Copy

        <?php $file = $a['fieldName'];
if ($file) {
    wp_get_attachment_image($file, 'full');
} ?>
Copy

        {% set file = a.fileName %}
{% if file %}
    {{ fn('wp_get_attachment_image', file, 'full') }}
{% endif %}

      
Copy

        <?php $files = $a['fieldName'] ?? [];
foreach ($files as $file): ?>
	<?php wp_get_attachment_image($file, 'full'); ?>
<?php endforeach; ?>
Copy

        {% set files = a.fileName ?? [] %}
{% for file in files %}
    {{ fn('wp_get_attachment_image', file, 'full') }}
{% endfor %}

      
Copy

        <?php $file = $a['fieldName'];
if ($file): ?>
    <img src="<?php echo $file; ?>">
<?php endif; ?>
Copy

        {% set file = a.fileName %}
{% if file %}
    <img src="{{ file }}"/>
{% endif %}

      
Copy

        <?php $files = $a['fieldName'] ?? [];
foreach ($files as $file): ?>
	<img src="<?php echo $file; ?>">
<?php endforeach; ?>
Copy

        {% set files = a.fileName ?? [] %}
{% for file in files %}
    <img src="{{ file }}" />
{% endfor %}

      
Copy

Properties

default: array | object | number
Default value that should be applied when first adding the block.

fallback: array | object | number
Fallback value that that will display when field value is empty.

addToGallery: boolean
If true, the gallery media modal opens directly in the media library where the user can add additional images. If false the gallery media modal opens in the edit mode where the user can edit existing images, by reordering them, remove them, or change their attributes. Only applies if gallery === true.

allowedTypes: array | string
Array with the types of the media to upload/select from the media library. Each type is a string that can contain the general mime type e.g: 'image', 'audio', 'text', or the complete mime type e.g: 'audio/mpeg', 'image/gif'. If allowedTypes is unset all mime types should be allowed.

gallery: boolean
If true, the component will initiate all the states required to represent a gallery. By default, the media modal opens in the gallery edit frame, but that can be changed using the addToGalleryflag.

max: number
Maximum amount of files that can be added.

min: number
Minimum amount of files that can be added.

multiple: boolean
Whether to allow multiple selections or not.

size: boolean
Adds a media size dropdown to the field.

textMediaButton: string
Media button text.

title: string
Title displayed in the media modal.

returnFormat: string (object | id | url)
Specifies the return format value.

returnSize: string
The media size to return when using the URL return format.

Size dropdown

When using the size feature, the url key of the current image array will always contain the URL of the selected size.

Gradient

Renders a gradient palette and gradient picker

block.json

                                                                                                            {
            "title": "Gradient field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "gradient",
                  "type": "gradient",
                  "label": "Gradient",
                  "options": [
                    {
                      "name": "JShine",
                      "value": "linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)",
                      "slug": "jshine"
                    },
                    {
                      "name": "Moonlit Asteroid",
                      "value": "linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)",
                      "slug": "moonlit-asteroid"
                    }
                  ]
                }
              ]
            }
          }
                                                                                                                                                                                            
      
      
Copy

Rendering examples

default.php
default.twig
both.php
both.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

        <?php echo $a['fieldName']['value']; ?>
Copy

        {{ a.fieldName.value }}

      
Copy

Properties

options: object (name: string, value: string, slug: string)

populate: object

clearable: boolean
Whether the palette should have a clearing button or not.

disableCustomGradients: boolean
Whether to allow custom color or not.

Group

Renders multiple fields in an (optionally) collapsible container.

block.json

                                                                                                                      {
            "title": "Group field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "group",
                  "type": "group",
                  "title": "Group",
                  "initialOpen": true,
                  "attributes": [
                    {
                      "id": "text",
                      "type": "text",
                      "label": "Text"
                    },
                    {
                      "id": "number",
                      "type": "number",
                      "label": "Number"
                    }
                  ]
                }
              ]
            }
          }
                                                                                                                                                                                  
      
      
Copy

Properties

title: string
Title text. It shows even when the component is closed.

opened: boolean
When set to true, the component will remain open regardless of the initialOpen prop and the

initialOpen: boolean
Whether or not the panel will start open.

scrollAfterOpen: boolean
Scrolls the content into view when visible.

class: string
Custom CSS class that will be applied to the group.

style: object
Custom CSS styles that will be applied to the group.

attributes: object (id: string, key: string, type: string, label: string, help: string, hidden: boolean, switch: boolean, conditions: array)
Accepts all other field types besides another tabs.

With and without ID

block.json

                        
          {
            "blockstudio": {
              "attributes": [
                {
                  "type": "group",
                  "label": "My group",
                  "attributes": [
                    {
                      "id": "message",
                      "type": "text",
                      "label": "My message"
                    }
                  ]
                }
              ]
            }
          }

                      
      
Copy

The code above will prevail the IDs of all inner attributes. For example, you can return the value of the text field using $a['message'] in your code. This is a great way to structure your attributes. As your block grows, you can easily move attributes to other groups without having to worry about changing the IDs.

It is also possible to prefix all attribute IDs inside the groups by applying an id key to the group field, prefixing all inner attribute IDs with the group ID.

block.json

                        
          {
            "blockstudio": {
              "attributes": [
                {
                  "id": "group",
                  "type": "group",
                  "label": "My group",
                  "attributes": [
                    {
                      "id": "message",
                      "type": "text",
                      "label": "My message"
                    }
                  ]
                }
              ]
            }
          }

                      
      
Copy

To access attributes inside groups with IDs, simply prepend the group ID following an _ to the inner attribute ID.

index.php

                                  <h1><?php echo $attributes['group_message']; ?></h1>
          <h1><?php echo $a['group_message']; ?></h1>
Copy

It is also possible to access group values using the bs_get_group helper function.

index.php

                                  <?php
          // bs_get_group($attributes, $groupName)
          $group = bs_get_group($a, 'group'); ?>

          <h1><?php echo $group['message']; ?></h1>
Copy

Icon

Renders an SVG icon from an icon set.

block.json

                                                                                                                                {
            "title": "Icon field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "icon",
                  "type": "icon",
                  "label": "Icon"
                }
              ]
            }
          }
                                                                                                                                                                        
      
      
Copy

Rendering examples

default.php
default.twig
element.php
element.twig

        <?php bs_render_icon($a['fieldName']); ?>
Copy

        {{ fn('bs_render_icon', a.fieldName) }}

      
Copy

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

Properties

default: object
Default value that should be applied when first adding the block.

fallback: object
Fallback value that that will display when field value is empty.

sets: array | string
Which icon set to include. Leave empty to include all.

subSets: array | string
Which sub icon set to include. Leave empty to include all.

returnFormat: string (object | element)
The format to return the icon in.

Available sets and subsets

  • octicons
  • vscode-icons
  • remix-icons
    • design
    • buildings
    • development
    • health
    • business
    • logos
    • others
    • user
    • document
    • system
    • map
    • finance
    • device
    • weather
    • communication
    • editor
    • media
  • tabler-icons
  • simple-icons
  • flat-color-icons
  • bootstrap-icons
  • material-design-icons
    • two-tone
    • outlined
    • filled
    • round
    • sharp
  • box-icons
    • logos
    • solid
    • regular
  • ion-icons
  • heroicons
    • solid
    • outline
  • feather-icons
  • fontawesome-free
    • brands
    • solid
    • regular
  • grommet-icons
  • css-gg

Renders a link control to choose internal or external links.

block.json

                                                                                                                                          {
            "title": "Link field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "link",
                  "type": "link",
                  "label": "Link"
                }
              ]
            }
          }
                                                                                                                                                              
      
      
Copy

Rendering examples

default.php
default.twig
default-new-tab.php
default-new-tab.twig

        <?php $link = $a['fieldName'];
if ($link): ?>
    <a href="<?php echo $link['url']; ?>">
        <?php echo $link['title']; ?>
    </a>
<?php endif; ?>
Copy

        {% set link = a.fieldName %}
{% if link %}
    <a href="{{ link.url }}">
        {{ link.title }}
    </a>
{% endif %}

      
Copy

        <?php $link = $a['fieldName'];
if ($link): ?>
    <a href="<?php echo $link['url']; ?>"
       target="<?php echo $link['opensInNewTab'] ? '_blank' : '_self'; ?>">
        <?php echo $link['title']; ?>
    </a>
<?php endif; ?>
Copy

        {% set link = a.fieldName %}
{% if link %}
    <a href="{{ link.url }}" target="{{ link.opensInNewTab ? '_blank' : '_self' }}">
        {{ link.title }}
    </a>
{% endif %}

      
Copy

Properties

default: object
Default value that should be applied when first adding the block.

fallback: object
Fallback value that that will display when field value is empty.

hasRichPreviews: boolean
Whether rich previews should be shown when adding an URL.

noDirectEntry: boolean
Whether to allow turning a URL-like search query directly into a link.

noURLSuggestion: boolean
Whether to add a fallback suggestion which treats the search query as a URL.

opensInNewTab: boolean
Adds a toggle control to the link modal.

showSuggestions: boolean
Whether to present suggestions when typing the URL.

textButton: string
Custom text that should be displayed inside the link button.

withCreateSuggestion: boolean
Whether to allow creation of link value from suggestion.

Message

Renders a message with custom content.

block.json

                                                                                                                                                    {
            "title": "Message field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "message",
                  "type": "message",
                  "value": "The block title is <strong>{block.title}</strong> and the value of text is <strong>{attributes.text}</strong>"
                },
                {
                  "id": "text",
                  "type": "text",
                  "label": "Text",
                  "default": "Text value"
                }
              ]
            }
          }
                                                                                                                                                    
      
      
Copy

Properties

default: string
Default value that should be applied when first adding the block.

fallback: string
Fallback value that that will display when field value is empty.

value: string
The message to display. Block and attribute data is available in bracket syntax, e.g.: The block title is {block.title} and the value of text is {attributes.text}

Number

Renders a number input.

block.json

                                                                                                                                                              {
            "title": "Number field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "number",
                  "type": "number",
                  "label": "Number"
                }
              ]
            }
          }
                                                                                                                                          
      
      
Copy

Rendering examples

default.php
default.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

Properties

default: number
Default value that should be applied when first adding the block.

fallback: number
Fallback value that that will display when field value is empty.

dragDirection: string (n | e | s | w)
Determines the drag axis to increment/decrement the value.

dragThreshold: number
If isDragEnabled is true, this controls the amount of px to have been dragged before the value changes.

hideHTMLArrows: boolean
If true, the default input HTML arrows will be hidden.

isShiftStepEnabled: boolean
If true, enables mouse drag gesture to increment/decrement the number value. Holding SHIFT while dragging will increase the value by the shiftStep.

max: number
The maximum value length.

min: number
Minimum value length.

required: boolean
If true enforces a valid number within the control’s min/max range. If false allows an empty string as a valid value.

shiftStep: number
Amount to increment by when the SHIFT key is held down. This shift value is a multiplier to the step value. For example, if the step value is 5, and shiftStep is 10, each jump would increment/decrement by 50.

step: number
Amount by which the value is changed when incrementing/decrementing. It is also a factor in validation as value must be a multiple of step (offset by min, if specified) to be valid. Accepts the special string value any that voids the validation constraint and causes stepping actions to increment/decrement by 1.

Radio

Renders a set of radio inputs.

block.json

                                                                                                                                                                        {
            "title": "Radio field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "radio",
                  "type": "radio",
                  "label": "Radio",
                  "options": [
                    {
                      "value": "option-1",
                      "label": "Option 1"
                    },
                    {
                      "value": "option-2",
                      "label": "Option 2"
                    }
                  ]
                }
              ]
            }
          }
                                                                                                                                
      
      
Copy

Rendering examples

default.php
default.twig
both.php
both.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

        <?php echo $a['fieldName']['value']; ?>
Copy

        {{ a.fieldName.value }}

      
Copy

Properties

default: string | number
Default value that should be applied when first adding the block.

fallback: string | number
Fallback value that that will display when field value is empty.

options: object (label: string, value: string | number, innerBlocks: array)
Options to choose from.

returnFormat: string (value | label | both)
Specifies the return format value.

populate: object

Range

Renders a range input to set a numerical value between two points.

block.json

                                                                                                                                                                                  {
            "title": "Range field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "range",
                  "type": "range",
                  "label": "Radio"
                }
              ]
            }
          }
                                                                                                                      
      
      
Copy

Rendering examples

default.php
default.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

Properties

default: number
Default value that should be applied when first adding the block.

fallback: number
Fallback value that that will display when field value is empty.

allowReset: boolean
If this property is true, a button to reset the slider is rendered.

initialPosition: number
The slider starting position, used when no value is passed. The initialPosition will be clamped between the provided min and max prop values.

isShiftStepEnabled: boolean
If true, enables mouse drag gesture to increment/decrement the number value. Holding SHIFT while dragging will increase the value by the shiftStep.

marks: object (label: string, value: number)
Renders a visual representation of step ticks. Custom mark indicators can be provided by an Array.

max: number
The maximum value length.

min: number
Minimum value length.

railColor: string
CSS color string to customize the rail element’s background.

resetFallbackValue: number
The value to revert to if the Reset button is clicked (enabled by allowReset)

separatorType: string (none | fullWidth | topFullWidth)
Define if separator line under/above control row should be disabled or full width. By default it is placed below excluding underline the control icon.

shiftStep: number
Amount to increment by when the SHIFT key is held down. This shift value is a multiplier to the step value. For example, if the step value is 5, and shiftStep is 10, each jump would increment/decrement by 50.

showTooltip: boolean
Forcing the Tooltip UI to show or hide. This is overridden to false when step is set to the special string value any.

step: number
Amount by which the value is changed when incrementing/decrementing. It is also a factor in validation as value must be a multiple of step (offset by min, if specified) to be valid. Accepts the special string value any that voids the validation constraint and causes stepping actions to increment/decrement by 1.

trackColor: string
CSS color string to customize the track element’s background.

withInputField: boolean
Determines if the input number field will render next to the RangeControl. This is overridden to false when step is set to the special string value any.

Select

Renders a select input with support for single or multiple selections.

block.json

                                                                                                                                                                                            {
            "title": "Select field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "select",
                  "type": "select",
                  "label": "Select",
                  "options": [
                    {
                      "value": "option-1",
                      "label": "Option 1"
                    },
                    {
                      "value": "option-2",
                      "label": "Option 2"
                    }
                  ]
                }
              ]
            }
          }
                                                                                                            
      
      
Copy

Rendering examples

default.php
default.twig
multiple-default.php
multiple-default.twig
both.php
both.twig
multiple-both.php
multiple-both.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

        <?php
foreach ($a['fieldName'] as $option): ?>
	<?php echo $option; ?>
<?php endforeach; ?>
Copy

        {% for option in a.fieldName %}
    {{ option }}
{% endfor %}

      
Copy

        <?php echo $a['fieldName']['value']; ?>
Copy

        {{ a.fieldName.value }}

      
Copy

        <?php
foreach ($a['fieldName'] as $option): ?>
	<?php echo $option['value']; ?>
<?php endforeach; ?>
Copy

        {% for option in a.fieldName %}
    {{ option.value }}
{% endfor %}

      
Copy

Properties

default: array | string | number
Default value that should be applied when first adding the block.

fallback: array | string | number
Fallback value that that will display when field value is empty.

multiple: boolean
If true, multiple options can be selected. "stylisedUi" will be automatically enabled.

options: object (label: string, value: string | number, innerBlocks: array)
Options to choose from.

returnFormat: string (value | label | both)
Specifies the return format value.

populate: object

stylisedUi: boolean
Renders a stylised version of a select with the ability to search through items.

allowNull: boolean | string
Allows the user to select an empty choice. If true, the label will be empty, otherwise the option will render the specified string.

allowReset: boolean
If this property is true, a button to reset the select is rendered.

Tabs

Renders a tabbed interface for grouping fields.

block.json

                                                                                                                                                                                                        {
              "title": "Tabs field",
              "blockstudio": {
                "attributes": [
                  {
                    "type": "tabs",
                    "tabs": [
                      {
                        "title": "Tab 1",
                        "attributes": [
                          {
                            "type": "group",
                            "title": "Group",
                            "attributes": [
                              {
                                "id": "text",
                                "type": "text",
                                "label": "Text"
                              },
                              {
                                "id": "text2",
                                "type": "text",
                                "label": "Text 2"
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "title": "Tab 2",
                        "attributes": [
                          {
                            "type": "group",
                            "title": "Group",
                            "attributes": [
                              {
                                "id": "text3",
                                "type": "text",
                                "label": "Text 3"
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            }
                                                                                                    
      
      
Copy

Properties

tabs: object (title: string, attributes: array, conditions: array, blockEditor: object, editor: object, icon: string, innerBlocks: string, override: boolean, refreshOn: array, transforms: object)
The tabs to display.

Text

Renders a single line text input.

block.json

                                                                                                                                                                                                                {
            "title": "Text field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "text",
                  "type": "text",
                  "label": "Text"
                }
              ]
            }
          }
                                                                                        
      
      
Copy

Rendering examples

default.php
default.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

Properties

default: string
Default value that should be applied when first adding the block.

fallback: string
Fallback value that that will display when field value is empty.

max: number
The maximum value length.

min: number
Minimum value length.

Textarea

Renders a textarea input.

block.json

                                                                                                                                                                                                                          {
            "title": "Textarea field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "textarea",
                  "type": "textarea",
                  "label": "Textarea"
                }
              ]
            }
          }
                                                                              
      
      
Copy

Rendering examples

default.php
default.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

Properties

default: string
Default value that should be applied when first adding the block.

fallback: string
Fallback value that that will display when field value is empty.

max: number
The maximum value length.

min: number
Minimum value length.

rows: number
The number of rows the textarea should contain.

Toggle

Renders a true/false toggle.

block.json

                                                                                                                                                                                                                                    {
            "title": "Toggle field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "toggle",
                  "type": "toggle",
                  "label": "Toggle"
                }
              ]
            }
          }
                                                                    
      
      
Copy

Rendering examples

default.php
default.twig

        <?php
if ($a['fieldName']): ?>
	true
<?php else: ?>
	false
<?php endif; ?>
Copy

        {% if a.fieldName %}
    true
{% else %}
    false
{% endif %}

      
Copy

Properties

default: boolean
Default value that should be applied when first adding the block.

fallback: boolean
Fallback value that that will display when field value is empty.

Repeater

Renders a set of fields that can be repeated.

block.json

                                                                                                                                                                                                                                                        {
            "title": "Repeater field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "repeater",
                  "type": "repeater",
                  "label": "Repeater",
                  "attributes": [
                    {
                      "id": "text",
                      "type": "text",
                      "label": "Text"
                    },
                    {
                      "id": "repeater",
                      "type": "repeater",
                      "label": "Repeater",
                      "min": 1,
                      "textButton": "Add repeater 1",
                      "attributes": [
                        {
                          "id": "text",
                          "type": "text",
                          "label": "Text"
                        },
                        {
                          "id": "repeater",
                          "type": "repeater",
                          "label": "Repeater",
                          "min": 1,
                          "max": 2,
                          "textButton": "Add repeater 2",
                          "attributes": [
                            {
                              "id": "number",
                              "type": "number",
                              "label": "Number",
                              "default": 10
                            },
                            {
                              "id": "repeater",
                              "type": "repeater",
                              "label": "Repeater",
                              "min": 2,
                              "max": 3,
                              "textButton": "Add repeater 3",
                              "attributes": [
                                {
                                  "id": "range",
                                  "type": "range",
                                  "label": "Range",
                                  "default": 50
                                }
                              ]
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          }
                                                
      
      
Copy

Properties

min: number
Minimum amount of rows.

max: number
Maximum amount of rows.

textButton: string
Text for the add button.

textMinimized: string | object
Text that will be displayed when rows are minimized.

textRemove: string | boolean
Text to display in alert when removing repeater row.

attributes: array
Accepts all other field types besides another tabs.

textMinimized usage

The textMinimized key is used to define the text that will be displayed when the repeater is minimized. It can be a string or display the value of a field inside the repeater including optional prefixes and suffixes.

The {index} variable can be used in any of the keys to return the number of the current repeater row.

block.json

                                  {
            "blockstudio": {
              "attributes": [
                {
                  "id": "repeater",
                  "type": "repeater",
                  "label": "My repeater",
                  "textMinimized": {
                    "id": "message",
                    "fallback": "Fallback value",
                    "prefix": "Repeater Row {index}: ",
                    "suffix": " - Suffix"
                  },
                  "attributes": [
                    {
                      "id": "message",
                      "type": "text",
                      "label": "My message"
                    }
                  ]
                }
              ]
            }
          }
                      
      
Copy

Richtext

Attribute field for RichText fields.

Rendering examples

default.php
default.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

Properties

default: string
Default value that should be applied when first adding the block.

fallback: string
Fallback value that that will display when field value is empty.

Unit

Renders a number input with a unit dropdown.

block.json

                                                                                                                                                                                                                                                                  {
            "title": "Unit field",
            "blockstudio": {
              "attributes": [
                {
                  "id": "unit",
                  "type": "unit",
                  "label": "Unit",
                  "default": "1rem",
                  "units": [
                    {
                      "value": "px",
                      "label": "px",
                      "default": 0
                    },
                    {
                      "value": "%",
                      "label": "%",
                      "default": 10
                    },
                    {
                      "value": "em",
                      "label": "em",
                      "default": 0
                    }
                  ]
                }
              ]
            }
          }
                                      
      
      
Copy

Rendering examples

default.php
default.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

Properties

default: string
Default value that should be applied when first adding the block.

fallback: string
Fallback value that that will display when field value is empty.

disableUnits: boolean
If true, the unit select field is hidden.

isPressEnterToChange: boolean
If true, the ENTER key press is required in order to trigger an onChange. If enabled, a change is also triggered when tabbing away.

isResetValueOnUnitChange: boolean
If true, and the selected unit provides a default value, this value is set when changing units.

isUnitSelectTabbable: boolean
Determines if the unit select field is tabbable.

units: object (default: number, label: string, value: string)

Wysiwyg

Renders a WYSIWYG editor.

block.json

                                                                                                                                                                                                                                                                              {
              "title": "WYSIWYG field",
              "blockstudio": {
                "attributes": [
                  {
                    "id": "wysiwyg",
                    "type": "wysiwyg",
                    "label": "WYSIWYG",
                    "toolbar": {
                      "tags": {
                        "headings": [
                          1,
                          2,
                          3,
                          4,
                          5,
                          6
                        ]
                      },
                      "formats": {
                        "bold": true,
                        "italic": true,
                        "underline": true,
                        "strikethrough": true,
                        "code": true,
                        "orderedList": true,
                        "unorderedList": true,
                        "link": {
                          "opensInNewTab": true,
                          "attributes": {
                            "rel": "nofollow"
                          }
                        }
                      }
                    }
                  }
                ]
              }
            }
                            
      
      
Copy

Rendering examples

default.php
default.twig

        <?php echo $a['fieldName']; ?>
Copy

        {{ a.fieldName }}

      
Copy

Properties

default: string
Default value that should be applied when first adding the block.

fallback: string
Fallback value that that will display when field value is empty.

toolbar: object
The toolbar configuration for the editor.