PREPROCESSING PARAGRAPHS: A BEGINNERS GUIDE DRUPALCON SEATTLE - PowerPoint PPT Presentation

PREPROCESSING PARAGRAPHS: A BEGINNERS GUIDE DRUPALCON SEATTLE WEDNESDAY 4:00-4:30PM ROOM 602-604

LARRY WALANGITAN Senior Developer at Chromatic 
 @larrywalangitan

CHROMATIC https://chromatichq.com 
 @chromatichq

HTTPS://GIT.IO/ fk f6Y

OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays and override twig templates. • Reference nested entities and pull data into paragraph twig templates. • Debug your preprocessing and twig fj les without running out of memory.

PREREQUISITES • Familiar with: • Drupal 8 • Twig • PHP • Paragraphs Module

PARAGRAPHS • An entity with con fj gurable fj elds. • Can have di fg erent types • Also uses view modes

USE CASE

COMPONENT LIBRARY

PREPROCESSING • Data transformation • Separation of Concerns • Logic lives outside of the template • Customization - Render Arrays

A PREPROCESSING RECIPE

01 02 Each paragraph type is All preprocessing de fj ned in handled by a Class . hook_theme . 03 04 Each paragraph type Each paragraph type has a corresponding has a corresponding twig template . method.

HOOK_THEME: SETUP • Base hook • Variables • Path

HOOK_THEME: SETUP • Example image

HOOK_THEME: BASE HOOK • Base hooks - de fj ned in another module’s hook_theme • paragraphs.module has a paragraph base hook 
 • Allows us to override and extend the base hook with our own custom variables.


 
 HOOK_THEME: VARIABLES • variables - an array of custom variables and their default values.

HOOK_THEME: PATH • path - where a paragraph’s custom template lives


 
 
 
 PREPROCESS CLASS • src/paragraphPreprocessor.php 


PREPROCESS METHOD • preprocessFoo • Retrieves data • Returns variables by reference for the render array de fj ned in hook_theme


 
 
 
 
 PARAGRAPH TEMPLATE • paragraph—foo.html.twig 



 SERVICES.YML • Create a service: 
 chromatic_paragraphs.paragraphs_preprocess • Calls ParagraphsPreprocess class


 TEMPLATE_PREPROCESS_PARAGRAPH__FOO • This function prepares variables for our paragraph__foo template . 
 paragraph—foo.html.twig • Use the new service to call our preprocessing method.

NESTED ENTITIES • Retrieving data from entity references. • Steps: 1. Load the referenced entity 2. Return values

PUTTING IT ALL TOGETHER

01 02 Each paragraph type is All preprocessing de fj ned in handled by a Class . hook_theme . 03 04 Each paragraph type Each paragraph type has a corresponding has a corresponding twig template . method.

WHEN IT ALL GOES WRONG

DEBUGGING TOOLS • Module: Twig Vardumper • Symfony Component: var_dumper

WHY NOT IN THE THEME?

01 02 Each paragraph type is All preprocessing de fj ned in happens in .theme hook_theme . Each paragraph type 03 04 Each paragraph type has a corresponding has a corresponding template override twig template . function .

QUESTIONS & ANSWERS

Join us for contribution opportunities Friday, April 12, 2019 Mentored First Time Contributor General Contributions Workshop Contributions 9:00-18:00 9:00-12:00 9:00-18:00 Room: 602 Room: 606 Room: 6A #DrupalContributions

What did you think? Locate this session at the DrupalCon Seattle website: https://events.drupal.org/seattle2019/sessions/preprocessing-paragraphs-beginners-guide Take the Survey! https://www.surveymonkey.com/r/DrupalConSeattle