Attributes - Field Types
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.
Attributes
Renders data attribute inputs.
{ "title": "Classes field", "blockstudio": { "attributes": [ { "id": "attributes", "type": "attributes", "label": "Attributes" } ] } }Copy
Rendering examples
<?php bs_render_data_attributes($a['fieldName']); ?>Copy
{{ fn('bs_render_data_attributes', a.fieldName) }}Copy
Properties
default:
array
Default value that should be applied when first adding the block.
fallback:
array
Fallback value that that will display when field value is empty.
link:
boolean
Enables link selection from dropdown.
media:
boolean
Enables media selection from dropdown.
Checkbox
Renders a set of checkbox inputs.
{ "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
<?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
Classes
Renders a field to select CSS classes.
{ "title": "Classes field", "blockstudio": { "attributes": [ { "id": "classes", "type": "classes", "label": "Classes", "tailwind": true } ] } }Copy
Rendering examples
<?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.
tailwind:
boolean
Whether to enable Tailwind classes for this input field.
Code
Renders a code editor.
{ "title": "Code field", "blockstudio": { "attributes": [ { "id": "code", "type": "code", "label": "code", "default": ".selector { display: block; }" } ] } }Copy
Rendering examples
<?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.
{ "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
<?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.
{ "title": "Date field", "blockstudio": { "attributes": [ { "id": "date", "type": "date", "label": "Date" } ] } }Copy
Rendering examples
<?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.
{ "title": "Datetime field", "blockstudio": { "attributes": [ { "id": "datetime", "type": "datetime", "label": "Datetime" } ] } }Copy
Rendering examples
<?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.
{ "title": "Files field", "blockstudio": { "attributes": [ { "id": "files", "type": "files", "label": "Files", "multiple": true, "default": [1605] } ] } }Copy
Rendering examples
<?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
{ "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
<?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.
{ "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
{ "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.
{ "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.
<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.
<?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.
{ "title": "Icon field", "blockstudio": { "attributes": [ { "id": "icon", "type": "icon", "label": "Icon" } ] } }Copy
Rendering examples
<?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
Link
Renders a link control to choose internal or external links.
{ "title": "Link field", "blockstudio": { "attributes": [ { "id": "link", "type": "link", "label": "Link" } ] } }Copy
Rendering examples
<?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.
{ "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.
{ "title": "Number field", "blockstudio": { "attributes": [ { "id": "number", "type": "number", "label": "Number" } ] } }Copy
Rendering examples
<?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.
{ "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
<?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.
{ "title": "Range field", "blockstudio": { "attributes": [ { "id": "range", "type": "range", "label": "Radio" } ] } }Copy
Rendering examples
<?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.
{ "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
<?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.
{ "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.
{ "title": "Text field", "blockstudio": { "attributes": [ { "id": "text", "type": "text", "label": "Text" } ] } }Copy
Rendering examples
<?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.
{ "title": "Textarea field", "blockstudio": { "attributes": [ { "id": "textarea", "type": "textarea", "label": "Textarea" } ] } }Copy
Rendering examples
<?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.
{ "title": "Toggle field", "blockstudio": { "attributes": [ { "id": "toggle", "type": "toggle", "label": "Toggle" } ] } }Copy
Rendering examples
<?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.
{ "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
Rendering examples
<?php foreach ($a['repeater'] as $item) : ?> <h1><?php echo $item['headline']; ?></h1> <p><?php echo $item['paragraph']; ?></p> <?php endforeach; ?>Copy
{% for item in a.repeater %} <h1>{{ item.headline }}</h1> <p>{{ item.paragraph }}</p> {% endfor %}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.
{ "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
<?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.
{ "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
<?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.
{ "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
<?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.