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