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 like the one done with ACF https://www.youtube.com/watch?v=twQ10mKwAcU. 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 HOW TO SUPPORT THE CHANNEL ============================================= Do you like what I am doing? - Buy me a coffee through https://www.buymeacoffee.com/techiepress - Give via PayPal: https://paypal.me/laurencebahiirwa - Buy Scalable WordPress Hosting -----https://omukiguy.com/kinsta - Buy Low cost Hosting ----------------------https://omukiguy.com/bluehost - Build no code website with Elementor -- https://omukiguy.com/elementor - Enhance Elementor with Crocoblock --- https://omukiguy.com/crocoblock - Automate API Requests & Webhooks -- https://omukiguy.com/integromat - Screen Record with your computer ----- https://omukiguy.com/screenflow - Make Awesome forms with WPForms ----- https://omukiguy.com/wpforms - Build Advanced with Gravity Forms --- https://omukiguy.com/gravityforms I am social too: Facebook: https://web.facebook.com/TechiePress-100149655032583/ Twitter: https://twitter.com/omukiguy Blog & Newsletter: https://omukiguy.com Github: https://github.com/yttechiepress ------------------------------------------------------------------------------- LEARN MORE IN THE WELL CURATED PLAYLISTS BELOW -------------------------------------------------------------------------------- Learn how to build a plugin from scratch: https://youtu.be/9LtXEMRNln8?t=145 WooCommerce E-Commerce customizations == Build Free Custom E-commerce Online Shop using WooCommerce - https://www.youtube.com/playlist?list=PLNqG1qGUllk2qFmbexV2SikF8bXqvDW-H == Build Free Custom Theme for E-commerce Online Shop using WooCommerce - https://www.youtube.com/playlist?list=PLNqG1qGUllk0uFqUvFFIJ67dSNBKapd7Y ====== Build Dynamic Websites with Elementor ====== == Learn the Elementor basics - https://www.youtube.com/playlist?list=PLNqG1qGUllk27BK71LBJDw4auOl-aVOqG == Build a custom Elementor Widget from Scratch - https://www.youtube.com/playlist?list=PLNqG1qGUllk2pukgHP385ll0ENmRr9E_M ====== How to use WordPress Gutenberg Block Editor ====== WordPress 5.4 Gutenberg Blocks Updates == https://www.youtube.com/playlist?list=PLNqG1qGUllk0lI2Omhvp54Qn9-MIEhQzX WordPress Gutenberg blocks for Designers == https://www.youtube.com/playlist?list=PLNqG1qGUllk3DY91Bq_26L8meIXM_Uo4E Gutenberg WordPress Block Editor tutorials for beginners == https://www.youtube.com/playlist?list=PLNqG1qGUllk2xOKt79aI12GgX2DX0aNx- Custom WooCommerce Gateway Development from Scratch == https://www.youtube.com/playlist?list=PLNqG1qGUllk21IES6ZJ2WkX1BcbPQF4-7 WordPress Custom REST API Namespaces, Endpoints and Examples from Scratch == https://www.youtube.com/playlist?list=PLNqG1qGUllk0npc2ZGPU358Q6S1itFCYR ====== WordPress Plugin Development from Scratch ====== Build SMS Plugin with External WordPress API Integration using custom WordPress Databases == https://www.youtube.com/playlist?list=PLNqG1qGUllk0NSTrNF2xa1zHNzMi3M7su WordPress External APIs Integration Plugin Development == https://www.youtube.com/playlist?list=PLNqG1qGUllk0U2-5ZBNxSNxQrPO-4CqnR Convert WordPress to mobile App in Headless WordPress == Convert WordPress Sports Website into Mobile Application - https://www.youtube.com/playlist?list=PLNqG1qGUllk3qMrJcXUeP1Ge5U4fKtAR Make GraphQL API endpoints with WordPress Headless CMS WPGraphQL Plugin == https://www.youtube.com/playlist?list=PLNqG1qGUllk03llIgPYGVTwY14lAPDkBp Customize Your WordPress & ClassicPress == Build Custom REST API Endpoints with WordPress or ClassicPress - https://www.youtube.com/playlist?list=PLNqG1qGUllk06KZP9N1nRG-FpnTr_TD9u Learn Git == Git tutorial for writers + software developers for beginners - https://www.youtube.com/playlist?list=PLNqG1qGUllk2PnSJiUw1SCjiS6pNhIR2f