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.