Use CSS custom properties groups to combine multiple separate CSS custom properties into a single compact shorthand control in the Design panel. For example, without a border group, the editor shows three separate full-width controls for border width, style, and color. With the group, they appear as one compact row combining all three.
Each CSS custom property is defined individually in cssCustomProperties with its own cssPropertyType. The display group maps each property to a slot in the shorthand. The slot names match CSS shorthand sub-properties.
These groups only work with CSS custom properties. Standard CSS properties already map one-to-one with their controls and don't need display groups.
Combines background-related CSS custom properties into a single background control.
Note: Specify these additional configurations under a background field in your display group.
CSS custom property key for background-color.
CSS custom property key for background-image.
CSS custom property key for background-position.
CSS custom property key for background-size.
CSS custom property key for background-repeat.
CSS custom property key for background-origin.
CSS custom property key for background-clip.
Combines directional CSS custom properties into a single control. The following groupType values use this schema: margin, padding, borderColor, borderWidth, borderStyle.
Note: Specify these additional configurations under a field named after your groupType value, such as margin or padding, in your display group.
CSS custom property key for the top value.
CSS custom property key for the right value.
CSS custom property key for the bottom value.
CSS custom property key for the left value.
Combines border CSS custom properties into a single border control. The following groupType values use this schema: border, borderTop, borderRight, borderBottom, borderLeft, borderInlineStart, borderInlineEnd.
Note: Specify these additional configurations under a field named after your groupType value, such as border or borderTop, in your display group.
CSS custom property key for border width.
CSS custom property key for border style.
CSS custom property key for border color.
Combines border-radius CSS custom properties into a single corner-radius control.
Note: Specify these additional configurations under a borderRadius field in your display group.
CSS custom property key for the top-left corner radius.
CSS custom property key for the top-right corner radius.
CSS custom property key for the bottom-right corner radius.
CSS custom property key for the bottom-left corner radius.
Combines font-related CSS custom properties into a single font control.
Note: Specify these additional configurations under a font field in your display group.
CSS custom property key for font-style.
CSS custom property key for font-variant.
CSS custom property key for font-weight.
CSS custom property key for font-size.
CSS custom property key for line-height.
CSS custom property key for font-family.
Combines text-decoration CSS custom properties into a single text-decoration control.
Note: Specify these additional configurations under a textDecoration field in your display group.
CSS custom property key for text-decoration-line.
CSS custom property key for text-decoration-color.
CSS custom property key for text-decoration-style.
CSS custom property key for text-decoration-thickness.
Combines row and column gap CSS custom properties into a single gap control.
Note: Specify these additional configurations under a gap field in your display group.
CSS custom property key for row-gap.
CSS custom property key for column-gap.
If you define multiple padding CSS custom properties, use a padding display group to tell the editor which property maps to each side. The editor renders them as a single grouped padding control instead of four separate sliders.
Use a border display group to combine separate width, style, and color custom properties into a single border control in the editor.
Use a font display group to combine separate font-related custom properties into a single font control in the editor.