Gutenberg Blocks

Welcome to our guide to the Gutenberg blocks landscape. If your new to Gutenberg blocks, or looking to explore the available Gutenberg blocks in core and 3rd party plugins, you’ve arrived at the right place.

What are Gutenberg Blocks?

Gutenberg Blocks are UX elements that can can be dropped into pages and posts in WordPress. Since Gutenberg began to be shipped in WordPress core around version 5.0 a lot of the focus of the core development of WordPress has centered around Gutenberg. This has resulted in Gutenberg maturing (though it is still young relative to other layout tools and compared to other parts of WordPress). As of WordPress version 5.9 released in early 2022, the much awaited “Site Editing” feature is now in core. This feature allows admin users in WordPress to edit site templates using the Gutenberg editor and an increasing selection of dynamic blocks used for layout and fetching dynamic content. As an example a new Navigation Block allows uses to build their header and footer templates with WordPress menu support by dragging in and configuring the Navigation Block.

The Emergence of Block Themes

A block theme uses blocks to setup templates instead of PHP templates. This is a new paradigm for how to render content in a theme. The major upside is that it can give more control to admin users (non-coders). It’s part of the larger concept of “democratization of the web” in the sense of enabling greater participate and more diversity of participation instead of having such a heavy reliance on coding and developers. Of course there is still a major role for developers, namely building the Gutenberg blocks so that users have a solid range of versatile and stylish blocks to work with then their building out themes.

This shift towards block themes is bleeding edge new, and it may take several years for the market to shift. However, adoption is already beginning and in 2022 the official WordPress theme Twenty Twenty Two provides a working example of a block theme that can be edited in what is now known simply as the Site Editor, it had previously been known as the FSE (Full Site Editor). Despite some significant objections from some users and developers, including theme developers, and the raising of valid concerns about the viability of this approach to theme building in the short-term, long-term it seems likely that block themes will be a bit of the WordPress future. Once the initial surprise wears off, a lot of users will begin to look for that ability to edit templates in the WordPress admin, a feature previously that was only available in certain page builders or themes, and wasn’t universal in how it worked or where it worked. Site Editor and block based themes aim to be more universal and once a user learns how to use these features they’ll feel at home editing nearly any site running a block based theme.

Using and Creating Block Types

One of the things we expect to see more developers working on and more site owners and users wanting, is unique and carefully thought out block types. A block type is often just called a “block” as in “this plugin has a great selection of blocks”. Technically however, plugin provide block types, and what you drop into your page is a block, or an instance of a block type. For example as I’m writing now I’m creating a Paragraph Block and when I end this paragraph and make another one, I’ll be dropping in another Paragraph Block. I can make an unlimited number of blocks, and they are sharing the same block type. Now what if I find myself wanting to display a quote? Well then hopefully there is a quote block (yes there is). In fact you’ll tend to find most common things you are familiar with already have a core block, or can be found in a free Gutenberg Block plugin. There is also an increasing number of premium block packages, as well as a lot of activity in the creation of block styles and block patterns.

These days everything is a block, a block here, a block there, a block everywhere! What about when your company or site has a very specific block type requirement that is important and you can’t find anything out there that really fits? This will often be a dynamic block, or it could just be a unique layout. Well, if you have the development capacity you can create a new block type. WordPress developers who are on the leading edge are increasingly familiar with the process of block creation and can built out entirely custom blocks fairly quickly using React JS and other modern tools that power Gutenberg blocks.

Best Core Gutenberg Blocks

How about a shout out to the humble Paragraph Block? It’s for words! Yay for words!

The heading block is also a great block. A common usage of it is to write or copy/paste text that you want as a heading, and then use the block switcher to change the block from a regular Paragraph Block into a Heading Block. What’s nice is you don’t really have to select the entire text, as long as the block is selected, you will be able to make the conversion and then choose between heading sizes and other options.

If you get nothing from the creation of Gutenberg other than paragraph blocks, heading blocks and image blocks, well, you’re missing out on another hundred blocks, but you have arguably gained something compared to the old text editor. I personally find that the Gutenberg blocks enable faster drafting of blog posts like this one. And when you go to edit existing content, again there is a time savings but it’s also easier to shift blocks around as well compared to having to precisely copy/paste like you would with a traditional editor.

Similar Posts