Speedrun: Build a Website with Panels, Media, and More in 45 Minutes

©2016 Acquia Inc. — Confidential and Proprietary

D8 Lightning: Speedrun!Build a Website with Panels, Media, and More in 45 Minutes

http://lightning.acquia.com

What is Lightning?

The Drupal 8 Distribution for Enterprise Authoring

Enable developers to build great enterprise authoring experiences

for their editorial teams with D8

PersonaSite Builder

PersonaContent Author

PersonaSite Designer

PersonaDeveloper

Integrations TestingSecurity

Layout Workflow Preview Media

What is Speedrun?

Our site’s requirements● Store references to tweets, which

can be promoted to the front page● Ability to move content into

“needs review”● Authors and editors must be able to

control content layout

Time to Prepare!

Content modeling● Describe all the fields in each entity type● Describe relationships with other entities● Describe display configuration -- not design● What does the user see?● Refine iteratively alongside wireframes

Media

Media handling● Media Entity module defines an abstract entity type for

storing media● Consistent handling of social media and digital media● != File Entity, because media might not be a file● Media entities are standard content entities● Fieldable / Revisionable / Views integration

Workflow

Content workflow● Drupal’s default workflow is

published or unpublished● A boolean workflow doesn’t meet the

needs of editorial teams● Workbench Moderation lets you

configure permissions for transitions between arbitrary states

● Only transitions that CAN be applied will be offered

Layout

Layout controlLevel 1 of 4: Drupal Core

Layout control

Level 1 of 4: Drupal Core

● You can choose which fields to show, configure them and reorder them

● No concept of regions● If you need to lay things out, you probably

need themer help

Layout control

Level 2 of 4: Single layout

● Uses Panels, Panelizer, and Layout Plugin● Retains core functionality● Has concept of regions● Can display more than just entity fields● Don’t need a themer to make layout changes● Includes additional Panels-ey goodness (contexts, etc.)

Theme Wizardry: custom layouts● Layout Plugin: the standardized solution for custom layouts● Very familiar to D7 themers● At a minimum, layout plugins are YAML + Twig + CSS● In the simplest case, they’re a set of named regions● Because they are plugins, they can have logic behind them

(configurable layouts!)

Layout controlLevel 3 of 4: Multi-layout

● What’s better than one panelized layout? Many panelized layouts!● Choose one to be the default● Editors can choose a layout, or stick with the default● Changes will flow downstream● Still don’t need any help from a themer

Layout control

Level 4 of 4: Panels IPE

Layout controlLevel 4 of 4: Panels IPE

● Full drag and drop control● Begin from a preconfigured (possibly empty) layout and

customize it on a one-off basis● Instant preview of everything -- nearly WYSIWYG● STILL don’t need a themer!● And that, finally, is enough power.

Live Demo in Progress

What problems did we solve?● MEDIA: Media can be anything, can be embedded anywhere, can be molded

to fit business requirements

● LAYOUT: Layouts can be built visually by non-techs, and custom layouts can be used easily by authors

● WORKFLOW: Can build our own workflow according to business needs, and it must be followed

● PREVIEW: Can see exactly what a collection of changes will look like before the users do

©2016 Acquia Inc. — Confidential and Proprietary

THANK YOU!@djphenaproxima / phenaproxima

@balsama / balsama@commercejohn / johnkennedy

http://lightning.acquia.com/http://pokemondb.net/pokedex

©2016 Acquia Inc. — Confidential and Proprietary

Extra

Let’s build some stuff!!!● Article with a layout and embedded media● A training program, which can switch between

layouts● The home page (a full-bleed landing page with

completely arbitrary layout)● Promote a tweet to the home page

Theme Wizardry: full-bleed regions● Tricky to do in Drupal OOTB. How did we do it?● Created a new theme region that sits outside the main

page container● Created custom layouts that supported full-bleed

(bundled ones may not work)

Theme Wizardry: preprocess functions● Basically ring 0*; any sorcery is possible here● You can move content from one place to another● You can gather contextual information that is unavailable

to the template and use it to influence the output● Best used for slight, context-sensitive modifications (e.g.

adding a CSS class or style if a condition is true)

* https://en.wikipedia.org/wiki/Protection_ring

Lightning Media● Built on Media Entity and its related ecosystem● All media is generic and reusable, and supports arbitrary metadata● Reusable via the incredibly flexible Entity Browser module● Can embed any entity into rich text editors using Embed and Entity

Embed● Lightning provides sane default configuration for these modules, but

you can override

Example: Tweets● Need to store tweets for future reuse● Need to display tweets in a view● Need a way to mark choice tweets as

“promoted to front page”● Want to embed tweets into other content as

needed

Lightning Layout● Based on the best-of-breed layout solutions for Drupal (in our opinion)● Goal is to be intuitive and visual● Control of layout should be in the hands of authors● Built on top of a common layout system (Layout Plugin), slated for

core● Panelizer: create reusable layouts for entities in many different

contexts● Panels IPE: A visual layout builder with instant preview

Example: Landing Page + Panelizer Choices● Need to visually create attractive landing

pages from pre-built pieces● Certain content must support more than one

layout, the choice of which is up to authors● Need custom layouts in order to support

full-bleed pages

Lightning Workflow● Improves on Drupal’s editorial workflow process● Based upon work that is now in core● Define arbitrary “moderation states” and transitions

between them● Transitions are a true directional workflow, not just

publish/unpublish● Works with any kind of content entity

Example: Editorial Workflow● Blog content type● Must be submitted for legal review before

publication● Once in legal review, must be published or

sent back to draft

Lightning Preview● Based on core Workflow Initiative● Introduces the concept of workspaces● Works by separating all content entities into semi-isolated

silos● Conflicts can be tracked and resolved (soon)● Preview everything exactly as it will appear in the live site

HERE BE DRAGONSThis is currently experimental