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 roots.io 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.
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?
Advanced Gutenberg Block Development
By Julien Melissas
