Have a better logic for merging layout builder style options instead of overriding them

Problem/Motivation

layout_builder.style.options.LAYOUT_NAME config entities are a great approach allowing developers to customize the options on layout sections. However, adding new options with classes will override the classes of other options, where the only classes kept will be the classes of the latest option in the yaml.

Steps to reproduce

• Modify the layout_builder.style.options.bs_1col.yml file as follows
  

  name: bs_1col
  label: 'One column'
  type: section
  style_options:
    vlb_title:
      field_type: textfield
      label: 'Section title'
      description: 'Add title for the section.'
      group: vlb_default
      default_value: ''
      required: false
      sync_with_advanced: false
      use_with_advanced: true
      size: 30
      maxlength: 225
    vlb_width:
      field_type: radios
      label: Width
      group: vlb_default
      required: true
      sync_with_advanced: true
      use_with_advanced: false
      status:
        invisible:
          selector_tag: ':input'
          selector_attribute: name
          selector_value: 'vlb_default[vlb_use_advanced]'
          status: checked
          value: true
      default_value: full
      options:
        -
          value: tiny
          label: Tiny
          classes:
            col-md-4: col-md-4
            offset-md-4: offset-md-4
            col-sm-8: col-sm-8
            offset-sm-2: offset-sm-2
          layout:
            wrapper: div
            classes:
              col-md-4: col-md-4
              offset-md-4: offset-md-4
              col-sm-8: col-sm-8
              offset-sm-2: offset-sm-2
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
        -
          value: narrow
          label: Narrow
          classes:
            col-md-6: col-md-6
            offset-md-3: offset-md-3
            col-sm-10: col-sm-10
            offset-sm-1: offset-sm-1
          layout:
            wrapper: div
            classes:
              col-md-6: col-md-6
              offset-md-3: offset-md-3
              col-sm-10: col-sm-10
              offset-sm-1: offset-sm-1
              add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
        -
          value: medium
          label: Medium
          classes:
            col-md-8: col-md-8
            offset-md-2: offset-md-2
          layout:
            wrapper: div
            classes:
              col-md-8: col-md-8
              offset-md-2: offset-md-2
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
        -
          value: wide
          label: Wide
          classes:
            col-md-10: col-md-10
            offset-md-1: offset-md-1
          layout:
            wrapper: div
            classes:
              col-md-10: col-md-10
              offset-md-1: offset-md-1
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
        -
          value: full
          label: 'Full width'
          classes:
            col-12: col-12
          layout:
            wrapper: div
            classes:
              col-12: col-12
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
        -
          value: edge2edge
          label: 'Edge to Edge'
          classes:
            col-12: col-12
            bg-edge2edge: bg-edge2edge
          layout:
            wrapper: div
            classes:
              col-12: col-12
              bg-edge2edge: bg-edge2edge
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
    vlb_vertical_padding:
      field_type: radios
      label: 'Vertical padding'
      group: vlb_default
      required: true
      sync_with_advanced: true
      use_with_advanced: true
      status:
        invisible:
          selector_tag: ':input'
          selector_attribute: name
          selector_value: 'vlb_default[vlb_use_advanced]'
          status: checked
          value: true
      default_value: padding_x4
      options:
        -
          value: no_padding
          label: 'No padding'
          classes: {  }
          layout:
            wrapper: div
            classes: {  }
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
        -
          value: padding_x1
          label: 'Padding x1'
          classes:
            py-1: py-1
          layout:
            wrapper: div
            classes:
              py-1: py-1
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
        -
          value: padding_x2
          label: 'Padding x2'
          classes:
            py-2: py-2
          layout:
            wrapper: div
            classes:
              py-2: py-2
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
        -
          value: padding_x3
          label: 'Padding x3'
          classes:
            py-3: py-3
          layout:
            wrapper: div
            classes:
              py-3: py-3
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
        -
          value: padding_x4
          label: 'Padding x4'
          classes:
            py-4: py-4
          layout:
            wrapper: div
            classes:
              py-4: py-4
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
        -
          value: padding_x5
          label: 'Padding x5'
          classes:
            py-5: py-5
          layout:
            wrapper: div
            classes:
              py-5: py-5
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
    vlb_collapsed:
      field_type: radios
      label: Collapse
      group: vlb_default
      required: false
      default_value: no_collapse
      sync_with_advanced: true
      use_with_advanced: true
      options:
        -
          value: no_collapse
          label: 'No'
          classes: {  }
          layout:
            wrapper: div
            classes: {  }
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
        -
          value: collapse
          label: 'yes'
          classes:
            collapse: collapse
          layout:
            wrapper: div
            classes:
              collapse: collapse
            add_layout_class: 1
            attributes: ''
          sync_layout_classes: 1
    vlb_gutter:
      field_type: radios
      label: Gutter
      group: vlb_default
      required: true
      sync_with_advanced: false
      use_with_advanced: true
      default_value: 1
      options:
        -
          value: 0
          label: 'No Gutter'
          classes: {  }
          add_layout_classes: 0
        -
          value: 1
          label: 'With Gutter'
          classes:
            container: container
          add_layout_classes: 0
    vlb_background_color:
      field_type: radios
      label: 'Background color'
      group: vlb_default
      required: false
      sync_with_advanced: false
      use_with_advanced: true
      default_value: _none
      options: null
      options_source_config: varbase_layout_builder.settings
      options_source_schema: '|'
      options_source_map: background_colors
    vlb_background_media:
      field_type: media_library
      label: 'Background media'
      group: vlb_default
      default_value: null
      cardinality: 1
      required: false
      sync_with_advanced: false
      use_with_advanced: true
      allowed_bundles:
        - image
        - video
        - remote_video
      view_mode: background_media
    vlb_background_edge2edge:
      field_type: checkbox
      label: 'Edge to Edge Background'
      group: vlb_default
      required: false
      sync_with_advanced: false
      use_with_advanced: true
      default_value: 1
    vlb_classes:
      field_type: textfield
      label: Classes
      description: 'Customize the styling by adding CSS classes. Separate multiple classes by spaces.'
      group: vlb_default
      default_value: ''
      required: false
      sync_with_advanced: false
      use_with_advanced: true
      size: 30
      maxlength: 228
    vlb_use_advanced:
      field_type: checkbox
      label: 'Use advanced instead'
      group: vlb_default
      required: false
      default_value: 0
  langcode: es
  

• Import configuration
• In the layout builder interface, set the 1 column layout on a section within a node. Update the options and save the design.
• The collapse class option will be set, while the padding option will be ignored

Proposed resolution

Merge the layout settings in the varbase_layout_builder_preprocess_layout() function.

Remaining tasks

Review and test.

User interface changes

None.

API changes

None.

Data model changes

None.