WordPress Gutenberg Blocks Made Easy

Prerequisites: Gutenberg Blocks may seem overwhelming, but I’m hoping to clear away just enough details so that we can see what’s going on at the heart of this new editor. I’m assuming that:
You’re familiar with some build processes with babel
You’ve done enough React to be familiar with JSX
You’re primarily Javascript/html/css focused.
Outline:
Here are the steps we’ll take to get a block loaded in the Gutenberg editor. We plan on making a single block with pre-rendered text. (No interactivity, CSS, fancy stuff yet)
Set up WordPress and a folder structure
Create a build process with webpack
Call the block’s javascript into the editor with php
Register a block with javascript
To see the finished product, you can see the repo here
WordPress Gutenberg and folder structure:
Make sure that you have installed and activated the Gutenberg plugin.
I use local by flywheel to quickly spin up instances of WordPress. Whichever way you choose to set up your WordPress, you’ll need a folder inside of your plugins folder with your plugin title.
Inside this firstgutyblocks folder we will have a php file that I’ve named “firstgutyblocks.php”.
Source: https://managewp.org/articles/17366/wordpress-gutenberg-blocks-made-easy

source https://williechiu40.wordpress.com/2018/04/26/wordpress-gutenberg-blocks-made-easy/