©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder Unleash The Power
Join us forcontribution opportunities
Friday, April 12, 2019
Mentored Contributions
9:00-18:00Room: 602
First Time Contributor Workshop
GeneralContributions
9:00-12:00Room: 606
9:00-18:00Room: 6A
#DrupalContributions
What did you think?
Locate this session at the DrupalCon Seattle website:http://seattle2019.drupal.org/schedule
Take the Survey!https://www.surveymonkey.com/r/DrupalConSeattle
Ted BowmanSenior Software Engineer
@tedbow
• Maintainer of Settings Tray•Working on Layout Builder
Acquia: Drupal Acceleration Team- Formerly OCTO - Help push Drupal forward - API First Team - UX Team - Layout builder
- JSON API - Media Library - Security Issues - Lightning Distribution
Our Time Together• Background & Why Layout Builder • Layout Defaults(think Manage Display) • Layout Builder + Views = Power!
⏱~20 minutes
- 🤔 Questions❓ ⏱~10 minutes• Layout Overrides • Landing Pages
⏱~20 minutes
- 🤔 Questions❓ ⏱~10 minutes• What’s missing? What’s next? • Contrib Modules
⏱~20 minutes
- 🤔 Questions❓ ⏱~10 minutes
The Layout Initiative
©2018 Acquia Inc. — Confidential and Proprietary
Site builders and content authors need intuitive tools to build pages, change layouts, and add & rearrange blocks with live preview.
When Do They Need It?
©2018 Acquia Inc. — Confidential and Proprietary
When Do They Need It?
©2018 Acquia Inc. — Confidential and Proprietary
When They Install Drupal!
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
What Does It Do?
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
•Flexible Layout Builder (duh) •Previews in default theme
•Connects entity display to Views & other
blocks •Allows Per Entity Customization •Powerful Page Builder
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
When Can I Use It?
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
8.7.0 - 3 Weeks Away!
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
8.7.0 - 3 Weeks Away!
It’s Stable! 🎉
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Defaults: Content Templates
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Overrides: One-Off Layouts
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Landing Pages
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Landing Pages(really just overrides)
Demo
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Defaults: Content Templates
Example: Umami Recipes
Before
Before
After
After
Before
Before
After
After
Layout Defaults
Building Layouts With Sections
•Layouts are created by combing multiple sections
•Core provides 1 to 4 column sections
•Sections widths are configurable
•Allows creating complex layouts
Building Layouts With Sections
•Layouts are created by combing multiple sections
•Core provides 1 to 4 column sections
•Sections widths are configurable
•Allows creating complex layouts
Example: Radix Layout Module
Layout Builder
Building With Sections
Example: Umami Articles
Fields
Example: Umami Articles
Fields
Example: Umami Articles
Fields
View (block)
+
Fields
View (blocks)+
Fields
View (blocks)+
+Blocks
Layout Defaults + Views
Manage Display Block Layout
+
Block Configuration
+
Block Configuration
+
Without Layout Builder
–Multiple administration pages
–Multiple user permissions
–Visibility conditions
©2018 Acquia Inc. — Confidential and Proprietary
With Layout Builder
–One administration page
–One permission
–No visibility conditions(currently)
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Defaults: Content Templates
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Defaults: Content TemplatesDefaults: Content Templates
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Defaults: Content TemplatesDefaults: Content TemplatesBeyonds Nodes!
Layout Defaults-Usable on User, Terms, Media, etc.
-All Fieldable Entities (has Manage Display)
-All View modes
Example: Tags Page
- Simple View
-Overrides Term page by using taxonomy/term/% path (what?)
- Shows articles and recipes together
Current Umami Term Page
Recipes with tag
Recipes with tag
Articles with tag
Recipes with tag
Articles with tag
Related tags (used on same articles)
Recipes with tag
Articles with tag
Related tags (used on same articles)
Authors using tags
Authors using tags
Authors using tags
User’s Articles with tag
User’s Articles with tag
View
View
View
View
View
}}
Layout Builder
Layout Builder
Layout Defaults + Views + Contextual Filters
The Views!
©2018 Acquia Inc. — Confidential and Proprietary
•Simple View listing nodes
•1 View with 2 Displays
•Contextual Filter on Term ID
Needed to be exposed in Layout Builder
Articles with current tag for each author
Not using Layout builder?
Not using Layout builder?
Layout Builder can be used on all View Modes
`Layout Builder can be used on all View Modes
View: Content By Author & Term- Used on Term page
- Rendered by “Related” User View Mode
- 2 Contextual Filters
- User ID - Provided by Layout Builder context
- Term ID - Provided by URL argument
- Both use validation
Layout: “Related” View Mode- Can be used by Views and Entity Reference
field formatter
- Has “user” context that can be passed to Views
- Does not have “term” context.
Layout Builder: Term “Default” View Mode
Views: “Top Author”
Layout Builder: User
“Default” View Mode
Views: “Articles By Author(and Term)”
Layout Builder & Views: Nesting!
Layout Builder & Views: Nesting!- Layout Builder: Term “Default” View Mode
Layout Builder & Views: Nesting!- Layout Builder: Term “Default” View Mode- View: “Top Authors”
Layout Builder & Views: Nesting!- Layout Builder: Term “Default” View Mode- View: “Top Authors”- Layout Builder: User “Related” View Mode
Layout Builder & Views: Nesting!- Layout Builder: Term “Default” View Mode- View: “Top Authors”- Layout Builder: User “Related” View Mode- View: “Articles by Author and Term”
🤔Questions?Covered Not Covered Yet
• Defaults • Building with Sections • Layout Builder + Views
• Overrides(per entity layouts) • Landing pages • What’s missing? What’s next? • Translations • Contrib Modules
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Overrides: One-Off Layouts
@Todo Add Video Override_Simple
Simple Override Change
@Todo Add Video Override_Simple
Layout Overrides- Allows Individual entities(nodes, etc) to have
unique Layouts
- Only available for “Default” View Mode(not Teaser, etc)
- Starts from Bundle defaults but not synced
Layout Overrides- Stored as Layout Field (locked)
- Not deployed with Configuration Management
- Works with Content Moderation
Layout Overrides: Permissions- Configure any Layout
- 2 bundle level permissions
- Configure all items of Bundle (article, tags, etc.)
- Configure only all items the user can edit
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Custom Blocks(Inline Blocks)
Custom (Inline) Blocks- Allows Creating Custom Blocks inside Layouts
- Uses same blocks types as Custom Block library
- Inline Blocks are not available in Custom Block libraries
Example: Add A Recipe To An Article- Urgent request from client to promote a Recipe on a
related article - Client wants it yesterday
@Todo Add Video Override_Inline
@Todo Add Video Override_Inline
@Todo Add Video Override_Simple
Layout Override Adding An Inline Block
@Todo Add Video Override_Simple
New Custom Block Type
Example: Promote Viral Video
- A video of our recipe has just gone viral
- No Video Field on Recipe Content Type
- People will be bored with Video in 2 days
Warning: Experimental Media Library
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Landing Pages
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Landing Pages(really just overrides)
©2018 Acquia Inc. — Confidential and Proprietary
©2018 Acquia Inc. — Confidential and Proprietary
Creating the Umami Homepage
Existing Umami Homepage
Layout Builder: Landing Pages- Content Type with no fields
- Not deployable with Configuration Management
Landing Page As Content
🤔Questions?Covered Not Covered Yet
• Defaults • Building with Sections • Layout Builder + Views • Overrides(per entity layouts) • Landing pages
• What’s missing? What’s next? • Translations • Contrib Modules
What’s Next For Layout Builder?
©2018 Acquia Inc. — Confidential and Proprietary
Translated Layouts
–Translated Defaults
–Translated Overrides
–Synced Overrides
–Unsynced Overrides(different layouts per language)?
©2018 Acquia Inc. — Confidential and Proprietary
Translations: What Is Not Translatable?
– Inline Block Translations
–Custom Block Labels
©2018 Acquia Inc. — Confidential and Proprietary
Translations: What Works Now?
–Placing Translatable entities
–Views, Blocks, Field values + Labels
©2018 Acquia Inc. — Confidential and Proprietary
Translations: What Works Now?
–Example: http://lb/en/articles/dairy-free-and-delicious-milk-chocolate
©2018 Acquia Inc. — Confidential and Proprietary
Other Options?
–Block Layout Replacement
–Full page Layout Builder
–Configuration(Deployable) Pages
©2018 Acquia Inc. — Confidential and Proprietary
Contrib Modules
©2018 Acquia Inc. — Confidential and Proprietary
•Layout Builder Styles
•Layout Builder Restrictions
•Layout Builder Library
Contrib: Layout Builder Restrictions
–Allows restricting Blocks and Layouts
–Configurable per bundle per view mode
©2018 Acquia Inc. — Confidential and Proprietary
Contrib: Layout Builder Styles
–Allows restricting Blocks and Layouts
–Configurable per bundle per view mode
©2018 Acquia Inc. — Confidential and Proprietary
Contrib: Layout Builder Library
–Create & deploy pre-defined layouts
–Editors can pick from existing layouts
–Pre-defined Overrides©2018 Acquia Inc. — Confidential and Proprietary
Join us forcontribution opportunities
Friday, April 12, 2019
Mentored Contributions
9:00-18:00Room: 602
First Time Contributor Workshop
GeneralContributions
9:00-12:00Room: 606
9:00-18:00Room: 6A
#DrupalContributions
What did you think?
Locate this session at the DrupalCon Seattle website:http://seattle2019.drupal.org/schedule
Take the Survey!https://www.surveymonkey.com/r/DrupalConSeattle
🤔Questions?
Live Demo?
Mini-Panels W/ Layout Builder?
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Reusable Components
Layout Builder
©2018 Acquia Inc. — Confidential and Proprietary
Reusable Components(like Mini-Panels)
Accessibility
©2018 Acquia Inc. — Confidential and Proprietary
•Quick demo