Add [List String] Field type with multiple or single select option to layout builder styling options form widgets

After we have the feature
We are able to do the following for our custom layout styling options.

Example #1:

To show how these list string field type could be used.
If we wanted to have a custom Shadow styling options for sections or regions in sections.
Using the Bootstrap 4 Shadows classes

While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).

https://getbootstrap.com/docs/4.4/utilities/shadows/

• No shadow
• Small shadow
• Regular shadow
• Larger shadow

Let us add the following in the configuration

  vlb_shadows:
    field_type: list_string
    label: 'Shadows'
    description: 'While shadows on components are disabled by default in Bootstrap 4. This is only to test the List string select list to add shadows for example to the section. In Boostrap 4 you can be enabled via enable-shadows variable'
    group: vlb_default
    required: false
    multiple: false
    sync_with_advanced: false
    use_with_advanced: true
    default_value: null
    options:
        -
          value: shadow-none
          label: 'No shadow'
          classes:
            shadow-none: "shadow-none"
        -
          value: shadow-sm
          label: 'Small shadow'
          classes:
            shadow-sm: "shadow-sm"
        -
          value: shadow
          label: 'Regular shadow'
          classes:
            shadow: "shadow"
        -
          value: shadow-lg
          label: 'Larger shadow'
          classes:
            shadow-lg: "shadow-lg"

and we import the config to the active config.
Then when we edit the styling options we could see the following

In the Twig Template, we could add the following

