UI Controls

Visual controls for Display Builder on top of UI Styles and UI Patterns forms: a spacing box, color swatches, button groups, column presets and variant axes instead of long lists of classes and raw props.

Controls are mapped per theme in config, so the module has no dependency on any theme. The Display builder Bootstrap recipe provides a mapping for UI Suite Bootstrap.

Proof of concept. APIs and config may change without notice.

Requirements

• Drupal 11.4 or later
• Display Builder beta8
• UI Patterns 2.x
• UI Styles

Installation

Install as you would normally install a contributed Drupal module. See Installing Modules for further information.

Enable ui_controls_display_builder to use the controls in Display Builder.

Configuration

A mapping is a ui_controls.mapping.THEME config entity, edited as YAML for now. It names the styles and component props each control drives. The active theme mapping is used, falling back to its base themes.

See the one in tests/modules/ui_controls_test/config/optional, also used by the tests.

In Display Builder, the "Show visual controls" setting of the Styles island turns the controls on or off per profile.