How do I add styles to regions?

lolcode

9/2/23, 4:54 PM

In Drupal layout builder I may have a section with several drag and drop regions. Each region can contain multiple components (fields for example). I would like to add a style to the region - not the section or the component. EG. In the below picture I would like the editor to be able to add a red border to the drag and drop region containing Field 5 and Field 6.

I have looked at the Layout Styles module and it only seems to cover sections and components. Is there a solution in core (possibly an active patch) or contrib to allow the editor to control region styles?

0 + 0

layout-builder

Score:2

Drupal

Joseph

9/2/23, 6:58 PM

Layouts are just plugins that by default use \Drupal\Core\Layout\LayoutDefault as its implementation. The built-in two-column and three-column layouts extend from MultiWidthLayoutBase which extends from LayoutDefault. Their implementation is custom, allowing them to define that width distribution select whenever you use them.

You can use this same approach to add custom configuration to your layout, and allow a site-builder to customize it whenever they use it (like adding an input that accepts classes for a specific region). To do this, you'll need to do the following:

Define a class extending LayoutDefault.
Define your layout in .layouts.yml, with its class pointing your class in Step 1.
In this custom class, define the additional configuration properties and their form inputs for whatever you want configurable (e.g. add a textfield for adding classes for a specific region)
In the layout's twig, find and consume that property to customize the region (e.g. print the class)
Repeat 3 and 4 for other things you want configurable in the layout.

See https://www.drupal.org/docs/drupal-apis/layout-api/how-to-register-layouts#using-class-key for details on how to define a layout with custom configuration.

0 + 0

lolcode

9/2/23, 8:39 PM

Thank you for making this clear. I am a little disappointed to have to extend a class - not due to the up front work but since I see that this approach limits use of other contrib modules - many state that they don't work with custom layout plugins. Since targeting regions seems like a very generic use case do you know if there is any work in core to standardise a layout plugin extendable form and let contrib simply do a form alter?

Joseph

9/2/23, 8:50 PM

@lolcode There is a module called [Layout Custom Section Classes](https://www.drupal.org/project/layout_custom_section_classes). This module adds a textfield to add classes to the section (probably the module you were referring to when you said "not on the section"). However, the interesting part of this module is how it's able to add that textfield to _any_ layout, not just a single one. You can probably adapt the approach it took, add a textfield for each region, and make sure the textfield values make it into `region_attributes`. You'd only write this once and use on any layout from there.