Rich Tabor

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.

rich.blog

Jul 27, 2021

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.

rich.blog

1 reply

Jul 20, 2021

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?

rich.blog

Jul 14, 2021

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.

rich.blog

3 replies

Jul 7, 2021

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.

rich.blog

2 replies

Jul 1, 2021

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.

rich.blog

1 reply

Oct 28, 2020

Tabor and Gutenberg + WordPress 5.0

rich.blog

2 replies

Nov 19, 2018

Introducing Block Gallery

It’s no secret that I’m a huge proponent of Gutenberg, the new block editor to be released next month in WordPress 5.0. Ever since WordCamp US last year, I’ve been deep into all things Gutenberg, wrapping my head around block development and working on supporting the new editor in all my themes.

rich.blog

11 replies

Oct 30, 2018

Block Unit Test

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 block — is no small task. As a founder of a pretty awesome WordPress theme shop with over 20 active themes, I needed to employ a fast-paced methodology to testing, preparing my WordPress themes for Gutenberg. The Block Unit Test WordPress Plugin is built just for that purpose: to easily prepare WordPress themes for Gutenberg.

rich.blog

8 replies

Jun 26, 2018

The ultimate guide to WordPress color palettes

While there is no shortage of articles published about adding general support for a theme’s color palette within the Gutenberg editor, I’m going to focus on the color class changes deployed in Gutenberg 2.8.

Gutenberg includes a default color palette component for blocks to utilize, although it’s relatively easy for a WordPress theme to provide a more suitable palette to empower users.

rich.blog

24 replies

May 23, 2018

The Future of WordPress Themes

A couple weeks ago, I took the plunge and activated Gutenberg on my personal blog. There were a few quirks here and there, but for the most part, migrating to the new Gutenberg block editor has been a pleasant experience. Want to try out Gutenberg my theme + my theme?

rich.blog

1 reply

May 21, 2018

Deploying the Block Editor

This morning I deployed the Gutenberg block editor, the upcoming block-based editor for WordPress core, on this blog — and guess what? My website didn’t implode and disappear into the abyss! While the migration was not completely clean cut, the operation was pretty smooth.

Here’s what went down on my journey migrating richtabor.com to use the Gutenberg block editor.

rich.blog

18 replies

Apr 26, 2018

A space for blocks

As I mentioned last week in my 2017 Year in Review post, I’ve been learning quite a lot about how WordPress themes will interface with Gutenberg and developing Gutenberg blocks myself. Sure, there are a number of unknowns surrounding the project, but if you’re still worried about the pending release of WordPress 5.0 and Gutenberg, now is a better time than ever to start educating yourself.

I had the idea for a content spacer block as I was having a tough time creating ample spacing between even the simplest Gutenberg blocks. So I built the GutenKit Spacer Block, a nifty block plugin for Gutenberg that lets you easily add white space between content blocks.

rich.blog

2 replies

Jan 23, 2018

How to add WordPress theme styles to Gutenberg

In a couple months or so, Gutenberg will revolutionize WordPress publishing as we know it. It’ll finally bring a much-needed standardized content creation experience to WordPress. There’s just one small caveat. Innovation can’t happen without WordPress theme developers committing to the Gutenberg experience.

If Gutenberg will become the de facto editing experience for the average WordPress user, why not make it the best experience possible?

So after an inspiring trip to Nashville for WCUS, I decided to jump on the Gutenberg ship myself and start styling the upcoming editor within my latest WordPress theme, Tabor.

rich.blog

40 replies

Dec 19, 2017