Hello, Layout Builder!

Submitted by Kevin on Thu, 01/16/2020 - 18:52

In case you've been hiding under a rock for the last year (and I wouldn't blame you if you were), the hot new component being bundled with Drupal 8 is a built-in layout system called "Layout Builder".  For those who've always wanted magazine-like layouts without the overhead of a heavy third-party solution like Panels, this could be your dream come true.

If you've followed my blog and/or work in the past, you'll know that I've been a big proponent of Paragraphs, and I built out the Ivan Allen College of Liberal Arts' Drupal 8 infrastructure on Paragraphs.  That was not at all a bad decision at the time - I did start that work nearly five years ago in Drupal 7 (before Drupal 8 was even released) and Layout Builder itself did not become stable until late 2019.

With everyone talking about how cool Layout Builder is, I finally sat down at the start of this year and began trying to learn how it worked, so I could see how readily I could port over some of my existing Paragraphs based layouts.  I'd put a lot of time and effort into those layouts, and I really hoped I would not have to start over from scratch.

I have to say that I was genuinely surprised at how quick and easy the process turned out to be.  I originally thought might take me four to six months (assuming a normal workload of other job duties along the way) to work through learning Layout Builder and creating even a basic set of custom layout types.  Instead, I had an initial working prototype after about four afternoons!  It was far from complete at that point, and the road was definitely not always smooth as silk.  But, it helped tremendously to have already spent quality time learning about Twig, and all of my previous Drupal 8 development work made it a lot easier to hunt down solutions to the problems I encountered.  It also helped that I'd taken a very accessible and modular approach to my more complex Paragraphs based layouts, as that allowed me to heavily reuse pieces and parts that weren't directly dependent on Paragraphs.  For example, I reused most of my custom JavaScript for accordions, tab panels, and slide shows, with minimal modifications - mostly adjustments to account for class names being different under Layout Builder.

One small challenge that I gave myself, because I knew it would be the cleanest path forward in the long run, was to make this toolkit completely contained within a module.  I know this is a little different from the way many people are approaching Layout Builder as a component of a subtheme, but I have good reason for wanting a theme-independent, modular approach:  I have forty Drupal 8 sites already, many of which are using Paragraphs, and at least three have unique themes for one reason or another.  So, I want to be able to add my Layout Builder toolkit to all of those sites without having to manually shoehorn it into multiple existing themes.  Thus, an independent module-based toolkit is the only sensible way to go.

So far, I've gotten everything to work as part of a module, but there's a little more coding and configuration overhead due to the Drupal 8 template system not automatically scanning modules for Twig templates.  Seeing how well that approach is working, my vision is to eventually install my Layout Builder toolkit onto sites that already have Paragraphs in use and temporarily have both active while I recreate existing Paragraphs-based "landing" pages in Layout Builder.  I believe this will work, and if it does, it will make the transition minimally disruptive for our content managers and avoid having to do this work as a "major site upgrade" with all of the associated baggage and overhead.

I know I have a ways to go before I'll have a production-ready toolkit, but at the moment I have a dev site that looks and feels fairly stable and very outwardly similar to how the same site would look done in my Paragraphs toolkit.  Best of all, the amount of under-the-hood "wiring" is far, far less than I imagined, which means fewer things to possibly break, and a more inviting environment in which to consider adding more block based components to enhance the content editor's experience.

While I doubt any of the maintainers of Paragraphs will ever read this, I do want to offer them my thanks for a module that I've gotten a lot of mileage out of over the last five years.  Considering that Paragraphs really was never meant to manage layouts, I think it says a lot that it was able to support some pretty sophisticated layout design, and I think it still has a lot of utility for other purposes.  But, it's hard to argue with using a system that's built into Drupal and addresses some of the data efficiency issues that have begun cropping up on large sites that have tried to use Paragraphs for layout management.

So, if you haven't looked at Layout Builder yet, start reading up on it, as it's definitely the wave of the future.

P.S.: Layout Builder Modal is a great supplement to the built-in interface, and just had it's first official release, making it a lot easier to consider including on production level sites.