Native WordPress Gutenberg Blocks – Tooling & Setup of first block

This is part one of a series that shows you how to make Native WordPress Gutenberg Blocks. We shall be making a Travel Itinerary Block built with Advanced Custom Fields.

However this time, we shall use React JS that is the native way of doing this in WordPress.

This first video explains hows the setup works, tooling and what file does what job in the block development.

VIDEO CHAPTERS:
00:00 Introduction to the Series and blocks
00:59 Requirements for WordPress Gutenberg Blocks
02:45 Using Node & NPM in blocks building
03:29 Installing NPM & Node on local machine
03:58 Scaffolding your block create with npx @wordpress/create-block
05:40 Explore Package.json
07:59 Explore block.php
10:21 Explore .gitignore file & .editorconfig
10:57 Explore the src folder
12:54 Explore the build directory
14:05 Build the first block
15:08 Set minimum requirements for WordPress Block
16:47 Preview first native Gutenberg block
17:39 Exploring build/index.js
18:12 Explore build/index.asset.php
18:39 Simple block style adjustments
20:57 Register new block type with register_new_block()
21:49 Understanding the block.json file
22:43 Changing the block description
23:41 Add new block icon from dashicons
25:02 Block Namespace and breaking changes
26:01 Next video & Conclusion

See the next chapter of this Settings Sidebar:: Add Block Text, Image and Checkbox Fields – WordPress Gutenberg Block