Article
Announcing the New Lullabot.com
by Mike Herchel
How We Built This Site
A collection of articles, podcasts, modules, and other information about how we recreated Lullabot.com on Drupal 8 using the new core Layout Builder module.
Lullabot has been around the Drupal community since the beginning. Every few years, we rework our website using the latest tools available. In 2015, we built a fully-decoupled front end using Drupal 7 as the back end of the site. This year, we decided to recreate the site as a monolithic Drupal 8 site, exploiting the capabilities of the new Layout Builder functionality.
goals for this project
goals for this project
Give the editor total control of landing pages, with the ability to create new one-off landing pages on-demand.
Contribute back wherever possible, as Drupal modules or code shared in our public GitHub repo.
Build a site that is as simple and out-of-the-box as possible, to minimize maintenance requirements.
Articles, podcasts, and presentations
DrupalCon Seattle 2019
Is the Drupal 8’s new Layout Builder UI the holy grail of editor user experience? We had some successes and learned some lessons. We’ll talk about some of them.
Modules we contributed back
Block Blacklist
Remove unnecessary blocks from the block list for better system performance.
Views Layout
A simple module to arrange Views results in a grid defined by a layout.
Podcast
Create a Podcast feed for your site using Views.
Quicklink
Enable faster subsequent page-loads by prefetching in-viewport links during idle time.
Key Contributed Modules
- Layout Discovery Override - hide the core layouts so we can use custom ones.
- Entity Browser and Media Entity Browser - allowed us to create modal popups by snapping together a collection of views, forms, and upload widgets.
- Entity Browser Block - creates a block for every entity browser, making it usable in the Layout Builder.
- Chosen - turn any select list, like the list of classes we use in layouts, into a handy tags-style selector.
- DropzoneJS - an alternative to a simple file upload widget which allows us to drag and drop files into a landing zone.
- Inline Entity Form - allows us to embed one entity form inside another so we can create a referenced entity and select it in one step.
- Entity Embed - embed references to related content inside a WYSIWYG editor.
- Entity Usage - add a tab to each entity showing where it has been referenced by other content.
- Twig Tweak - provides additional Twig options and functions.
- Warmer - improve performance by warming the cache.
- Webform - create customized forms and manage submissions.
custom code examples
Block Dashboard
Creates a view that displays an overview of both reusable and nonreusable custom blocks, and where they are used.
Custom Layouts
Adds custom layouts to Layout Builder, which contain options to add css classes and titles to each section, also change some category names and block titles.
Entity Browser Block Layout
UX and CSS improvements to make it easier to use Entity Browser blocks in Layout Builder.
Ease of use
To enable our marketing team to easily build landing pages, we implemented Drupal’s new experimental Layout Builder module. This enables a slick drag-and-drop interface to quickly compose and control layouts and content.