Creating Advanced Gutenberg Blocks

@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

@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?

@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

@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)

@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)

@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)

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

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

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

@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

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

@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

@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

@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

@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

@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)

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

@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

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

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

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

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

@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)

@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

@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)

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

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

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • 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 • 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)

@EricDebelak [email protected] Slides: https://11online.us/advanced-gutenberg-blocks/ • Validation - Gutenberg revalidates both
the html and the attributes, so you need default attributes for everything • Arrays don’t allow for declaration of sub attributes • setAttributes has no callback! • Using out of the box components do not always look like the front end of the site will (PlainText, RichText) • Inner Blocks are really useful, but you can only use one per block Gotchas

QUESTIONS? @EricDebelak [email protected]

Creating Advanced Gutenberg Blocks

Creating Advanced Gutenberg Blocks

More Decks by Eric Debelak

Other Decks in Programming

Featured

Transcript