UI Patterns Settings

Define settings inside your ui_patterns.yml to make your pattern configurable. A setting can be a modifier, additional classes or attributes. You can also define a token setting, which makes it easy to configure a pattern with a Drupal field or pass a link URL to the pattern. No more hook_preprocess!

Layout Builder
Settings are useful in combination with UI Patterns Layout Builder. Each pattern can used as section and settings are very helpful to make the section more configurable

Sample Video: https://www.youtube.com/watch?v=aDbZRgY7Xm8 Sample:

card: label: Card description: A card component. allow_variant_token: true allow_variant_expose: true settings: modifier: type: textfield label: Modifier description: Add modifier here allow_token: true url: type: token label: Url default_value: "[node:url]" expose_as_field: true select: type: select label: Select allow_expose: true options: key_1: Value 1 key_2: Value 2 attributes: type: attributes label: Attributes tabs: type: group label: Tabs group_type: horizontal_tabs tab: type: group label: Tab group_type: details group: tabs tab_element: type: textfield label: Textfield group: tab colorwidget: type: colorwidget label: Colorwidget options: black:Black/#000000 white:White/#ffffff coloriswidget: type: coloriswidget label: Coloriswidget options: black:Black/#000000 white:White/#ffffff media_library: type: media_library label: Media allowed_bundles: - image view_mode: teaser show_edit_button: true # OR # image_style: medium # OR # responsive_image_style: resp_image variants: product: label: Artwork settings: modifier: artwork attributes: "class=\"shadow-bottom\"" media_library: definition: image_style: large fields: image: type: image configuration: config: config_key: config_value ......... Let’s break this down:
allow_token: true (V2) With allow_token, you can allow token for any existing settings.

allow_expose: true (V2) With allow_expose enabled you can expose this setting directly to a field storage. The same works allow_variant_expose for variants. After enabling, a drop-down with allowed settings appears during field generation if the field type matches to the settings type.

group (V2) New setting type group. You can define every form element as container, fieldset, container as group_type. This works also with field_group form elements like horizontal_tabs. With the group key you can define your parent group.

checkbox => checkboxes The checkbox setting type is renamed to checkboxes.

radios New setting type radios.

colorwidget (V2) New setting type colorwidget. Install colorwidget

coloriswidget (V2) New setting type coloriswidget. Install coloriswidget

media library (V2) New setting type media library. Install first: media_library_form_element

allow_variant_token If you set allow_variant_token to true, a "Variant token" field appears under the variant select dropdown. You can specify a token (e.g. [node:field_variant:value]) to bind the variant selection to an entity field.

List of setting types Each setting type is a plugin, so you can easily add your own settings type. The following setting types are supported right now:


* textfield
* number
* attributes
* token
* checkbox
* checkboxes
* radio
* select
* url
* group
* media_library
* colorwidget
* coloriswidget

This module works with ui_patterns:1.1

Assign setting values to variants:
You can assign setting values to variants. So a variant is a configuration bundle. All settings with no value can still be configured under manage display or with Layout Builder.

You can also overwrite the setting configuration for each variant. Use `definition` key to adjust the setting definition.

Compatibilty
This works with all UI Patterns submodules and with ui_patterns_layout_builder

Great modules:

* Storybook for UI Patterns: Wingsuit
* Assign pattern to field: UI Patterns Field Formatters
* Use pattern as a block: Component blocks, version 1.2.0 or higher for UI Patterns Settings support
* UI Pattern layout builder