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 –

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: