Creating Advanced Gutenberg Blocks

Slide 1

Slide 1 text

Slide 2

Slide 2 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • I’m a Senior Developer/co-founder at 11 online • Started Block Party (https://wpblock.party) this year • I ﬁrst tried WordPress in 2004, started using it more in 2006, started really developing for WordPress in 2013 • These days I work mostly in React.js on the front end and either python (Flask) or PHP (Lumen) on the backend. I also do some Android dev and, of course, WordPress. I started using React.js over 2 years ago. About me - Eric Debelak

Slide 3

Slide 3 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • New WordPress editor as of...? • A What You See Is What You Get (WYSIWYG) Experience • Content paradigm is BLOCKS! • Comes with simple blocks, but you can build custom blocks • Written in React.js - https://reactjs.org/ What is Gutenberg?

Slide 4

Slide 4 text

DEMO

Slide 5

Slide 5 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Gutenberg puts everything in the content - goodbye post meta! (with exceptions) • Gutenberg uses attributes as settings on each block Resources: https://wordpress.org/gutenberg/handbook/ https://github.com/WordPress/gutenberg Basics

Slide 6

Slide 6 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • When you register a block, you have an editor method and a save method • The save method takes the block attributes and saves as html in the post/ page content area Basics (continued)

Slide 7

Slide 7 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • The attributes are saved as JSON in html comments unless they are attached to an html element Basics (continued)

Slide 8

Slide 8 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • On the editor side, Gutenberg reads the attributes for each block, and then sets the editor method with those attributes • The editor method then allows users to interact with the block and change the attributes • The front end of the site just shows the html saved in the content Basics (continued)

Slide 9

Slide 9 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ Register the block Set default attributes Simple example

Slide 10

Slide 10 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ Edit method Simple example (continued)

Slide 11

Slide 11 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ Save method Simple example (continued)

Slide 12

Slide 12 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Gutenberg allows for templating as well - https://wordpress.org/ gutenberg/handbook/templates/ • Add in attributes and defaults • And you can lock the templates Templates

Slide 13

Slide 13 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Create Guten Block (https://github.com/ahmadawais/create-guten-block) Getting Started

Slide 14

Slide 14 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • setAttributes - function to change a blocks attributes • isSelected - see if the user has selected your block • Editor components: • Plain Text, Rich Text, Media Upload, Color Palette, Dropdown, Inner Blocks, Select Control, Toggle Control, and more. • Complete list - https://github.com/WordPress/gutenberg/tree/master/ components and https://github.com/WordPress/gutenberg/tree/master/ blocks What’s built in

Slide 15

Slide 15 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Need some help with your edit methods? • Node Package Manager - npm - https://www.npmjs.com/ • npm has 650,000 packages. • Very useful for extending default functionality. Adding More

Slide 16

Slide 16 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics • https://github.com/11online/gutenberg-simple-weather-block Going over simple examples

Slide 17

Slide 17 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics • Goals: • Allow users to input as many statistics as they wish • Have a simple count up animation Simple Statistics

Slide 18

Slide 18 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Strategies: • Use an array of statistics to allow ﬂexibility in the number of statistics • Since we don’t get JavaScript interactivity in our save method, we need another way to show the count up animation • We will use data attributes to save our Gutenberg attributes on each statistic • We’ll use a jQuery script to parse the attributes and start the animation Simple Statistics (continued)

Slide 19

Slide 19 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics Simple Statistics - src/block/block.js

Slide 20

Slide 20 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics Simple Statistics - src/block/block.js

Slide 21

Slide 21 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics Simple Statistics - src/block/block.js

Slide 22

Slide 22 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-statistics • Edit method Simple Statistics - src/block/block.js

Slide 23

Slide 23 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Edit method (continued) Simple Statistics - src/block/block.js

Slide 24

Slide 24 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Edit method (continued) Simple Statistics - src/block/block.js

Slide 25

Slide 25 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Edit method (continued) Simple Statistics - src/block/block.js

Slide 26

Slide 26 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Edit method (continued) Simple Statistics - src/block/block.js

Slide 27

Slide 27 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Edit method (continued) Simple Statistics - src/block/block.js

Slide 28

Slide 28 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Statistics - src/block/block.js

Slide 29

Slide 29 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Statistics - src/block/block.js

Slide 30

Slide 30 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Edit method (continued) Simple Statistics - src/block/block.js

Slide 31

Slide 31 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Statistics - src/block/block.js

Slide 32

Slide 32 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Statistics - src/block/block.js

Slide 33

Slide 33 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Goals: • Allow users to input as many statistics as they wish • Have a simple count up animation • Strategies: • Use an array of statistics to allow ﬂexibility in the number of statistics • Since we don’t get JavaScript interactivity in our save method, we need another way to show the count up animation • We will use data attributes to save our Gutenberg attributes on each statistic • We’ll use a jQuery script to parse the attributes and start the animation Simple Statistics (continued)

Slide 34

Slide 34 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • https://github.com/11online/gutenberg-simple-weather-block • Goals • Allow the users to globally save the Open Weather api key • Allow users to set their temperature units per weather block • Allow users to set the city per weather block Simple Weather Block

Slide 35

Slide 35 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Strategies • Use server side rendering so we don’t expose our api key • Save the api key on the wp_options table so all blocks have access to it • Use the inspector controls for the temperature unit • Use a React Component for the edit method so we have access to local state and the React Component lifecycle Simple Weather Block (continued)

Slide 36

Slide 36 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/init.php

Slide 37

Slide 37 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/init.php

Slide 38

Slide 38 text

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ Simple Weather Block - src/init.php