Layout Builder in core - first impressions

Published May 28, 2019

I recently decided to begin rebuilding the various landing pages on DrupalEasy.com using Layout Builder, introduced as a stable module to Drupal 8.7 core. Prior to this, the various landing pages on the site had been built using Paragraphs module.

While I appreciate what Paragraphs module can do as a layout tools for individual entities, I learned the hard way that perhaps it isn't the best tool for the job of building landing pages. 

I've been keen to use Layout Builder for awhile, but also hesitant to make the switch. Layout Builder has (unstated) lofty goals - to be the de-facto method of building landing pages in Drupal. I'll be perfectly happy if I didn't have to use Paragraphs or Panels in the future, instead relying on a core module.

I was biding my time until Layout Builder was stable in core, and now that it has come to pass, I wanted to take the time to rebuilding our landing pages while updating their content, layout, and styles just a bit.

Use layout builderFor starters, I created a new "Landing page" content type. Knowing that all of our landing pages will just be a series of blocks, I didn't add any fields - in fact, I removed the default "Body" field from the content type. I also created a default layout by selecting the "Use Layout Builder" checkbox on the content type's "Manage display" page. Knowing also that I may want to tweak the layout of some of our landing pages, I also selected the "Allow each content item to have its layout customized." (this effectively replaces the Panelizer contrib module). 

From there, I clicked the "Manage layout" button and set up a default layout for our landing pages. I'm not going to take you step-by-step through the process, but it's quite intuitive - and far better than any of the community's attempts to provide a browser-based layout tool in the past (no offense to anyone who has tried - it's a really difficult problem!)

After that, I created a new "Landing page" node and went directly to the "Layout" tab. The default layout I created in the previous step was ready for me to populate - but I was also able to tweak the layout for just this node as well. The process for adding content to the layout is easy primarily because it utilizes Drupal core's settings tray functionality. Existing blocks, custom blocks, as well as fields belonging to the content type are easily placed. I especially like the "Show content preview" checkbox for simplifying (and speeding up?) the interface during construction. 

Show content preview

My experience wasn't without hiccups, however. I did run into a couple of issues that I'd imagine a few other folks will stumble upon as well.

First, I tried adding a system Search block to one of my layouts. When I did this, I was unable to save the layout. I traced this issue to an issue related to rendering form blocks inside Layout Builder. At the time of writing this post, I didn't feel there was a mature enough patch yet, so I opted to remove the Search block for now. 

As this site is hosted on Pantheon, **and its codebase is built on https://github.com/pantheon-systems/example-drops-8-composer** , I ran into an issue where I was unable to add a new section to any layout. Turns out it was caused by this issue - luckily the fix for this was easy.

Finally, as I use the Bootstrap base theme for this site, when adding a bit of styling, I noticed that I had to override (using CSS) some of the breakpoints that Layout Builder uses by default. Specifically, Layout Builder has a 40em breakpoint, which doesn't align with Bootstrap's (default) 768px breakpoint. Not a big deal to do with a little bit of CSS (Sass), but important to note nonetheless. I used the following Sass to align layout builder's 2-column layout with the Bootstrap breakpoint:

.layout--twocol-section {
  &.layout--twocol-section--50-50 {
    > .layout__region--first,
    > .layout__region--second {
      @media #{$mobile} {
        flex: 0 1 100%;
      }
      @media #{$tablet} {
        flex: 0 1 50%;
      }
    }
  }
}

Overall, I'm really happy with Layout Builder so far - the resulting landing pages are easier to update - both from a content and a layout standpoint. It also provides a good deal of confidence knowing that I'm now using a core solution that will only improve with time.

Comments

I am going to be a bit more cautious in my acclaim for it. It's a nice addition, but it's not quite there yet. it works really well for simple use cases.

If you need to combine fields together into logical sections wrapped in containers or try to manage complex layouts you can't get as far without a lot of unneeded complexity. I would like to see a successor to the 'mini panels' feature set that allows groupings of fields or objects in sub-layouts that accepts contexts. At the very minimum, the ability to use something like field groups in layouts would be a solid short term solution.

Again, not crapping on it. it has its uses but for a lot of devs the annoyances and limitations don't end up making it faster than working with direct twig templates. If you are a site-builder with fairly basic requirements, go for it.

Submitted by Mike O'Hara (not verified) on Thu, 06/06/2019 - 07:55

Thanks a lot for this report. I've learned to be squeamish about Drupal innovations. They can take an incredible amount of time is something goes wrong. Layout Builder has incredible potential. Thanks so much for the intro!

Submitted by Harry Chittenden (not verified) on Thu, 06/06/2019 - 08:18

Is there an easy way of setting up config ignore for that content type for blocks placed by the user? Or is there another approach to handle the config issue of block placements and layout changes with Layout Builder?

Submitted by Shelane French (not verified) on Thu, 06/06/2019 - 16:49

Sign up to receive email notifications of whenever we publish a new blog post or quicktip!

Name
CAPTCHA