After 5 years, my dream Drupal component workflow is finally here!

Brian Perry BadCamp October 17, 2020 http://bit.ly/bad-component AFTER 5 YEARS, MY DREAM DRUPAL COMPONENT WORKFLOW IS FINALLY HERE!

2

A D8 COMPONENTS HISTORY LESSON… Drupal 8 Twig Mapping DC New Orleans UI Patterns Layout Builder Component Blocks Nov 19, 2015 (!!!) ??? May 2016 January 2017 Nov 2017 Experimental July 2020 Goodbye PHP Template, hello Twig Experimenting with the power of include/extends (and later embed) Components module, meeting of the component minds. Map component data in the admin UI. Exciting new page building experience in Drupal, but how does it play with Components? Bridging the gap between UI Patterns and Layout Builder Goodbye PHP Template, hello Twig 3

OUR EXAMPLE TWIG COMPONENT

5

{{ title }} {{ platform }} {{ year }} {{ image }} {{ body }} {{ link }} 6

MAPPING DATA IN CODE

COMPONENT LIBRARY / PATTERN LAB 8

COMPONENTS MODULE Creates Twig namespaces to access templates in non-standard locations 9

INTEGRATING IN CODE {{ label }} {{ content.field_platform }} {{ content.field_image }} {{ content.field_year }} View mode: teaser {{ content.body }} {{ url }} 10

MAPPING IN TWIG PRESENTER TEMPLATE Drupal template references template in component library 11

MAPPING DATA IN THE ADMIN UI

UI PATTERNS MODULE Define and manage components in a way that Drupal understands • Define UI Patterns as Drupal Plugins • Configure data mappings in the UI • Optional Pattern Library page exposed in Drupal • Also allows Drupal to: • Preprocess patterns • Render patterns programmatically 13

{{ title }} {{ platform }} {{ image }} {{ year }} Pattern: container {{ body }} {{ link }} 14

15

UI PATTERNS VIEWS 16

17

UI PATTERNS PATTERN LAB Automatically create UI Patterns from your pattern library… really. • End result same as previous UI Patterns Example • No redundant ui_patterns.yml file necessary • Some limitations • Requires yml or json file with pattern data • Requires specific approach to nested components. 18

LAYOUT BUILDER

LAYOUTS {{ region: title }} {{ region: platform }} {{ region: image }} {{ region: year }} Layout: container {{ region: body }} {{ region: link }} 20

LAYOUTS AND LAYOUT BUILDER 21

LAYOUTS AND LAYOUT BUILDER Add ‘container’ section for teaser layout 22

COMPONENT BLOCKS Best of both worlds • Recently released (stable release, but early) • Exposes UI Patterns to Layout Builder • Sidesteps visual layout issues • Use any fields available to the entity, along with fixed inputs. 23

COMPONENT BLOCKS Add ‘container’ section for teaser layout 24

COMPONENT BLOCKS 25

COMPONENT BLOCKS 26

MY DREAM WORKFLOW, EVER CLOSER Component Blocks seems like the glue • Improve UI based component configuration process in Drupal • With specific focus on Layout Builder. • Make it easier to package, distribute and use individual components • Track evolution of Web Components • Evolve approaches allowing Drupal to automatically discover components • Keep building amazing looking component based sites using Drupal 27

SANDBOX REPO 28

SANDBOX REPO 29

Q&A Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com