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

▶
preprocessing paragraphs
SMART_READER_LITE
LIVE PREVIEW

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

Mar 25, 2023 408 likes •827 views

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

slide-1
SLIDE 1

PREPROCESSING PARAGRAPHS:

A BEGINNERS GUIDE

DRUPALCON SEATTLE WEDNESDAY 4:00-4:30PM ROOM 602-604

slide-2
SLIDE 2

LARRY WALANGITAN

Senior Developer at Chromatic
 @larrywalangitan

slide-3
SLIDE 3

CHROMATIC

https://chromatichq.com
 @chromatichq

slide-4
SLIDE 4

HTTPS://GIT.IO/fkf6Y

slide-5
SLIDE 5

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 fjles without running
  • ut of memory.
slide-6
SLIDE 6

PREREQUISITES

  • Familiar with:
  • Drupal 8
  • Twig
  • PHP
  • Paragraphs Module
slide-7
SLIDE 7

PARAGRAPHS

  • An entity with confjgurable fjelds.
  • Can have difgerent types
  • Also uses view modes
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10

USE CASE

slide-11
SLIDE 11

COMPONENT LIBRARY

slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14

PREPROCESSING

  • Data transformation
  • Separation of Concerns
  • Logic lives outside of the template
  • Customization - Render Arrays
slide-15
SLIDE 15

A PREPROCESSING RECIPE

slide-16
SLIDE 16

01 02 03 04

Each paragraph type is defjned in hook_theme. All preprocessing handled by a Class. Each paragraph type has a corresponding twig template. Each paragraph type has a corresponding method.

slide-17
SLIDE 17

HOOK_THEME: SETUP

  • Base hook
  • Variables
  • Path
slide-18
SLIDE 18

HOOK_THEME: SETUP

  • Example image
slide-19
SLIDE 19

HOOK_THEME: BASE HOOK

  • Base hooks - defjned 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.

slide-20
SLIDE 20

HOOK_THEME: VARIABLES

  • variables - an array of custom variables

and their default values. 
 


slide-21
SLIDE 21

HOOK_THEME: PATH

  • path - where a paragraph’s custom

template lives

slide-22
SLIDE 22

PREPROCESS CLASS

  • src/paragraphPreprocessor.php



 
 
 


slide-23
SLIDE 23

PREPROCESS METHOD

  • preprocessFoo
  • Retrieves data
  • Returns variables by reference for the

render array defjned in hook_theme

slide-24
SLIDE 24
slide-25
SLIDE 25

PARAGRAPH TEMPLATE

  • paragraph—foo.html.twig



 
 
 
 


slide-26
SLIDE 26

SERVICES.YML

  • Create a service: 





chromatic_paragraphs.paragraphs_preprocess

  • Calls ParagraphsPreprocess class
slide-27
SLIDE 27
slide-28
SLIDE 28

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.

slide-29
SLIDE 29
slide-30
SLIDE 30

NESTED ENTITIES

  • Retrieving data from entity references.
  • Steps:
  • 1. Load the referenced entity
  • 2. Return values
slide-31
SLIDE 31
slide-32
SLIDE 32

PUTTING IT ALL TOGETHER

slide-33
SLIDE 33

01 02 03 04

Each paragraph type is defjned in hook_theme. All preprocessing handled by a Class. Each paragraph type has a corresponding twig template. Each paragraph type has a corresponding method.

slide-34
SLIDE 34

WHEN IT ALL GOES WRONG

slide-35
SLIDE 35

DEBUGGING TOOLS

  • Module: Twig Vardumper
  • Symfony Component: var_dumper
slide-36
SLIDE 36
slide-37
SLIDE 37

WHY NOT IN THE THEME?

slide-38
SLIDE 38

01 02 03 04

All preprocessing happens in .theme Each paragraph type is defjned in hook_theme. Each paragraph type has a corresponding twig template. Each paragraph type has a corresponding template override function.

slide-39
SLIDE 39

QUESTIONS & ANSWERS

slide-40
SLIDE 40

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

slide-41
SLIDE 41

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