This is part three, of three, in a series on standardizing how we build this next generation of WordPress block themes to accompany the Full Site Editing effort.
Posts
Insights, thoughts, and tips on product, design, and development. Pick a topic and start exploring.
-
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.
-
How to build WordPress block templates
In this era of WordPress Block Themes, there are a number of familiar—yet very new—areas of theming that we need to get up to date with. One of those is the concept of block templates.
-
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.
-
How to build WordPress patterns
If you’re a theme or plugin developer in the page building ecosystem, now is a better time than ever to start capitalizing on arguably the most exciting addition to Gutenberg, since Gutenberg: patterns.
Let’s dive in and discover how to leverage the new Patterns API and build beautiful patterns.
-
Introducing the Iceberg markdown editor
I’d like to finally share with you a project I’ve been working on to make writing in WordPress fun again.
Introducing Iceberg.
The WordPress block editor is making considerable strides towards better enabling folks to build beautiful websites. But as a consequence to adding more controls, settings, and even blocks, the experience of writing and publishing content within WordPress has taken a hit.
That’s not to say I don’t love the direction WordPress is heading–I absolutely do. But rather that I feel there’s room for a tool to improve the writing experience within the block editor.
-
Building WordPress block variations
Block variations, a new method to extending the WordPress block editor, recently landed in WordPress 5.4. The newly introduced Block Variations API provides alternate configurations of a block that are selectable when a block is first added to a page.
Now block variations can be big deal, if properly adopted. It is important to note that block variations differ quite a bit from block style variations–and even block patterns.
-
Detective Wapuu
Ever glanced at a website and wondered if it was built with Gutenberg blocks? If so, you’re in luck. Nick Hamze, a prolific block builder connoisseur, has launched a new Chrome extension aimed at helping folks detect what blocks are being used on a website.
-
The future of WordPress page building
While the block editor absolutely leveled-up the WordPress publishing experience, building beautiful web pages is still quite a challenge. It’s like we’re handing folks the International Space Station LEGO set — without any sort of help to build it. Sure, the cleverest master builders will likely figure it out, but what about everyone else — the other 99%?
Now if that set came with four or five assembled “chunks” of the ISS, completing the build would be much simpler. Maybe even simple enough for that 99%.
Enter Gutenberg block patterns: thoughtful arrangements of blocks that deliver entire sections of a page, with just a click.
