Building blocks of the building blocks
Developing with and on top of WordPress for over a decade, I’ve got used to its ways of solving and creating problems, PHP syntax, best practices and general way of thinking.
Introducing blocks in core created more problems than it has solved for me. First of all, this is not PHP. What the hook? Second, where are all the guides? There are all sorts of guides and tutorials for doing PHP stuff with WordPress. And yes, there are all sorts of guides and tutorials on doing almost the same thing with blocks. Where are the details, explanations? Am I expected to just know how things work when you mix React and PHP?
Anyway, I couldn’t find a tutorial for building with and on top of a block editor that is meant for PHP developers who are barely able to recognise React syntax when it bites them. So I digged and peeked wherever I could. Being in the WordPress documentation team for a long time taught me to always write things down when doing them for the first time.
So I did and this is where it got us.
Who is this for?
These tutorials are for WordPress PHP developers who know little to no React, have never built a block or perhaps have been already building with a block editor but curious to see if there’s another way of doing things.
What is expected in a development environment?
Requirements to follow tutorials are pretty standard for a developer today:
- A clean WordPress install
- Installed Node.js and npm CLI
- Installed WP CLI
I have a fresh WordPress install in my local environment with following setup:
- WordPress version: 5.4.2
- PHP version: 7.3.11
- WP-CLI version: 2.4.0
Table of Contents
1. Ways of building the block
In my attempt to learn how to properly build a block I found several different ways. I wouldn’t say any of these is better than the other but I’d say that some of these ways fit better for specific purposes than others.
Before we start
- WP-CLI scaffold – article
- @wordpress/create-block – article
- @webdevstudios/block – coming soon..
- wp-block-builder – coming soon..
- create-guten-block – coming soon..
- Advanced Custom Fields – coming soon..
- manually – coming soon..
2. Anatomy of a block
3. Show me your package and I’ll show you mine