Creating Gutenberg Blocks Getting started → advanced!

About me - Eric Debelak •

I’m a Senior Developer/co-founder at 11 online

•

Started Block Party (https://wpblock.party) this year

•

I started in WordPress in 2004

•

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.

@EricDebelak [email protected]

What is Gutenberg? •

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/

@EricDebelak [email protected]

DEMO

Basics •

Gutenberg puts everything in the content - goodbye post meta!

•

Gutenberg uses attributes as settings on each block

Resources: https://wordpress.org/gutenberg/handbook/ https://github.com/WordPress/gutenberg

@EricDebelak [email protected]

Basics (continued) •

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

@EricDebelak [email protected]

Basics (continued) •

The attributes are saved as JSON in html comments

@EricDebelak [email protected]

Basics (continued) •

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

@EricDebelak [email protected]

Simple example

Register the block

Set default attributes

@EricDebelak [email protected]

Simple example (continued) Edit method

@EricDebelak [email protected]

Simple example (continued) Save method

@EricDebelak [email protected]

Getting Started •

Create Guten Block (https://github.com/ahmadawais/create-guten-block)

create-guten-block my-block
 cd my-block
 npm start

@EricDebelak [email protected]

What’s built in •

setAttributes - function to change a blocks attributes

•

focus & 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

@EricDebelak [email protected]

Adding More •

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. •

Example: Color Palette is a dropdown using Chrome Color Picker (no dropdowns in dropdowns!) @EricDebelak [email protected]

Going over simple examples •

https://github.com/11online/gutenberg-simple-statistics

•

https://github.com/11online/gutenberg-simple-weather-block

@EricDebelak [email protected]

Simple Statistics •

https://github.com/11online/gutenberg-simple-statistics

•

Goals: •

Allow users to input as many statistics as they wish

•

Have a simple count up animation

@EricDebelak [email protected]

Simple Statistics (continued) •

Strategies: •

Use an array of statistics to allow flexibility 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 @EricDebelak [email protected]

Simple Statistics (continued) •

Code walk through

•

https://github.com/11online/gutenberg-simple-statistics

@EricDebelak [email protected]

Simple Statistics (continued) •

•

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 flexibility 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 @EricDebelak [email protected]

Simple Weather Block •

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

@EricDebelak [email protected]

Simple Weather Block (continued) •

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 @EricDebelak [email protected]

Simple Weather Block (continued) •

Code walk through

•

https://github.com/11online/gutenberg-simple-weather-block

@EricDebelak [email protected]

Simple Weather Block (continued) •

•

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

@EricDebelak [email protected]

Gotchas •

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! Have to use hacky solutions like setTimeout

•

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 @EricDebelak [email protected]

Templates •

Gutenberg allows for templating as well - https://wordpress.org/ gutenberg/handbook/templates/

•

Add in attributes and defaults

•

And you can lock the templates

@EricDebelak [email protected]

QUESTIONS?

@EricDebelak [email protected]