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 • Build Custom Gutenberg... . 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 www.buymeacoffee.com/techiepress
- Give via PayPal: paypal.me/laurencebahiirwa
- Buy Scalable WordPress Hosting -----omukiguy.com/kinsta
- Buy Low cost Hosting ----------------------omukiguy.com/bluehost
- Build no code website with Elementor -- omukiguy.com/elementor
- Enhance Elementor with Crocoblock --- omukiguy.com/crocoblock
- Automate API Requests & Webhooks -- omukiguy.com/integromat
- Screen Record with your computer ----- omukiguy.com/screenflow
- Make Awesome forms with WPForms ----- omukiguy.com/wpforms
- Build Advanced with Gravity Forms --- omukiguy.com/gravityforms
I am social too:
Facebook: / techiepress-1001496550...
Twitter: / omukiguy
Blog & Newsletter: omukiguy.com
Github: github.com/yttechiepress
-------------------------------------------------------------------------------
LEARN MORE IN THE WELL CURATED PLAYLISTS BELOW
--------------------------------------------------------------------------------
Learn how to build a plugin from scratch: • Plugins Vs Functions.p...
WooCommerce E-Commerce customizations
== Build Free Custom E-commerce Online Shop using WooCommerce - • WooCommerce customizat...
== Build Free Custom Theme for E-commerce Online Shop using WooCommerce -
• Woocommerce Restaurant...
====== Build Dynamic Websites with Elementor ======
== Learn the Elementor basics - • Elementor Beginner Tut...
== Build a custom Elementor Widget from Scratch - • Build Custom Elementor...
====== How to use WordPress Gutenberg Block Editor ======
WordPress 5.4 Gutenberg Blocks Updates
== • WordPress 5.4 Gutenber...
WordPress Gutenberg blocks for Designers
== • WordPress Basics Train...
Gutenberg WordPress Block Editor tutorials for beginners
== • WordPress Basics Train...
Custom WooCommerce Gateway Development from Scratch
== • Build Custom WooCommer...
WordPress Custom REST API Namespaces, Endpoints and Examples from Scratch
== • Create Custom WordPres...
====== WordPress Plugin Development from Scratch ======
Build SMS Plugin with External WordPress API Integration using custom WordPress Databases
== • Build SMS Plugin - Ext...
WordPress External APIs Integration Plugin Development
== • WordPress External API...
Convert WordPress to mobile App in Headless WordPress
== Convert WordPress Sports Website into Mobile Application - kzbin.info?list...
Make GraphQL API endpoints with WordPress Headless CMS WPGraphQL Plugin
== • Make GraphQL API endpo...
Customize Your WordPress & ClassicPress
== Build Custom REST API Endpoints with WordPress or ClassicPress - • Build Custom REST API ...
Learn Git
== Git tutorial for writers + software developers for beginners - • Git tutorial for begin...

[@Jony-movingCoIl]

Great Hat 😎

[@5ruedumonde]

Thanks man, really in-depth cool video !

[@theman7050]

Another amazing tut

[@dashingpix]

Awesome, interesting.

[@TechiePress]

Glad you think so!

[@onelook1870]

Yes!

[@zomalee4512]

Hey looking forward to this course! Can you also make a image slider using swiper js

[@TechiePress]

I am going to release a new video ASAP. Working on it

[@bikramchettri7056]

How can we make gallery slider?? or select multiple images

[@marcokielenschede]

Thank you very much! When is nr.2 coming?

[@TechiePress]

Should be in a few days. I am sorting out some personal stuff

[@rich5759]

Great tips! Is it possible to set an image background for a specific page with the Gutenberg editor? I know I can set backgrounds per block, but I nneed to know how to set a full page image background for a specific page and have been pulling my hair out trying to figure this out. Hopefully you can shed some light.

[@TechiePress]

The quickest way I would think about that is to use a css class rule if you are a coder. You can also add plugins like ultimate stackable blocks or coblocks that allow you to use various containers supporting background images. I hope that helps

[@rich5759]

@@TechiePress Thanks, yeah I added it using CSS, but now the blocks are covering up the background image and I want the backgorund and the content to be seen together.

[@TechiePress]

Do the blocks have a background color? Change that to transparent Via css

[@rich5759]

@@TechiePress Tried that with CSS, doesn't work. Gutenberg is a different animal.

[@TechiePress]

Do you need to see the image on the editor side? You could effect the background on the viewer side only with css.