1 of 25

Start using the Emerging Layout Builder�Ecosystem

September 12, 2019

2 of 25

Overview

  • Instant introduction to Layout Builder
  • Key modules
  • Panels + Layout Builder
  • Other layout building systems
  • Gotchas!
  • Under the hood
  • Paragraphs has an ecosystem, too
  • Q&A

​

2

3 of 25

  • André Angelantoni is the principal of PerformantLabs.com, a Drupal agency in San Francisco, clients have includes Tesla, CBS Interactive, DocuSign, Robert Half Corporate, Goldman Prize and more
  • Sponsoring Layout Builder Kit, Campaign Kit, Payment Stripe; founding member of the Drupal Quality Initiative
  • Adam Gregory, long-time Drupal developer and Certified Back-End Developer

3

Who Is Presenting

4 of 25

  • Layout Builder is a souped-up Panels...Display Suite!
  • You can create rigid layouts that content editors can't change or layouts completely editable by content editors—or somewhere in between.
  • https://www.drupal.org/docs/8/core/modules/layout-builder/layout-builder-overview

​

4

Instant Introduction to Layout Builder

5 of 25

Key Modules

5

6 of 25

  • Layout Builder Asymmetric Translation
  • Layout Library
  • Layout Builder Kit
  • Layout Builder Modal
  • Layout Builder Restrictions
  • Block Blacklist
  • Layout Builder Styles
  • Dynamic Layouts
  • Entity Browser Block

6

Key Modules

7 of 25

  • Allows you to have different layouts for different languages.
  • This capability will eventually be in core.
  • https://www.drupal.org/project/layout_builder_at
  • Make a library of layouts for content editors.
  • https://www.drupal.org/project/layout_library

7

Layout Builder Asymmetric Translation

Layout Library

8 of 25

  • Common components including: Rich Text, Image, Icon, Tab and Video.
  • Image Component includes a text overlay and uses image styles.
  • Icon Component places icon on left or right and has a link:

​

8

Layout Builder Kit #1

Links�Behind�These

9 of 25

  • Tab Component allows you to add Rich Text or module, system and custom blocks.
  • All components descend from LBKBaseComponent—a place to put common logic that all components inherit
  • Test at Simplytest.me

​

9

Layout Builder Kit #2

10 of 25

  • Configure blocks in a modal dialog instead of the skinny dialog.
  • https://www.drupal.org/project/layout_builder_modal

10

Layout Builder Modal

Lots of space!

Instead of This

11 of 25

  • Simplify the cluttered block choosing dialog.
  • https://www.drupal.org/project/layout_builder_�restrictions
  • Remove blocks from all over the system
  • https://www.drupal.org/project/block_blacklist

11

Layout Builder Restrictions

Often content editors don't need all these

Block Blacklist

12 of 25

  • Select a list of styles and apply to Layout Builder blocks and sections.
  • https://www.drupal.org/project/layout_builder_styles

12

Layout Builder Styles

13 of 25

  • Create reusable layouts. Usable by Display Suite, Panels and Layout Builder.
  • https://www.drupal.org/project/dynamic_layouts

13

Dynamic Layouts

14 of 25

  • This module provides a Block Plugin for every Entity Browser on your site.
  • Embed entities in different view modes, which can then be rendered anywhere that blocks are normally used (theme regions, Panels, Layout Builder, etc).
  • https://www.drupal.org/project/entity_browser_block

14

Entity Browser Block

15 of 25

Panels + Layout Builder

15

16 of 25

  • Create a layout builder variant�https://www.drupal.org/project/page_manager/issues/2960739

16

Layout Builder Everywhere?

17 of 25

Other Layout Building Systems

17

18 of 25

  • Integrates GridStack.js
  • Dynamic layout creator for magazine layout, and static float grid layout like Bootstrap, or Foundation, with drag-and-drop.

18

Gridstack

19 of 25

  • DX8 Page Editor and DX8 Site Builder
  • Has just been purchased by Acquia

​

19

Cohesiondx.com

20 of 25

  • https://www.sooperthemes.com/drupal-modules/glazed-builder

​

20

Glazed Builder

21 of 25

  • Can't handle translation without Layout Builder Asymmetric Translation
  • Each save multiple copies of revisions, the node_revisions table will explode.
    • Create a cron job to clean the old ones.

21

Gotchas!

22 of 25

Under the Hood

22

23 of 25

  1. In the node__layout_builder__layout field.
  2. Using the Field API
  3. Using the Entity API + Field API

23

Ways to Store Configuration

24 of 25

  • https://www.drupal.org/project/paragraphs_collection
  • https://www.drupal.org/project/classy_paragraphs
  • https://www.drupal.org/project/paragraphs_base
  • https://www.drupal.org/project/parade
  • https://www.drupal.org/project/iu_paragraphs
  • https://www.drupal.org/project/paragraphs_tabs
  • https://www.drupal.org/project/a11y_paragraphs_tabs
  • https://www.drupal.org/project/paragraph_blocks
    • Drupal Paragraph Blocks Demo (Apr 14, 2019)�https://www.youtube.com/watch?v=73uepd9CLFI

24

Paragraphs Has an Ecosystem, Too

25 of 25

Q&A

25