Add Classes to Regions in Drupal Layout Builder

As discussed in the Styling Layout Builder Pages article, having separate class-list options for regions might be a good idea. This article will look at how to achieve this by patching the Layout Builder Section Classes module so that we get separate classes on regions. (And how you may want to use the new classes in your custom layout templates - coming soon). 

Patching Layout Custom Section Classes 

Luckily, someone had already had the same idea and created an issue and a merge request on Drupal.org. Since it was needing review, I decided to review the code and create a patch for others to use. It works well so, keep reading to find out how you too can use it.

I prefer to have a patch working with Composer since it will apply automatically on composer install, and there is no need to use an issue branch across multiple installations. To apply the patch add this to your composer.json

"patches": {
            "drupal/layout_custom_section_classes": {
                "separate \"class list\" for regions issues/3463172": "https://www.drupal.org/files/issues/2025-02-14/3463172-have-separate-class.patch"
            }
        },

Once added then run composer install. 

You need to have the cweagans/composer-patches package installed for adding patches. More detail on the full process can be found on Drupal.org.

If don't use Composer please check the to patch or not to patch Drupal article, where there are details on how to patch using the command line.

Run the database update

Once done, make sure you run the database updates; otherwise, when the updates do get run, they will overwrite any new region class lists you may have added.

The code works as advertised. It is backwards compatible, as it states in the issue, in that if you have already set up class lists, it will copy the original class list value to the new region class list text input on the configuration page for the module.

When to remove the Patch

Before we move on to look at the new feature in action, I would like to mention that on each update of the module, you should see if the issue has been merged, and if it has then you can remove the patch from the composer or in the case of manual patch application you don't need to do it.

Using the new functionality

Now you can set up region classes in the same manner as you did before.

• Check class-list.
• Add the region classes that are needed.

Image

Now when you go to modify the sections, you will have separate region classes availabe.

Image

Summary

In this article, we looked at a missing feature of the Layout Custom Section Classes module and how you can use a patch to provide the feature.

We first looked at how easy it is to apply the patch using composer, and then walked through what to do once the patch is applied, namely the need to run the database updates and, on each future update of the module, check if the patch is still needed.

Finally, we looked at the new feature in the UI and how the UX/DX is only enhanced by providing region-only classes.

In conclusion

This is a great enhancement as most of the time, the classes you will want to provide for the regions will be different from the sections.

In a follow-up, I will be writing about how we can use this new feature with custom templates. If you want to know when that will be live, be sure to sign up for the newsletter as I will be sharing the first drafts of the content in the newsletter.

The newsletter is about front-end development and design, and my ongoing learning and thoughts on the topic. Do it sign up below.

Thanks for reading. An 'til next time, seize the day!