Entity Reference as a
Component-based
Site Builder

Anton Staroverov  •  23. June 2017

UI Bricks:

State of
Layout Management
in Drupal

Anton Staroverov  •  DDD Lisbon  •  4. July 2018

Diamond Sponsor

Platinum Sponsors

Gold Sponsors

FOUNDER

PHP/Drupal

Python/Tornado

JS/Vue/React/
Angular

Pattern Lab/Fractal

highweb•tech

Anton Staroverov

@digitony_

CEO [new]

Design

Content

Marketing (SEO/SEM/SMM)

Integration
(CRM/ERP)

omni•tech

Anton Staroverov

@digitony_

#0
Problem

#1
​Layout-first

Region 2

Region 3

Region 1

Block Layout

( global )

Block
Layout

Header

Footer

Main

Field Layout

( per page type )

Header

Footer

Region 1

Region 2

Region 3

Field 2

Field 3

Field 1

Field
Layout

Layout Builder

( per page )

• Landing pages
• Marketing websites
• Ecommerce

#2
Content-first

• Content structure is more important than its layout.
   
• Content is represented by consequential blocks with information (like a story).
   
• Number of blocks and block types are not pre-defined.

Inline Entities

( Paragraphs, Custom Blocks, ECK, etc )

• Blogs
• Documentation
• Wiki

But ...

In 50% cases
there is no clear border between

Content and Layout.

... and there should be something
in between.

#3
In between

Image

Text

Text

Image

Image

Banner

Banner

?

Image

Image

Text

Text

Image

Text

Text

Text

Text

Text

?

• Sometimes we need to apply layout right inside the content.
   
• We don't want to rebuild the whole content just because of one micro-layout needed.
   
• And we don't want to have LB inside another LB.

Bricks

( micro-layouts for inline Entities )

Surprise:
You already know Bricks!

Menu Items

Taxonomy Terms

Webforms

Field Group

Bricks

#4
All together

Text

Image

Field 2

Field 3

Text

Header

Footer

1. Block Layout to manage global layout.
    
2. Field Layout to set layout per page type.
    
3. Layout Builder to customize page layout.
    
4. Inline Entities to represent the content.
    
5. Bricks to inject micro-layouts in the content.

• Multi-layout websites
• Advanced marketing
• Anything else!

#5
Even more

User

Show User profile using Card component

Page

Show Page teaser using same Card component

UI Patterns

+

Display Suite

Questions?

Not sure about
site architecture?

ask@highweb.tech

Get site architecture review for free

Going to build
brand new website?

collab@highweb.tech

Collaborate at hourly rate defined by you

Join the Bricks world:

drupal.org/project/bricks

uibricks.com
@uibricks  #uibricks

And help it grow:

Example

SITE
BUILDING

CONTENT
EDITING

THEMING

UI BRICKS

Drupal

Design Systems

Ecosystem

SEMANTIC CONTENT

BUILDING BLOCKS

REUSABLE PATTERNS

Entities

Entities:

Fields:

ECK

Paragraphs

Custom Blocks

Text

File

Link

Block Layout

Field Layout

Entity Reference

Bricks

View Modes

CSS Modifiers

•••

•••

Layout API

Twig

UI Patterns

Fractal

Pattern Lab

Pattern Libraries: