Building Component Based Drupal Sites

Karl Kedrovsky
VML
karl.kedrovsky@vml.com
karl@kedrovsky.com
@karlkedrovsky
https://bit.ly/2I6BGZ4

Motivation

Component Based Design

Example

Example

Characteristics

  • Nested
  • Some Are For Content (Text, Image and Text)
  • Some Are For Layout (Row)
  • Some Are For Both (Section)

Goals

Content Managers

  • Easy to author
  • Choose, not create, layout
  • Hard to break the design
  • Use a minimum of tools

Developers

  • Leverage Drupal
  • Right Tool For The Job
  • Flexible

The Solution(s)

Entity Construction Kit, Inline Entity Form, and Bricks

Or

Paragraphs

Bricks

Entity Construction Kit

  • Create custom entities without code

Bricks

Inline Entity Form

  • Inline editing of referenced entities

Bricks

Bricks Module

  • Easily order and nest entity references
  • Lightweight - leverages existing Drupal tools
  • Flexible - use any entity type you want
  • Separates content entities and layout entities

Bricks

Content Managers

  • Familiar interface - just like menus and taxonomy
  • Easy mental mapping
  • Does not have to be concerned about page design
  • Inline Entity Form makes content authoring intuitive
  • More flexibility as compared to Paragraphs
  • Reusable across pages

Bricks

Developers

  • No custom code/modules
  • Components are as easy to create, manage, etc. as content types
  • Layout Discovery separates content from layout

Paragraphs

Paragraphs Module

  • Provides a new entity type (Paragraph)
  • Lets us create new Paragraph types
  • Nesting Paragraphs gives us an interface similar to Bricks and IEF

Paragraphs

Compared to Bricks

  • Easily order and nest Paragraphs (entity references)
  • Lightweight - leverages existing Drupal tools
  • Provides the custom entity out of the box
  • Paragraphs used for both content and layout

Paragraphs

Content Managers

  • Familiar interface - just like menus and taxonomy
  • Easy mental mapping
  • Does not have to be concerned about page design
  • Inline editing (like IEF) makes content authoring intuitive
  • Less flexible but more "guided" as compared to Bricks
  • Paragraphs are not meant to be reused across pages

Paragraphs

Developers

  • No custom code/modules
  • Paragraphs are as easy to create, manage, etc. as content types
  • Paragraphs are use for both content and layout

A Simple Example

Demo

Modules

  • Bricks
  • Entity Construction Kit (dev version)
  • Inline Entity Form
  • Layout Discovery (in core)
  • Layout Discovery Override
  • Paragraphs

Awesome Demo

Tips and Best Practices

Bricks

Design -> Drupal

Components -> Entities/Bricks

Variations -> View Modes

Layout -> Layout Discovery (or Bricks)

Paragraphs

Design -> Drupal

Components -> Paragraphs

Variations -> Classy Paragraphs or Custom Solution

Layout -> Paragraphs

New Entity/Paragraph or Variation/Classy Style?

  • Variations should be used for very similar things
  • Having fields unique to a variation is a "smell"
  • When in doubt use what make sense to the content manager

General Tips

  • Bricks can use any entity type but start with ECK
  • Default to using a Brick or Paragraph for everything
    • For Views use an entity or paragraph with a Views Reference Field field
    • Same can be done to embed blocks, users, etc.
  • For Bricks consider custom entities
  • Consider using Paragraphs to make editing complicated bricks easier

Resources

Thank You!

https://bit.ly/2I6BGZ4