layout builder seattle - drupalcon · 2019. 4. 23. · - api first team - ux team - layout builder...

©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


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?


When Do They Need It?


When They Install Drupal!

Layout Builder


Layout Builder


What Does It Do?

Layout Builder


•Flexible Layout Builder (duh) •Previews in default theme

•Connects entity display to Views & other

blocks •Allows Per Entity Customization •Powerful Page Builder

Layout Builder


Layout Builder


When Can I Use It?

Layout Builder


8.7.0 - 3 Weeks Away!

Layout Builder


8.7.0 - 3 Weeks Away!

It’s Stable! 🎉

Layout Builder


Layout Builder


Defaults: Content Templates

Layout Builder


Layout Builder


Overrides: One-Off Layouts

Layout Builder


Layout Builder


Landing Pages

Layout Builder


Landing Pages(really just overrides)

Demo


Layout Builder


Example: Umami Recipes

Before

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

Example: Radix Layout Module

Layout Builder

Building With Sections

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

+

Without Layout Builder

–Multiple administration pages

–Multiple user permissions

–Visibility conditions


With Layout Builder

–One administration page

–One permission

–No visibility conditions(currently)


Layout Builder


Layout Builder


Defaults: Content TemplatesDefaults: Content Templates

Layout Builder


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!


•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?

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


Layout Builder


Overrides: One-Off Layouts

@Todo Add Video Override_Simple

Simple Override Change

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


Layout Builder


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


Layout Override Adding An Inline Block

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


Layout Builder


Landing Pages

Layout Builder


Landing Pages(really just overrides)


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?


Translated Layouts

–Translated Defaults

–Translated Overrides

–Synced Overrides

–Unsynced Overrides(different layouts per language)?


Translations: What Is Not Translatable?

– Inline Block Translations

–Custom Block Labels


Translations: What Works Now?

–Placing Translatable entities

–Views, Blocks, Field values + Labels


Translations: What Works Now?

–Example: http://lb/en/articles/dairy-free-and-delicious-milk-chocolate


http://lb/en/articles/dairy-free-and-delicious-milk-chocolate



Other Options?

–Block Layout Replacement

–Full page Layout Builder

–Configuration(Deployable) Pages


Contrib Modules


•Layout Builder Styles

•Layout Builder Restrictions

•Layout Builder Library

Contrib: Layout Builder Restrictions

–Allows restricting Blocks and Layouts

–Configurable per bundle per view mode


Contrib: Layout Builder Styles

–Allows restricting Blocks and Layouts

–Configurable per bundle per view mode


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


Layout Builder


Reusable Components

Layout Builder


Reusable Components(like Mini-Panels)

Accessibility


•Quick demo

layout builder seattle - drupalcon · 2019. 4. 23. · - api first team - ux team - layout builder...

Documents