Learning Gutenberg Blocks

Gutenberg ‘Blocks‘ are the building blocks of the new forthcoming WordPress editor named Gutenberg. It is stated in Gutenberg vision statement that Everything is Block. Therefore, learning ‘Blocks’ deeply is very important to customize WordPress theme development.

Everything is a block. Text, images, galleries, widgets, shortcodes, and even chunks of custom HTML, no matter if it’s added by plugins or otherwise. You should only have to learn to master a single interface: the block interface, and then you know how to do everything. – Gutenberg Design Principles & Vision

Following is list of collections of examples of blocks and their use in WordPress themes. This is updated as examples become available.

Link to Working Examples & Tutorials
  1. Star Blocks by Gary Pedergast
  2. Gutenberg Boilerplate – by Ahmad Awais
  3. How We Created A Custom Block For The Gutenberg Editor – by David Morgan. Very useful tutorial post for creating a new block-plugin.
  4. How to Build Custom Gutenberg Blocks: a Beginner’s Guide – by Alex Mansfield (modularwp.com)
  5. Create Gutenberg Block – by Ahmad Awais. Ahmad states in his blog post that ‘it is a zero-configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, Webpack, ES6/7/8/Next, ESLint, Babel, etc.’
  6. How to build a Gutenberg block plugin – by Gareth (wisdomplugin.com). A step by step guide to creating your first Gutenberg block.
  7. WordPress Plugin Directory – Gutenberg Blocks. Learn key workings by studying these plugins.
  8. Creating a Gutenberg Block – by Marcus Kazmierczak [Automattic Engineer] (mkaz.blog). A brief tutorial on creating block with useful resources.
  9. Creating a Custom Gutenberg Block in WordPress – by Peter Tasker (deliciousbrains.com). Very detailed tutorial for creating custom block.
  10. How to Create Your First Block For Gutenberg – by Antonio Villegas (neliosoftware.com). A detailed step-by-step easy to follow tutorial on creating a Gutenberg block plugin.
WooCommerce Blocks
  1. Preparing WooCommerce for the arrival of Gutenberg – by Jame Koster | WooCommerce Blog
  2. Making it easier to add products to posts and pages with the Products block for Gutenberg – by James Koster | WooCommerce Blog