Creating a block

Creating a block for Gutenberg is easier than it looks. You can learn how to create a block using ES5 and ES6/ESNext from the below resources –

• Writing your first block type
• Create Gutenberg Block using ES6 with @wordpress/scripts package
• Examples for extending WordPress/Gutenberg with blocks
• Create Custom Gutenberg Blocks — Playlist of 14 videos + GitHub
• Introduction to the Format API
• Block Filters
• Block Editor Architecture

Example — 1 block

Below is a PHP-rendered block in 1 file and 100 lines. After reviewing the articles above, it was what resulted from trying to create the simplest possible block without a build process:

OOP example — 2 blocks

Below is an example of the same script, but using a class to instantiate two separate blocks: