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
Looking at block editor documentation, we can see code examples in two syntaxes: ES5 and ESNext. The most important difference between the two in this context, besides the syntax itself, is that ES5 doesn’t need additional processing – it’s already readable by browser (it’s vanilla Javascript). ESNext syntax, on the other hand, needs additional processing. For this purpose it is common to use Babel as a plugin for Webpack.
Babel converts ESNext and JSX to JavaScript. Apart from using Webpack to run Babel tasks, we can (and should) use Webpack to compile our SCSS files into CSS and many other things. Dedicated tutorial will deal with how to set up these tools.
- 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
Coming soon..
3. Show me your package and I’ll show you mine
Coming soon…