Gutenberg Blocks – Page 2

Let’s begin with the understanding that you can not use regular JavaScript when creating blocks for Gutenberg. Well, you could try that but the code will be hardly readable. Believe me, I know what I’m talking about because I started learning blocks in 2019 with regular JavaScript without using what I am going to show you in this tutorial.

In this lesson we are about to create a project for our custom Gutenberg block and configure the development environment using @wordpress/scripts tool. This tool is what I use personally when I create any blocks either for my plugins or for my client projects.

In this tutorial we are about to learn how to work with WordPress block filters, blocks.registerBlockType in particular. This filter allows not only to change block attributes and their default values but also other block data like title, description etc.

Recently I was developing vertical alignment controls for my carousel block and decided to share the process with you. Especially since there is not a lot of information about vertical alignment, but tons of tutorials about wide and fullwidth alignment.

Here is how it looks:

The first time this tutorial was published back in the beginning of 2019, just after Gutenberg editor became the part of WordPress core.

A lot has been changed since then. Setting an icon for a block has become so much simpler.