I recently built a new WordPress block to add a toggle between light and dark modes on your website, like I have on my blog.
Download on WordPress.org / View the code on Github
Blocks
Insights into creating and using blocks to build faster, better, and more beautiful WordPress websites.
-
-
Composing with patterns
It’s no secret that I’m a fan of WordPress patterns.
The ability to design a part of a site with a bunch of blocks and have it persist—whether synced or not—across my site, or shared across most others, is quite a powerful idea.
While they’re great, I feel there’s more potential to unlock with patterns, especially if we consider them as sections to compose pages with, not just groups of blocks.
Think of a site’s hierarchy: A site is made up of pages, which are composed of patterns, which consist of blocks—essentially, data objects. If patterns and blocks represent differing levels of hierarchy, why are they currently treated the same in the WordPress editing experience?
So let’s explore.
One idea is to treat patterns as a higher-order experience, where invoking a site’s pattern library zooms out the canvas to provide a bird’s-eye view, enabling you to compose with patterns, like this:
-
A new block: Cards
I recently built a fun new WordPress block to add collection of “cards” to my blog, as seen on my home page.
This block is technically two blocks: a “Cards” block and a singular “Card” block, which is repeated—reminiscent of the WordPress Buttons block. Even now, I find it incredibly helpful to look at the source code for official WordPress blocks, which has all the tried-and-true methods for just about any type of block you’re looking to build next. Don’t reinvent, iterate.
The block is dynamic, which means the block content is not stored statically in the post content, but rather rendered server-side. I could’ve done it static as well, but dynamic blocks are simple and fun to build—especially using the render file, which I don’t think many folks know about yet.
Now there is some opinionated styling—color variables in particular may not map to your theme—but you can change colors with the typical block style controls.
You can download the block from Github. I’ll consider uploading it to the official Block Directory after I tidy it up a bit.
-
Let’s build more blocks
I like this idea shared by Matias Ventura, centered on making it easier to introduce standalone blocks to WordPress via the Block Directory. Leveraging the existing Gutenberg infrastructure and contributor base, allows for significantly more collaboration, which would lead to a more diverse collection of high-quality, endorsed blocks for everyone.
Scrolling text, link cards, icons, dark mode toggles—the list goes on of interesting blocks that would be great if served at the quality threshold of core blocks.
The blocks in WordPress core are best-in-class. I’m looking forward to discovering others in the Block Directory that share the same DNA as these.
What do you think?
-
Build blocks with AI
I made this video to showcase building a dynamic Gutenberg block with the help of artificial intelligence using ChatGPT.
I run through how to scaffold a block using the wordpress/create-block package, structuring a dynamic block, building the block, and using ChatGPT to write an accompanying PHP function.
-
All my blocks
It’s long overdue, but I’ve recently set up a richtabor/blocks repository on Github that links to the source code for the WordPress blocks that I currently have published — including a few that are yet to be available on WordPress.org.
Every single block I’ve added, I built out of a need of my own. I wanted to be able to add a simple publishing checklist to posts, so I created the Todo List block. And I like to leave editor notes throughout my posts with the Markdown comment block, so I don’t forget things.
-
Publishing checklists with the todo block
Do you publish online? If so, this one is for you.
I’ll show you how I created a publishing checklist that is automatically added to the top of every post I draft, to ensure I follow my publishing workflow. This way, before I hit that ominous blue publish button, I know if each publishing task is properly accounted for.
-
I made a todo list block
I’m currently full on in the process of building a full site editing Block Theme to replace my blog’s current theme, Tabor. While diving into this project I’ve explored a few areas where I can improve my personal publishing flow.
The first was bringing editor comments into Gutenberg with my Markdown Comment block, and today I am releasing a second in that same vein: the Todo List block.
-
Adding block style variations with javascript
Extending the editor with block styles is a quick way to add, or remove, styling defaults to any Gutenberg block.
Among adding block patterns and variations, block styles are a clever way to standardize creative elements of a site running on Gutenberg. I suspect that in time, block styles will become a core component of block themes, alongside block patterns, as they both enable creativity and flare.
And while it is relatively simple to add block styles using PHP, removing them is not quite as easy—especially block styles added by WordPress core (or any added client-side).
Enter Javascript… and I promise, it’s not as daunting as you might think. This article is one of a series of posts I’ve shared since I’ve started diving into building a full site editing block theme for my blog.
-
Publishing blocks to the block directory
I know I’ve said this before, but building Gutenberg blocks has honestly never been easier. Better tools, more detailed documentation, and clearer examples are finally here – paving the way for developers to quickly dive into the art of block building, and in particular, building block plugins.
So what’s the big deal about block plugins?
-
How to build WordPress block plugins
While I’ve long been a fan of block collections, most notably with CoBlocks, I do see immense value in block plugins for use within the WordPress Block Directory. Quickly searching for and installing a block right from within the Block Library is quite a clever and empowering experience — one that I believe will eventually become the de facto way to discover blocks.
So let’s jump into what makes a Gutenberg block plugin different, and how they will change the landscape of WordPress editing as we know it today.
-
A block for markdown comments
I made a new block plugin for adding markdown comments that only display while editing a post with Gutenberg. Last week, while editing an upcoming article all about block plugins and the WordPress block directory, I wanted to add persistent notes and reminders within my post content – but didn’t find a proper solution. So naturally, I hit the ground running and pushed out a new block to the WordPress Block Directory to do just that—aptly called the Markdown Comment block.
-
A primer on WordPress full site editing
The next big shift for WordPress, nearly as monumental as the block editor itself, is a concept known as full site editing.
Full site editing (FSE) is very much still experimental, but the concepts are clearly in view. Imagine being able to change your site’s header, footer, single, and even archive templates, with minimal effort-all within the block editor. That’s the promise behind full site editing.
Diving in a bit deeper you’ll see the nature of a WordPress theme changes quite significantly with the introduction of full site editing. Let’s jump in and uncover everything you need to know about full site editing.
-
Previewing block styles and transforms
There’s no doubt that Gutenberg block styles and transforms are quite interesting and fun.
I like that you may change the look and feel of a block with a click or two. And on the engineering side, it’s remarkably easy to extend any block with both styles and transforms. However, what I’m not particularly fond of, is the user experience surrounding both block styles and transforms.
-
Adding gradients to your WordPress theme
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 with some finesse, block editor gradients could be much more purposeful by using the editor’s color palette instead.
Let’s dive in and explore how it’s done.
