Paragraphs + Layout Discovery in Drupal 8

If you use the Paragraphs module and wish there was a way to more easily control the layout of referenced paragraphs on a particular node, this might be just what you were looking for. Entity Reference with Layout (ERL), a new module for Drupal 8, combines structured content (a la Paragraphs) with expressive layout control (a la Layout Discovery in core). Now you can quickly add new sections without leaving the content edit screen, choose from available layouts, add text or media to specific regions, drag them around, edit them, delete them, add more, and so on. The experience is easy-to-use, fast, and expressive.

In this session, we’ll run through a live demo of how to install, configure and use ERL. We'll talk about ideal use cases, how ERL differs from Layout Builder in core, and the kinds of factors that might make it a good fit for your project. Finally, we’ll talk through road map of future releases and features we’d like to see added.

Transcript

1. Paragraphs + Layout Discovery in Drupal 8 JUSTIN TOUPIN
2. Justin Toupin CEO
3. @atendesign aten.io
4. Work That
 Matters
5. Work That
 Matters
6. We are collaborative, design driven, and flexible.
7. Paragraphs + Layout Discovery in Drupal 8 Expressive authoring with structured content.
8. • Paragraphs & Structured Content • Drupal 8 Layout API • Entity Reference with Layout Module What We’ll Cover Today
9. • Site Builder • Developer (custom modules, front-end, whatever) • Content Editor • Project Manager • Designer • Other How would you describe yourself?
10. Structured Content With Drupal 8 Paragraphs
11. Fieldable Entities
12. Title Body Image Author
13. Fieldable Entities • Define whatever type of content you want (blog, article, page, etc.) • Add whatever fields you want (text, images, geodata, address, etc.) • Incredibly flexible • Highly structured
14. Why Fieldable Entities Matter • Maintainability • Separate Content from Presentation • Future Migrations • Create Once Publish Everywhere (COPE) • Decoupled Applications and Native Apps • More…
15. Nested Fields
16. Nested Fields 
 or Fields 
 Within Fields
17. Drupal Paragraphs
24. Easily reorder items on a page.
27. Paragraphs are structured and VERY flexible.
28. …But Also Complicated
29. Paragraphs editing interface
34. Difficult Tradeoffs
35. We wanted structure, flexibility, and a more elegant authoring interface.
36. Layout 
 Discovery Drupal 8 Layout API
37. A Layout consists of: • Template with regions • Library (CSS + Javascript) • Layout Plugin Layouts in Drupal 8 JS CSS
38. Layouts are Used By • Layout Builder (core) • Bootstrap Layouts (contrib) • Bricks (contrib) • … a number of other modules
39. Must have: Nice to have: • Works with paragraphs • Inline creation / editing • Easily move paragraphs into regions Paragraphs + Layouts • Drag and drop • Editing looks like frontend • Advanced layout options
40. • Entity reference field • Extends Inline Entity Form • Of course, uses Layout API Entity Reference with Layout
41. Live Demo Entity Reference with Layout
42. http://atend8.ddev.local
43. Stock Drupal
44. Requirements • Install Drupal • Create Some Paragraphs (shortcut: drupal.org/project/stories) • Install Entity Reference with Layout • Install ERL Paragraphs (optional) • Install ERL Layouts (optional)
45. http://erl.ddev.local/
46. Resources • Download the module: aten.io/erl (redirects to drupal.org) • Paragraphs + Layout Blog Post: aten.io/paragraphs-with-layout • Structured Content Blog Post: aten.io/flexible-authoring
47. Justin Toupin justin@aten.io Thanks!
48. aten.io/erl123 @atendesign | aten.io SLIDES