Advanced Gutenberg Block Development

Julien Melissas

WordCamp AVL 2018

How do we feel?

• Excited?
• Scared?
• Confused?
• Are we getting ready?

Gutenberg Blocks

• Modular, independent
• Registered in JS
• Often built with React
• Static & Dynamic block types
• Multiple data sources: block settings, meta, etc.

Experience?

• Worked with React/JSX?
• Made an WP-API endpoint?
• Made a Gutenberg Block?
• Used Gutenberg in production?

Our Block (Reacts)

• Simple JSX Components
• Counter API endpoint and functionality
• Use wp-data to keep track of amount of reactions
• wceu_2018_gb_reacts key in the post meta

Our Process:

• Register Block
• Block attributes/meta fields
• Front end block output
• Build Dumb Components
• Register wp-data store
• Build API Endpoint
• Build Smart Components

Live Code

Repo Link

https://github.com/zgordon/wceu-2018

(go to completed branch)

Thanks!

Any Questions?