How to create your own custom WordPress Gutenberg block?

How to create your own custom WordPress Gutenberg block?

This is a detailed tutorial series covering how to create your own custom WordPress Gutenberg blocks. It’s for you who are a theme or plugin developer and are, like myself, frustrated with the lack of documentation.

What’s the latest version of Gutenberg for WordPress?

Gutenberg is still pretty new but is drastically changing and being improved. If you are finding this in the far future some code might be deprecated or replaced with better methods. This guide was written in and finalized in WordPress version 5.2.3 (end of year 2019). In the first parts we focus on the basics.

Do you need to be an expert to use Gutenberg?

As you probably know Gutenberg is based on React JS. This series is not a React tutorial either, and assumes basic knowledge of React and how it works. Again there’s no need to be an expert. As React has been around a while there are plenty of good tutorials, documentation, and resources dedicated to teach you React.

How do you change the color of a button in Gutenberg?

A $color_hover array, which maps the color name to the hover color hex value. The button block includes three “Block Styles” – Rounded, Outline, and Squared. You can switch between by clicking the “Change Block Type” button in the top left corner.

Where do I find the hex code in Gutenberg?

If a palette color was chosen it will store properties for hex code, palette slug, class name, and more. If a custom color was chosen the object will contain the hex code. The hex code is always found in the property color. And the class name, (only if a palette color was chosen) will be set in the property class.

Is there an organic profile block for Gutenberg?

Organic Themes has developed a custom Profile Block for Gutenberg using ES5 Javascript. Plus, we’re giving away the plugin, and showing you how to re-create it! Update: With the upcoming release of WordPress 5.0, we have recently updated the Organic Profile Block plugin and this tutorial for Gutenberg 4.2.0+ compatibility.

Which is the best way to learn Gutenberg?

That’s the best way to learn! Follow the series from step 1 to 10 as we’ll build on top of the block as we advance through. Before we plunge into the steps; a disclaimer. There’s a few things you should already know beforehand about what this series is and what it isn’t.

WordPress 5.0 is out, and with it comes the new block-based editor, Gutenberg. Out of the box, it packs in a decent selection of blocks you can use across your pages and posts. However, since this is WordPress, there’s always room for more custom functionality.

What’s the purpose of the block editor in WordPress?

It is designed as a modular pattern for organizing and sharing data: simple enough to satisfy the needs of a small plugin, while scalable to serve the requirements of a complex single-page application.