A Layout Paragraphs journey: Drag and dropping components in landing pages

on YouTube ↗37m

" summary

Project migrates Paragraphs to Layout Paragraphs v2 to give editors a drag-and-drop WYSIWYG editor while avoiding deep nesting and revision bloat. Implementation uses Layout API, enables the layout behavior on a container paragraph, and stores settings in third_party_settings (code must scan parents). It works but needs constraints: lock node form editing, whitelist paragraph types, handle editor z‑index/ajax and media‑in‑popup quirks, and a custom solution that switches responsive image styles via Slick to match column counts.

AI-written summary · about

" chapters (10)

1. 0:00Introduction and speaker background
2. 3:37Project challenges with paragraphs
3. 8:11Introducing Layout Paragraphs module
4. 12:28Technical setup and editor workflow
5. 18:52Responsive design and mobile handling
6. 24:27Common issues and workarounds
7. 28:17Component behavior and validation
8. 31:13Image format management
9. 33:47Advantages and client feedback
10. 35:52Q&A and closing remarks

" related talks

• 31mParagraphs Module: Bridging the gap between content entry and beautiful layouts!Jimmy Klatt, Jessica Larsen · MidCamp 2017
• 35mHow Content Editors Use the Layout Builder: What the User Research ShowsSuzanne Dergacheva · MidCamp 2020
• 19mLayout builder ecosystemBoyan Borisov · DrupalCon Amsterdam 2019
• 52mBootstrap ParagraphsJIM BIRCH · MidCamp 2018
• 42m"Site Building 2.0: How Layout Builder will change everything"Kris Vanderwater · Drupal Europe 2018
• 33mPower to the authors! Toward achieving fast, flexible visual content authoringRick Cecil · MidCamp 2018
• 21mMaking Drupal as easy to use as SquarespacePhilippe Von Bergen · DrupalCon Amsterdam 2019
• 22mSay Hello to Box, Flex and Stack: Layouts in the Component EraArtem Sapegin · React Boston 2019