Each attribute has a type and options. Options property is an object that may contain multiple properties which can extend an attribute.
Common attributes options
label
A label which will be displayed in the Edit Form right before the attribute field.
label option example:
{
...
"text": {
"type": "textarea",
"access": "public",
"value": "Lorem ipsum dolor sit amet...",
"options": {
"label": "Text"
}
},
...
}
description
A description which will be displayed in the Edit Form right after the attribute field.
description option example:
{
...
"width": {
"type": "number",
"access": "public",
"value": "",
"options": {
"label": "Width",
"description": "Set the width of a button in pixels."
}
},
...
}
values
An array of objects. Usually, each object consists of label and value properties. This property is used for attributes that have multiple values like buttonGroup or dropdown.
values option example:
{
...
"verticalAlignment": {
"type": "dropdown",
"access": "public",
"value": "top",
"options": {
"label": "Vertical alignment",
"values": [
{
"label": "Top",
"value": "top",
},
{
"label": "Middle",
"value": "middle",
},
{
"label": "Bottom",
"value": "bottom",
}
]
}
},
...
}
cssMixins
Defines which POST CSS mixin to use, mixin variable and pattern. cssMixin property is an object that has several properties:
- mixin defines the name of POST CSS file with the mixin;
- property defines the name of the property inside POST CSS file;
- namePattern defines the pattern of how input data will be verified via RegExp.
cssMixins option example:
{
...
"color": {
"type": "color",
"access": "public",
"value": "#fff",
"options": {
"label": "Title color",
"cssMixin": {
"mixin": "titleColor",
"property": "color",
"namePattern": "[\\da-f]+"
}
}
},
...
}
onChange
Defines how to react to another attribute value change. It is defined as an object inside an attribute options property and must hold rules and actions properties. Learn more about rules and actions.
onChange option example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Hello World",
"options": {
"label": "Title",
"onChange": {
"rules": {
"titleType": {
"rule": "value",
"options": {
"value": "custom"
}
}
},
"actions": [
{
"action": "toggleVisibility"
}
]
}
}
},
"titleType": {
"type": "dropdown",
"access": "public",
"value": "default",
"options": {
"label": "Title type",
"values": [
{
"label": "Default title",
"value": "default"
},
{
"label": "Custom title",
"value": "custom"
}
]
}
},
...
}
Custom attributes options
multiple
Used in the attachimage and attachvideo attribute. Has a boolean value type and defines the ability to select multiple images.
multiple option example:
{
...
"image": {
"type": "attachimage",
"access": "public",
"value": "sample-background.png",
"options": {
"label": "Background image",
"multiple": false
}
},
...
}
defaultValue
Used in the attachimage attribute. Has a string value type and defines the image set by default. Images for this property should be located in the elementName/elementName/public folder.
defaultValue option example:
{
...
"image": {
"type": "attachimage",
"access": "public",
"value": "sample-background.png",
"options": {
"label": "Background image",
"defaultValue": "sample-background.png"
}
},
...
}
imageFilter
Used in the attachimage attribute. Has a boolean value type and defines whether Instagram like filters should be enabled for the image.
imageFilter option example:
{
...
"image": {
"type": "attachimage",
"access": "public",
"value": "sample-background.png",
"options": {
"label": "Background image",
"imageFilter": true
}
},
...
}
url
Used in the attachimage attribute. Has a boolean value type and defines whether link selector should be enabled.
url option example:
{
...
"image": {
"type": "attachimage",
"access": "public",
"value": "sample-background.png",
"options": {
"label": "Background image",
"url": false
}
},
...
}
action
Used in the autocomplete attribute. Has a string value type and defines the action for ajax request.
action option example:
{
...
"atts_category": {
"type": "autocomplete",
"access": "public",
"value": [],
"options": {
"action": "woocommerceCategory",
"label": "Category ID or Slug",
}
},
...
}
labelAction
Used in the autocomplete attribute. Has a string value type and defines the label action for ajax request.
labelAction option example:
{
...
"atts_category": {
"type": "autocomplete",
"access": "public",
"value": [],
"options": {
"action": "woocommerceCategory",
"labelAction": "product_cat",
"label": "Category ID or Slug"
}
},
...
}
returnValue
Used in the autocomplete attribute. Has a string value type and defines the return value for ajax request.
returnValue option example:
{
...
"atts_category": {
"type": "autocomplete",
"access": "public",
"value": "",
"options": {
"action": "woocommerceCategory",
"labelAction": "product_cat",
"returnValue": "slug",
"label": "Category ID or Slug",
}
},
...
}
validation
Used in the autocomplete attribute. Has a boolean value type and defines whether validation should be enabled for the autocomplete field.
validation option example:
{
...
"atts_category": {
"type": "autocomplete",
"access": "public",
"value": "",
"options": {
"action": "woocommerceCategory",
"labelAction": "product_cat",
"returnValue": "slug",
"validation": true,
"label": "Category ID or Slug",
}
},
...
}
single
Used in the autocomplete attribute. Has a boolean value type and defines whether a single available options should be enabled.
single option example:
{
...
"atts_category": {
"type": "autocomplete",
"access": "public",
"value": "",
"options": {
"action": "woocommerceCategory",
"labelAction": "product_cat",
"returnValue": "slug",
"validation": true,
"label": "Category ID or Slug",
"single": true
}
},
...
}
global
Used in the dropdown, checkbox, radio, buttonGroup attributes, usually in conjunction with WordPress plugins. Has a string value type and represents a JavaScript global variable.
global option example:
{
...
"source": {
"type": "dropdown",
"access": "public",
"value": "",
"options": {
"label": "Envira Gallery source",
"global": "vcvWpEnviraGallery"
}
},
...
}
category
Used in the element attribute. Has a string value type and is used to define child element category.
category option example:
{
...
"button": {
"type": "element",
"access": "public",
"value": {
"tag": "basicButton"
},
"options": {
"category": "Button"
}
},
...
}
tabLabel
Used in the element attribute. Has a string value type and is used to define child element section label in the Edit Form.
tabLabel option example:
{
...
"button": {
"type": "element",
"access": "public",
"value": {
"tag": "basicButton"
},
"options": {
"category": "Button",
"tabLabel": "Button"
}
},
...
}
merge
Used in the element attribute. Has an object value type and is used to define which element attributes should be merged on element replace. It has attributes property which itself is an array.
merge option example:
{
...
"button": {
"type": "element",
"access": "public",
"value": {
"tag": "basicButton"
},
"options": {
"category": "Button",
"tabLabel": "Button",
"merge": {
"attributes": [
{
"key": "alignment",
"type": "string"
},
{
"key": "buttonText",
"type": "string"
},
{
"key": "buttonUrl",
"type": "object"
}
]
}
}
},
...
}
exclude
Used in the element attribute. Has an array value type and is used to define which attributes should be excluded for child element.
exclude option example:
{
...
"icon": {
"type": "element",
"access": "public",
"value": {
"tag": "icon"
},
"options": {
"category": "Icon",
"tabLabel": "Image view icon",
"exclude": [
"iconUrl"
]
}
},
...
}
listView
Used in the radio and checkbox attributes. Has a boolean value type, and is used to define whether radios or checkboxes should be displayed inline or as a list. If the property is not defined radios and checkboxes will be displayed as inline.
listView option example:
{
...
"devices": {
"type": "checkbox",
"access": "public",
"value": [],
"options": {
"label": "Devices",
"listView": true,
"values": [
{
"label": "Desktop",
"value": "xl"
},
{
"label": "Mobile",
"value": "xs"
}
]
}
},
...
}
inline
Used in the htmleditor and string attributes. Has a boolean value type and is used to define whether inline editing should be enabled for the attribute.
inline option example:
{
...
"description": {
"type": "htmleditor",
"access": "public",
"value": "Lorem ipsum dolor sit amet...",
"options": {
"label": "Description",
"inline": true
}
},
...
}
inlineMode
Used in the string attribute. Has a string value type and is used to handle inline editing in regular string type attributes. Currently only available value is “text”.
inlineMode option example:
{
...
"title": {
"type": "string",
"access": "public",
"value": "Lorem ipsum",
"options": {
"label": "Title",
"inline": true,
"inlineMode": "text"
}
},
...
}
skinToggle
Used in the htmleditor attribute. Has a string value type and is used in conjunction with toggleSmall attribute to switch tinyMCE editor to a dark theme.
skinToggle option example:
{
...
"description": {
"type": "htmleditor",
"access": "public",
"value": "Lorem ipsum dolor sit amet...",
"options": {
"label": "Description",
"skinToggle": "darkTextSkin"
}
},
...
}
inputType
Used in the inputIcon attribute. Has a string value type and is used to define the input type.
inputClasses
Used in the inputIcon attribute. Has a string value type and is used to define classes for an icon.
inputType and inputClasses option example:
{
...
"heightxl": {
"type": "inputIcon",
"access": "public",
"value": "400",
"options": {
"label": "Height on desktop (px)",
"iconClasses": "vcv-ui-icon vcv-ui-icon-desktop",
"inputType": "number",
},
...
}
type
Used in the inputSelect attribute. Has a string value type and is used to define the type. Currently, only currency type is available.
type option example:
{
...
"price": {
"type": "inputSelect",
"access": "public",
"value": {
"input": "89,00",
"select": "$_"
},
"options": {
"type": "currency",
"label": "Price",
"values": []
}
},
...
}
min
Used in the number and range attributes. Has a number value type and is used to define the minimum input value.
min option example:
{
...
"autoPlayDelay": {
"type": "number",
"access": "public",
"value": "1",
"options": {
"label": "Autoplay delay",
"min": 1
}
},
...
}
max
Used in the number and range attributes. Has a number value type and is used to define the maximum input value.
max option example:
{
...
"autoPlayDelay": {
"type": "number",
"access": "public",
"value": "1",
"options": {
"label": "Autoplay delay",
"max": 100
}
},
...
}
measurement
Used in the range attribute. Has a string value type and is used to define measurement units for the range attribute field.
measurement option example:
{
...
"width": {
"type": "range",
"access": "public",
"value": "60",
"options": {
"label": "Width",
"description": "Enter width in percents (Example: 60).",
"measurement": "%"
}
},
...
}
mode
Used in the rawCode attribute. Has a string value type and is used to define code editor’s mode. Currently, only html and javascript are available.
mode option example:
{
...
"rawHtml": {
"type": "rawCode",
"access": "public",
"value": "<p>Lorem ipsum dolor sit amet...</p>",
"options": {
"label": "HTML",
"mode": "html"
}
},
...
}
height
Used in the rawCode attribute. Has a string value type and is used to define code editor’s height.
height option example:
{
...
"rawHtml": {
"type": "rawCode",
"access": "public",
"value": "<p>Lorem ipsum dolor sit amet...</p>",
"options": {
"label": "HTML",
"mode": "html",
"height": "30vh",
}
},
...
}
time
Used in the calendar attribute. Has a boolean value type and is used to enable time selection.
time option example:
{
...
"datepicker": {
"type": "calendar",
"access": "public",
"value": "",
"options": {
"label": "Date",
"time": true,
"timeIntervals": 15
}
}
...
}
timeIntervals
Used in the calendar attribute. Has a number value type and is used to define time interval. If this option is not specified, the default time interval will be set to 10.
timeIntervals option example:
{
...
"datepicker": {
"type": "calendar",
"access": "public",
"value": "",
"options": {
"label": "Date",
"time": true,
"timeIntervals": 15
}
}
...
}