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 Blocks with Ad... . 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: / techiepress-100149655032583
Twitter: / 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: • Plugins Vs Functions.php - Where shou...
WooCommerce E-Commerce customizations
== Build Free Custom E-commerce Online Shop using WooCommerce - • WooCommerce customizations - Free Wor...
== Build Free Custom Theme for E-commerce Online Shop using WooCommerce -
• Woocommerce Restaurant Shop - Custom ...
====== Build Dynamic Websites with Elementor ======
== Learn the Elementor basics - • Elementor Beginner Tutorials
== Build a custom Elementor Widget from Scratch - • Build Custom Elementor Widgets from s...
====== How to use WordPress Gutenberg Block Editor ======
WordPress 5.4 Gutenberg Blocks Updates
== • WordPress 5.4 Gutenberg Blocks Updates
WordPress Gutenberg blocks for Designers
== • WordPress Basics Training: Gutenberg ...
Gutenberg WordPress Block Editor tutorials for beginners
== • WordPress Basics Training: WordPress ...
Custom WooCommerce Gateway Development from Scratch
== • Build Custom WooCommerce Payment Gateway
WordPress Custom REST API Namespaces, Endpoints and Examples from Scratch
== • Create Custom WordPress REST API POST...
====== WordPress Plugin Development from Scratch ======
Build SMS Plugin with External WordPress API Integration using custom WordPress Databases
== • Build SMS Plugin - External WordPress...
WordPress External APIs Integration Plugin Development
== • WordPress External APIs Integration P...
Convert WordPress to mobile App in Headless WordPress
== Convert WordPress Sports Website into Mobile Application - https://www.youtube.com/playlist?list...
Make GraphQL API endpoints with WordPress Headless CMS WPGraphQL Plugin
== • Make GraphQL API endpoints with WordP...
Customize Your WordPress & ClassicPress
== Build Custom REST API Endpoints with WordPress or ClassicPress - • Build Custom REST API Endpoints with ...
Learn Git
== Git tutorial for writers + software developers for beginners - • Git tutorial for beginners - writers ...
Смотрите видео Native WordPress Gutenberg Blocks - Tooling & Setup of first block онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь TechiePress 08 Август 2021, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,942 раз и оно понравилось 46 людям.