Drupal NYC Meetup @ NYU Stern - October 9 (https://www.meetup.com/it-IT/drupalnyc/events/265292536). This talk describes the experimental and unique approach of the ERL module, which couples the nested structure of Paragraphs entities with the flexibility of the Drupal 8 core Layout system, providing an elegant and interactive administrative UI. It has been examined basic and advanced D8 layouts, the advantages of the ERL module, and a real complex case in which it was successfully adopted.

1. Drupal NYC Meetup @ Oct 9th 2019
@reactfordrupal.co
"Entity Reference with Layout:
Integrating Paragraphs with Drupal 8's Layout System"
@Italo Mairo - www.italomairo.com

2. Drupal NYC Meetup @ Oct 9th 2019
@reactfordrupal.co
"Entity Reference with Layout:
Integrating Paragraphs with Drupal 8's Layout System"
@Italo Mairo - www.italomairo.com
This talk will describe the experimental and unique approach of the
ERL module, which couples the nested structure of Paragraphs
entities with the flexibility of the Drupal 8 core Layout system,
providing an elegant and interactive administrative UI.
We'll examine basic and advanced D8 layouts, the advantages of the
ERL module, and a real complex case in which it was successfully
adopted.

3. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Who I am … Italo Mairo
• Drupal Web Solutions Architect at the United Nations in NYC;
• Long standing (15+ years) experience in open-source Web solutions;
• Special interest on Web 2.0 GIS with (full and almost full) opesource Mapping
frameworks and Drupal (since v7) …
• creator of the Geofield Map for D8 and lead maintainer of the whole Drupal 8
Geofield Mapping stack (including Geofield, Leaflet, and Geocoder).
• You can learn more about me on my Linkedin profile
and at http://www.italomairo.com
Experienced Drupal developer and active contributor on Drupal.org (itamair)

4. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
"Entity Reference with Layout:
Integrating Paragraphs with D8's Layout System"
The Context
Building Advanced Drupal 8 web pages
with Complex Graphic Mockups
and Contents/Blocks Layouts

5. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Source: https://nicepage.com/doc/article/20348/web-design-3-0-when-your-web-design-really-matters
How Web Design as changed …

6. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Source: https://nicepage.com/doc/article/20348/web-design-3-0-when-your-web-design-really-matters
How Web Design as changed …

7. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Real use case
Andvanced Home Page Mockup
to reproduce into Drupal 8 Layout
Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
"Entity Reference with Layout:
Integrating Paragraphs with D8's Layout System"

8. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Traditional / Available Drupal 8 approaches to
Advanced Home Page Layouting & Theming
- Nested Paragraphs, with Paragraphs module
(contrib module)
and possible others contrib,
such as Boostrap Paragraphs;
Live Demo
- Bricks module (contrib module)
and D8 Layout API system (core);
Live demo
- D8 Layout API system and Layout Builder
(core modules);
Live demo

9. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Entity Reference with Layout
• created by Justin Toupin (justin2pin),
CEO of Aten Design Group
• entity_reference_layout on drupal.org
“Entity Reference with Layout empowers content creators to design
beautiful pages with structured content (aka Paragraphs). It borrows
concepts from other paragraphs-inspired modules like Bricks, and
provides authors with a way to visually manipulate referenced entities and
create unique page layouts. Entity Reference with Layout leverages
Drupal’s core Layout Discovery module.”

10. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Some Info Resources:
Drupal 8 Paragraphs + Layout Discovery (Aten Blog)
Drupal 8 Paragraphs + Layout Discovery (J.Toupin at Stanford WebCamp)
How is Entity Reference with Layout different from Layout Builder?
Entity Reference with Layout
Drupal Paragraphs plus easy Layout control.
The module is experimental and still under active development
(alpha state, but confidently usable, imo)
• entity_reference_layout on drupal.org
dependencies:
- drupal:paragraphs
- drupal:layout_discovery
- drupal:inline_entity_form

11. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Layouts are Used By
• Layout Builder (core)
• Bootstrap Layouts (contrib)
• Bricks (contrib)
• … a number of other modules
Layouts in Drupal 8
A Layout consists of:
• Template with regions (yaml file)
• Library (CSS + Javascript)
• Layout Plugin
JS
CSS
@credits: Justin Toupin

12. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Typical case of Home Page nested Paragraphs Types

13. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Layouting with Entity Reference with Layout
We need to:
a. choose the paragraphs you want
available for your field reference
(the Paragraphs Type option)

14. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Layouting with Entity Reference with Layout
We need to:
a. choose the paragraphs you want
available for your field reference
(the Paragraphs Type option)
b.choose the paragraph you want to
associate with layouts (the Layout
Bundles options).
c. choose the Allowed Layouts,
among the found in the application
(Layout Discovery) , that should be
available in the Erl widget.

15. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Continous Integration with Layouting Solutions - How To?

16. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Continous Integration with Layouting Solutions - How To?
Drupal 8 Configurations Syncronization cannot
be applied to replicate local page Layout
settings into Dev and Production environments.
All Drupal 8 Layout techniques (Paragraphs,
Bricks, Layout Builder) are acting on specific
entities formatters/renderers.

17. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Working solution tested:
• Default Content for D8 module,
with Better Normalizers and Default Content Extra modules.
• Default Content Deploy module (depends from Default Content)
Solution not tested (may/should work):
• Deploy module,
Might be implemented Versioning and Transfer/Deploy of Content.
Continous Integration with Layouting Solutions
Configuration synchronization for nodes utilizing Layout Builder
ERL compatibility with Default Content for D8 module
Some Related issues:

18. Drupal NYC Meetup - 9th Oct 2019 - Entity Reference with Layout: Integrating Paragraphs with D8's Layout System (@Italo Mairo - www.italomairo.com )
Thaaannnnks!
… and Happy Layouting
with Drupal 8