How to start with Gutenberg Editor custom block development.

Start learning Gutenberg very easily. See step by step Guide.

How to start with Gutenberg editor development. What should I learn?

For Reference:

So, My simple first answer is you should start the development using the new block by going WordPress Block developer handbook.

Believe me or not this is the best resource in the world after you know some basics of Javascript syntax.

Type of JS to develop Gutenberg Block

1. Simple Javascript.

2. ES next standards.

My personal choice is create guten block. this is an opensource NPM package for development Gutenberg block.

This package has all setup of webpack and eslint and one of the best parts is the setup process goes easy.

Go with ES next standards.

Relationship with React and Gutenberg Editor

Gutenberg is developed on the top of React.

Can I use Hooks like react

yes, you can use it. You can pull out from wp.element.

1. useState()

2. useRef()

3. etc..

If you don’t know React hooks Go here: https://reactjs.org/docs/hooks-intro.html

My Experience

Development For simple JS

This is my simple Demo you can check it out:- https://github.com/vanpariyar/gutenberg-blocks-plugin

Development For ES Next

fortunately, I have developed one Gutenberg WordPress plugin. vanpariyar/gutenberg-instagram-post-grid *Easy Doker Setup snap install docker pip install docker-compose docker-compose up goto: http://localhost:8080/ Enter…*github.com

Check out this on Wordpress Listing: https://wordpress.org/plugins/social-gallery-block

Other Demos

vanpariyar/gutenberg-demo-esnext To get random Quote on Clicks. and saves in database. - vanpariyar/gutenberg-demo-esnextgithub.com