Unit Control

Number input with CSS unit suffix (px, em, rem, etc.).

Options

Option	Type	Default	Description
label	string	-	Field label
control	string	unit	Control type
units	array	['px', 'em', 'rem', '%']	Available units
default	string	-	Default value

Available Units

Unit	Description
px	Pixels
em	Em units
rem	Root em units
%	Percentage
vh	Viewport height
vw	Viewport width

Example

{
  "attributes": {
    "padding": {
      "type": "string",
      "default": "20px",
      "wbs": {
        "label": "Padding",
        "control": "unit",
        "units": ["px", "em", "rem"]
      }
    }
  }
}

Template Usage

<div style="padding: {{ attributes.padding }};">
  {{ inner_blocks|raw }}
</div>

Use Case

Use Unit for CSS properties like padding, margin, font-size, border-radius, or any value that needs a CSS unit.