drupalcon 2019 - preprocessing paragraphs › sites › default › files...outcomes • preprocess...
TRANSCRIPT
![Page 1: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/1.jpg)
PREPROCESSING PARAGRAPHS:A BEGINNERS GUIDE
DRUPALCON SEATTLE WEDNESDAY 4:00-4:30PM ROOM 602-604
![Page 2: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/2.jpg)
LARRY WALANGITANSenior Developer at Chromatic
@larrywalangitan
![Page 5: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/5.jpg)
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 files without running out of memory.
![Page 6: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/6.jpg)
PREREQUISITES
•Familiar with:
•Drupal 8
•Twig
•PHP
•Paragraphs Module
![Page 7: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/7.jpg)
PARAGRAPHS
• An entity with configurable fields.
• Can have different types
• Also uses view modes
![Page 8: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/8.jpg)
![Page 9: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/9.jpg)
![Page 10: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/10.jpg)
USE CASE
![Page 11: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/11.jpg)
COMPONENT LIBRARY
![Page 12: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/12.jpg)
![Page 13: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/13.jpg)
![Page 14: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/14.jpg)
PREPROCESSING • Data transformation
• Separation of Concerns
• Logic lives outside of the template
• Customization - Render Arrays
![Page 15: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/15.jpg)
A PREPROCESSING RECIPE
![Page 16: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/16.jpg)
01 02
03 04
Each paragraph type is defined in hook_theme.
All preprocessing handled by a Class.
Each paragraph type has a corresponding twig template.
Each paragraph type has a corresponding method.
![Page 17: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/17.jpg)
HOOK_THEME: SETUP
• Base hook
• Variables
• Path
![Page 18: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/18.jpg)
HOOK_THEME: SETUP
• Example image
![Page 19: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/19.jpg)
HOOK_THEME: BASE HOOK• Base hooks - defined 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.
![Page 20: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/20.jpg)
HOOK_THEME: VARIABLES
• variables - an array of custom variables and their default values.
![Page 21: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/21.jpg)
HOOK_THEME: PATH
• path - where a paragraph’s custom template lives
![Page 22: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/22.jpg)
PREPROCESS CLASS• src/paragraphPreprocessor.php
![Page 23: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/23.jpg)
PREPROCESS METHOD
• preprocessFoo
• Retrieves data
• Returns variables by reference for the render array defined in hook_theme
![Page 24: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/24.jpg)
![Page 25: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/25.jpg)
PARAGRAPH TEMPLATE• paragraph—foo.html.twig
![Page 26: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/26.jpg)
SERVICES.YML
• Create a service: chromatic_paragraphs.paragraphs_preprocess
• Calls ParagraphsPreprocess class
![Page 27: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/27.jpg)
![Page 28: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/28.jpg)
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.
![Page 29: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/29.jpg)
![Page 30: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/30.jpg)
NESTED ENTITIES• Retrieving data from entity references.
• Steps:
1. Load the referenced entity
2. Return values
![Page 31: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/31.jpg)
![Page 32: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/32.jpg)
PUTTING IT ALL TOGETHER
![Page 33: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/33.jpg)
01 02
03 04
Each paragraph type is defined in hook_theme.
All preprocessing handled by a Class.
Each paragraph type has a corresponding twig template.
Each paragraph type has a corresponding method.
![Page 34: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/34.jpg)
WHEN IT ALL GOES WRONG
![Page 35: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/35.jpg)
DEBUGGING TOOLS
• Module: Twig Vardumper
• Symfony Component: var_dumper
![Page 36: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/36.jpg)
![Page 37: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/37.jpg)
WHY NOT IN THE THEME?
![Page 38: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/38.jpg)
01 02
03 04
All preprocessing happens in .theme
Each paragraph type is defined in hook_theme.
Each paragraph type has a corresponding twig template.
Each paragraph type has a corresponding template override function.
![Page 39: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/39.jpg)
QUESTIONS & ANSWERS
![Page 40: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/40.jpg)
Join us for contribution opportunities
Friday, April 12, 2019
Mentored
Contributions
9:00-18:00
Room: 602
First Time Contributor Workshop
General
Contributions
9:00-12:00
Room: 606
9:00-18:00
Room: 6A
#DrupalContributions
![Page 41: DrupalCon 2019 - Preprocessing Paragraphs › sites › default › files...OUTCOMES • Preprocess paragraphs and structure your preprocessing methods. • Create custom render arrays](https://reader033.vdocuments.net/reader033/viewer/2022053018/5f1dba887e29ce13285d176e/html5/thumbnails/41.jpg)
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