Lightning is an open source starter kit and framework that helps developers tap into the richness of key D8 functionality, and build sites and experiences faster. At DrupalCon the team presented a session where we built an authoring experience live. This was the result of months of planning and practice. In this webinar, we will deconstruct each step in the build. The broad concept for the experience we built during the speedrun was a product launch site with social feeds, CRM connected lead capture forms, authoring workflows for content marketers and campaign specific landing pages. Speedrun steps that we will deconstruct: -Develop a brand specific theme based on bootstrap using a css styleguide -Configure a content approval workflow for content marketers and editors -Configure new panelizer layouts, set defaults for editors and long-scroll landing pages using panels -Create views-based social feeds, with curation based on a taxonomy

1. ©2016 Acquia Inc. — Confidential and Proprietary
D8 Lightning: Speedrun!
Build a Website with Panels, Media, and More in 45 Minutes
http://lightning.acquia.com

2. What is Lightning?

3. The Drupal 8 Distribution
for Enterprise Authoring

4. Enable developers to build great
enterprise authoring experiences
for their editorial teams with D8

5. Persona
Site
Builder
Persona
Content
Author
Persona
Site
Designer
Persona
Developer

6. Integrations TestingSecurity
Layout Workflow Preview Media

7. What is Speedrun?

9. 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

10. Time to Prepare!

11. 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

14. Media

15. 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

16. Workflow

17. 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

18. Layout

19. Layout control
Level 1 of 4: Drupal Core

20. 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

22. 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.)

23. 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!)

25. Layout control
Level 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

27. Layout control
Level 4 of 4: Panels IPE

28. Layout control
Level 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.

29. Live Demo in Progress

30. 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

31. ©2016 Acquia Inc. — Confidential and Proprietary
THANK YOU!
@djphenaproxima / phenaproxima
@balsama / balsama
@commercejohn / johnkennedy
http://lightning.acquia.com/
http://pokemondb.net/pokedex

32. ©2016 Acquia Inc. — Confidential and Proprietary
Extra

33. 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

34. 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)

35. 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

36. 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

37. 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

38. 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

39. 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

40. 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

41. 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

42. 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 DRAGONS
This is currently experimental