Layout Section Classes

Summary

This module gives you the ability to define a list of classes and labels that will be available for selection on each section of a layout in layout builder. To enable this feature, simply add the list of classes to your layout plugin:

landing_one_column:
  label: One column
  category: Landing page layouts
  template: layouts/landing-pages/landing-one-column
  classes:
    style:
      label: 'Style'
      multiple: true
      required: false
      options:
        'background--primary-light': 'Light background'
        'background--wave-dark background--primary-light': 'Wave background'
      description: 'Select the visual style for this region.'
      region_classes:
        'background--primary-light':
          content: 'this-class-ends-up-on-the-content-region-for-this-style'
    spacing:
      label: 'Spacing'
      multiple: false
      required: true
      default: 'section--bottom-l section--top-l'
      options:
        'section--bottom-l section--top-l': 'Standard'
        'section--bottom-s section--top-s': 'Tight'
      description: 'Select the spacing that will be applied to this region.'
  regions:
    content:
      label: Content

A layout definition like the above produces a layout form that looks like:

You may choose to:

• Allow multiple or single classes for each group of styles.
• Optionally enforce if a selection is required or not for each group of styles.
• Optionally provide a default value for each group of styles.
• Associate a class with classes on the regions inside the layout

The simplest definition possible would look something like:

landing_one_column:
...
  classes:
    my_set_of_classes:
      options:
        'foo': 'Foo classes'
        'bar baz': 'Bar and baz classes'
...

Reusing definitions

You can define a reference using the & symbol, e.g. this at the top of your file defines a 'spacing' variant.

spacing: &spacing
  label: 'Spacing'
  require: true
  default: 'section'
  options:
    'section--no-padding': 'None'
    'section--half-padding': 'Small'
    'section': 'Large'

Then you can use that in your definitions like so:

one_column:
  label: One column
  category: Layouts
  template: layouts/one-column
  classes:
    spacing:
      <<: *spacing

Similar modules

This module is slightly different to Layout Builder Styles in that:

• It does not use additional configuration to define the styles/classes that are selectable by users.
• It does not provide any features for block template suggestions.
• It does not require the user provide their own plugin class for their layouts.
• It will not work if a layout has already provided it's own custom plugin class.

If you require those features, please have a look at the above module.