Controls

Basic

Content

Choice

Advanced

Layout

Add Control

Each block has options to let the user customize it, you need to create block controls by clicking on the “Add Control” button. You can create as many controls per block as you want.

Control Settings

These settings will be available for most of the control types.

• Label – display label. This name will be shown on the Gutenberg editor inside block settings
• Name – control name, that will be available by accessing it in HTML code output. This name should be unique in the current block
• Type – control type. There are available several types such as Text, Select, Toggle, Image, etc…
• Default value – default control value
• Help text – help text will be added under control
• Placement – control placement. Available placements and description read below on this page
• Width – control width. 25%, 50%, 75% and 100%
• Save in Meta – save control value in the custom meta field. Read more info on this page below

Extra settings:

• Placeholder – text control placeholder, will be visible when the value is empty
• Checked – default state for control types Checkbox and Toggle
• Choices – options for control type Select. Read here more info on how to work with it

Control Placement

Control can be added in 2 places: Inspector and Content (inside block body). Example:

Custom Meta Field

Each control has the possibility to save its value in the custom fields, so this value will be available in the post meta data and developers may get this value. For example:

You should add a unique custom field name, as 3rd-party plugins/themes may use the same name and it will be conflicted. For example, if you want to use this block in your theme “My Super Theme”, we recommend adding slug name – mst_control_meta_name.

Reserved Control Names

There are reserved control names that you shouldn’t use:

• className – block custom classname
• align – block align
• anchor – block custom ID
• blockId – block unique ID, generates automatically