Brian Coords — WCPHX24
Custom Block Development… Using Other Blocks
Brian Coords @ WCPHX 2024
Website: briancoords.com
YouTube: @briancoords
Twitter: @briancoords
Podcast: viewSource.fm
Brian Coords — WCPHX24
You have…
✅ Experience with WordPress development
✅ Experience with the block editor (Gutenberg)
✅ Basic comfort with JavaScript and build processes
✅ Local development environment with Node.js
Brian Coords — WCPHX24
Understanding InnerBlocks
“InnerBlocks exports a pair of components which can be used in block implementations to enable nested block content.”
Developer Handbook
Core Examples include Columns, List, Buttons, Galleries,
and Social Icons:
Brian Coords — WCPHX24
Block Patterns vs InnerBlocks
Block Patterns
✅ No extra code or custom plugin needed
✅ Can be built inside of WordPress
✅ Can be easily shared across sites
InnerBlocks
✅ Can use block supports (color, spacing, etc)
✅ Can enqueue custom CSS
✅ Can enqueue custom JavaScript
Brian Coords — WCPHX24
What We’re Building
Slide 1
CC0 licensed photo by Jennifer Bourn from the WordPress Photo Directory.
Slide 2
CC0 licensed photo by Michael Burridge from the WordPress Photo Directory.
Slide 3
CC0 licensed photo by vatoyiit from the WordPress Photo Directory.
Brian Coords — WCPHX24
Getting Started:
@wordpress/create-block
- Scaffold our block plugin
- CD into our new plugin directory
- Install our carousel dependency (Flickity)
- Start our build process
Brian Coords — WCPHX24
Let’s jump in…
To follow along in the code, visit https://github.com/bacoords/wcphx-2024
Brian Coords — WCPHX24
Thank you/Q&A.
👉 Slides and full code: briancoords.com/phoenix
👉 Find more tutorials on YouTube: youtube.com/@briancoords