{# When we do have vlb shadows options and we want to the shadow to the section. #}
{% if settings.vlb_section_config.vlb_shadows %}
  {% set attributes = attributes.addClass(settings.vlb_section_config.vlb_shadows) %}
{% endif %}

The resulting view could be as follows

Example #2:

Test Custom List String with multiple select options as ( Vertical Spacing )

When we have a look at the Bootstrap 4 Spacing documentation
https://getbootstrap.com/docs/4.4/utilities/spacing/
the list of options which could be used and added to "Classes" are too many
If we wanted to limit the editor to use a combination of classes to have Vertical Spacing section styling option
with better readable labels

Fewer options are better ( But for testing and the demo I'm listing big number of options )

5 or 10 Vertical Spacing could do a nice work, with some icons. But that could go with the Radios field type

The config for the field could look as

  vlb_vertical_spacing:
    field_type: list_string
    label: 'Vertical Spacing'
    description: 'Select your vertical spacing option'
    group: vlb_default
    required: false
    multiple: true
    sync_with_advanced: false
    use_with_advanced: true
    default_value: null
    options:
        -
          value: mt-0
          label: 'Margin top 0'
          classes:
            mt-0: "mt-0"
        -
          value: mt-1
          label: 'Margin top 1'
          classes:
            mt-1: "mt-1"
        -
          value: mt-2
          label: 'Margin top 2'
          classes:
            mt-2: "mt-2"
        -
          value: mt-3
          label: 'Margin top 3'
          classes:
            mt-3: "mt-3"
        -
          value: mt-4
          label: 'Margin top 4'
          classes:
            mt-4: "mt-4"
        -
          value: mt-5
          label: 'Margin top 5'
          classes:
            mt-5: "mt-5"
        -
          value: mt-auto
          label: 'Margin top auto'
          classes:
            mt-auto: "mt-auto"
        -
          value: mt-n1
          label: 'Margin top -1'
          classes:
            mt-n1: "mt-n1"
        -
          value: mt-n2
          label: 'Margin top -2'
          classes:
            mt-n2: "mt-n2"
        -
          value: mt-n3
          label: 'Margin top -3'
          classes:
            mt-n3: "mt-n3"
        -
          value: mt-n4
          label: 'Margin top -4'
          classes:
            mt-n4: "mt-n4"
        -
          value: mt-n5
          label: 'Margin top -5'
          classes:
            mt-n5: "mt-n5"
        -
          value: mb-0
          label: 'Margin bottom 0'
          classes:
            mb-0: "mb-0"
        -
          value: mb-1
          label: 'Margin bottom 1'
          classes:
            mb-1: "mb-1"
        -
          value: mb-2
          label: 'Margin bottom 2'
          classes:
            mb-2: "mb-2"
        -
          value: mb-3
          label: 'Margin bottom 3'
          classes:
            mb-3: "mb-3"
        -
          value: mb-4
          label: 'Margin bottom 4'
          classes:
            mb-4: "mb-4"
        -
          value: mb-5
          label: 'Margin bottom 5'
          classes:
            mb-5: "mb-5"
        -
          value: mb-auto
          label: 'Margin bottom auto'
          classes:
            mb-auto: "mb-auto"
        -
          value: mb-n1
          label: 'Margin bottom -1'
          classes:
            mb-n1: "mb-n1"
        -
          value: mb-n2
          label: 'Margin bottom -2'
          classes:
            mb-n2: "mb-n2"
        -
          value: mb-n3
          label: 'Margin bottom -3'
          classes:
            mb-n3: "mb-n3"
        -
          value: mb-n4
          label: 'Margin bottom -4'
          classes:
            mb-n4: "mb-n4"
        -
          value: mb-n5
          label: 'Margin bottom -5'
          classes:
            mb-n5: "mb-n5"
        -
          value: my-0
          label: 'Margin top and bottom 0'
          classes:
            my-0: "my-0"
        -
          value: my-1
          label: 'Margin top and bottom 1'
          classes:
            my-1: "my-1"
        -
          value: my-2
          label: 'Margin top and bottom 2'
          classes:
            my-2: "my-2"
        -
          value: my-3
          label: 'Margin top and bottom 3'
          classes:
            my-3: "my-3"
        -
          value: my-4
          label: 'Margin top and bottom 4'
          classes:
            my-4: "my-4"
        -
          value: my-5
          label: 'Margin top and bottom 5'
          classes:
            my-5: "my-5"
        -
          value: my-auto
          label: 'Margin top and bottom auto'
          classes:
            my-auto: "my-auto"
        -
          value: my-n1
          label: 'Margin top and bottom -1'
          classes:
            my-n1: "my-n1"
        -
          value: my-n2
          label: 'Margin top and bottom -2'
          classes:
            my-n2: "my-n2"
        -
          value: my-n3
          label: 'Margin top and bottom -3'
          classes:
            my-n3: "my-n3"
        -
          value: my-n4
          label: 'Margin top and bottom -4'
          classes:
            my-n4: "my-n4"
        -
          value: my-n5
          label: 'Margin top and bottom -5'
          classes:
            my-n5: "my-n5"
        -
          value: pt-0
          label: 'Padding top 0'
          classes:
            pt-0: "pt-0"
        -
          value: pt-1
          label: 'Padding top 1'
          classes:
            pt-1: "pt-1"
        -
          value: pt-2
          label: 'Padding top 2'
          classes:
            pt-2: "pt-2"
        -
          value: pt-3
          label: 'Padding top 3'
          classes:
            pt-3: "pt-3"
        -
          value: pt-4
          label: 'Padding top 4'
          classes:
            pt-4: "pt-4"
        -
          value: pt-5
          label: 'Padding top 5'
          classes:
            pt-5: "pt-5"
        -
          value: pt-auto
          label: 'Padding top auto'
          classes:
            pt-auto: "pt-auto"
        -
          value: pt-n1
          label: 'Padding top -1'
          classes:
            pt-n1: "pt-n1"
        -
          value: pt-n2
          label: 'Padding top -2'
          classes:
            pt-n2: "pt-n2"
        -
          value: pt-n3
          label: 'Padding top -3'
          classes:
            pt-n3: "pt-n3"
        -
          value: pt-n4
          label: 'Padding top -4'
          classes:
            pt-n4: "pt-n4"
        -
          value: pt-n5
          label: 'Padding top -5'
          classes:
            pt-n5: "pt-n5"
        -
          value: pb-0
          label: 'Padding bottom 0'
          classes:
            pb-0: "pb-0"
        -
          value: pb-1
          label: 'Padding bottom 1'
          classes:
            pb-1: "pb-1"
        -
          value: pb-2
          label: 'Padding bottom 2'
          classes:
            pb-2: "pb-2"
        -
          value: pb-3
          label: 'Padding bottom 3'
          classes:
            pb-3: "pb-3"
        -
          value: pb-4
          label: 'Padding bottom 4'
          classes:
            pb-4: "pb-4"
        -
          value: pb-5
          label: 'Padding bottom 5'
          classes:
            pb-5: "pb-5"
        -
          value: pb-auto
          label: 'Padding bottom auto'
          classes:
            pb-auto: "pb-auto"
        -
          value: pb-n1
          label: 'Padding bottom -1'
          classes:
            pb-n1: "pb-n1"
        -
          value: pb-n2
          label: 'Padding bottom -2'
          classes:
            pb-n2: "pb-n2"
        -
          value: pb-n3
          label: 'Padding bottom -3'
          classes:
            pb-n3: "pb-n3"
        -
          value: pb-n4
          label: 'Padding bottom -4'
          classes:
            pb-n4: "pb-n4"
        -
          value: pb-n5
          label: 'Padding bottom -5'
          classes:
            pb-n5: "pb-n5"
        -
          value: py-0
          label: 'Padding top and bottom 0'
          classes:
            py-0: "py-0"
        -
          value: py-1
          label: 'Padding top and bottom 1'
          classes:
            py-1: "py-1"
        -
          value: py-2
          label: 'Padding top and bottom 2'
          classes:
            py-2: "py-2"
        -
          value: py-3
          label: 'Padding top and bottom 3'
          classes:
            py-3: "py-3"
        -
          value: py-4
          label: 'Padding top and bottom 4'
          classes:
            py-4: "py-4"
        -
          value: py-5
          label: 'Padding top and bottom 5'
          classes:
            py-5: "py-5"
        -
          value: py-auto
          label: 'Padding top and bottom auto'
          classes:
            py-auto: "py-auto"
        -
          value: py-n1
          label: 'Padding top and bottom -1'
          classes:
            py-n1: "py-n1"
        -
          value: py-n2
          label: 'Padding top and bottom -2'
          classes:
            py-n2: "py-n2"
        -
          value: py-n3
          label: 'Padding top and bottom -3'
          classes:
            py-n3: "py-n3"
        -
          value: py-n4
          label: 'Padding top and bottom -4'
          classes:
            py-n4: "py-n4"
        -
          value: py-n5
          label: 'Padding top and bottom -5'
          classes:
            py-n5: "py-n5"

In TWIG Template we could add the following

{# When we do have vlb shadows options and we want to the shadow to the section. #}
{% if settings.vlb_section_config.vlb_shadows %}
  {% set attributes = attributes.addClass(settings.vlb_section_config.vlb_shadows) %}
{% endif %}

Example #3

You could add more classes for responsive or a key uuid class too

We can build Styling options by other ready classes as you can see in the following example

like a smart spacer options

...
...
   options:
        -
          value: smart-custom-spacer
          label: 'Smart custom spacer for options'
          classes:
            smart-custom-spacer: "smart-custom-spacer"
            my-5: "my-5"
            my-md-3: "my-md-3"
            my-xl-0: "my-xl-0"
            pr-auto: "pr-auto"
            pr-md-0: "pr-md-0"
            mt-md-n5: "mt-md-n5"
...
...