Building ACF blocks with block.json - Bill Erickson
ACF 6.0 includes a major improvement to the way blocks are built. It now supports using block.json, which aligns with WordPress core’s preferred method for block registration. Why is this…
Nick Diego: Exploring the Power of Block Variations – WordPress.tv
The block variation API allows you to create “variations” of existing blocks. A variation differs from the original block by a predefined set of attributes or inner blocks. When the variation block…
Learning to Build Block Editor Blocks, Part 1 | Tom McFarlin
I’m going to go write a series of articles in which I’ll share my experience as something like “a backend engineer is learning to build Block Editor blocks.”
How to Add Beautiful Gradient Presets to the Gutenberg Block Editor — Rich Tabor
Love ‘em or hate ‘em, gradients are here to stay. Especially now, as the WordPress block editor has a default mechanism to apply gradient styles throughout the editing experience. Out of the box, I don’t find the default gradient application experience particularly meaningful, as these presets are an assortment of trendy gradient styles presets. But …
We start off by finding out which block styles exists via .getBlockTypes(). This will dump it into the console: wp.domReady(() => { // find blocks styles wp.blo
How to package up your custom blocks in a plugin (Part 1)
Part 1 - Programmatically registering and configuring your Genesis custom blocks
In the last 3 months I've given upwards of a dozen presentations on building custom blocks with Genesis. Some of
How to Restrict Blocks to Specific Page Templates in the WordPress Gutenberg Editor
Note: The link to the full example is here. It’s a small plugin so feel free to download it, install it, and use it as you follow along with this guide. Why is this necessary? The Gutenberg editor in WordPress allows infinite possibilities for developers to provide custom block solutions for content editors. At some point…
How to Create Custom Gutenberg Blocks for WordPress - Intro
Let's start this new adventure and learn how to build custom Gutenberg Blocks. Let me know in the comments below if you wish to build a specific block type. ...
Create Style Variations for WordPress Gutenberg Blocks: Part 2
In the previous post, we learned all about block style variations and how they're used in the brand new WordPress 5.0 editor to switch between predefined styles easily.We'll take things a little...
The Gutenberg Component Autocomplete is an interesting one. You can use it to show a list of posts to choose from or any other list possible. In this tutorial we are going to learn the options for it and how […]
Enqueueing Scripts and Styles for Gutenberg Blocks
Before we start building new blocks for the Gutenberg editor we need to know how to properly enqueue scripts and styles. Thankfully WordPress makes this easy with two new hooks.
Welcome back to our series on creating custom blocks with the WordPress Gutenberg Block API. This tutorial is all about extending the random image block we created in the previous post. We got as...
Here we create a block that builds off what we've learned in parts 1. We want to create a Wordpress Gutenberg block that can be rich text editable by content editors.
Create Style Variations for WordPress Gutenberg Blocks: Part 1
Now is an exciting time for WordPress developers with the official release of version 5.0 just around the corner. This will mark the debut of the brand new editor, code-named Gutenberg. If you have...
Block templates are one of my favorite new features in Gutenberg. You can specify a list of blocks that automatically appear in the content editor, customize their attributes, and lock the template.
How To Get Started with Attributes in Gutenberg Blocks > Reaktiv Studios
Gutenberg attributes are one of the more powerful, yet less talked about features inside the new WordPress editor. A good understanding of how they work opens up all kinds of possibilities for your blocks. In this post, Jay Hoffmann discusses what they are, what they do, and how you can use them in your custom blocks.
Preparing WordPress themes for Gutenberg with the Block Unit Test — Rich Tabor
Listen to this article: There’s no better time to start exploring how each of our WordPress themes will interface with Gutenberg. So to help folks level-up their themes to support the new WordPress block editor, I built the Block Unit Test WordPress plugin. Testing every core block within Gutenberg — and every variation of every […]
How to enable Inner Blocks in your Gutenberg Block - Igor Benić
Inner Blocks are Gutenberg Blocks that allow inserting additional blocks within your own block. To understand it even better, imagine a shortcode that wraps the content. This content can then be shown or hidden. You can achieve that inside Gutenberg […]