Advanced Gutenberg Block Development

Julien Melissas

WordCamp AVL 2018

Hi! I'm JulienĀ šŸ¤“

Twitter: @JulienMelissas

Technical Director atĀ Craftpeak

I like...

  • Dogs
  • Motorcycling
  • Travel
  • Music
  • Cooking
  • Other Stuff

Most days I do...

  • Websites for craft breweries
  • WordPress Development: on the team and build custom themes/websites/web applications all day
  • JS Development

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.


  • 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

(go to completed branch)


Any Questions?

Advanced Gutenberg Block Development

By Julien Melissas

Advanced Gutenberg Block Development

  • 3,581