Creating Native Gutenberg Dynamic Blocks using the block.json schema

  Рет қаралды 2,044

TechiePress

TechiePress

Күн бұрын

The block.json file is a crucial element in the creation of native WordPress Gutenberg dynamic blocks as of WordPress 5.8 and older. This file is built to contain all the necessary metadata for a block, such as its name, category, and attributes. It also specifies the files that make up the block, including the JavaScript and CSS that define its behavior and appearance.
In this video tutorial, we walk through how to develop a WordPress dynamic Gutenberg block using the block.json file and the wp-scripts package.
This tutorial will give you a hands-on understanding of how the block.json file fits into the block development workflow, and how you can use it to create your own custom blocks for WordPress. The tutorial demonstrates how to modify the ClassName and Alignment properties as an example, with visuals.
VIDEO CHAPTERS
00:00 Recap & Challenge
02:08 Setup Files & Block dependencies
05:09 Dynamic Block Structure
08:06 ClassName Property in block.json
09:07 Align & AlignWide properties in block.json
09:58 Next steps
Get more examples of the JSON object that can be added/edited in the blocks.json file via omukiguy.com/using-the-block-...
Join this channel to get access to perks:
/ @techiepress
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
- Visit omukiguy.com/support-my-work/
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 Most Popular & Most Commented Post Plugin
== • Build WordPress Most P...
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 ...
Custom Dashboard Widgets
== • Custom Dashboard Widge...
Build Custom Admin
== • Custom Admin for WordP...
Learn Git
== Git tutorial for writers + software developers for beginners - • Git tutorial for begin...

Пікірлер: 12
@nataljadembek114
@nataljadembek114 9 күн бұрын
Great pacing and explanation, thank you!
@datawontlie1574
@datawontlie1574 5 ай бұрын
Thanks
@onelook1870
@onelook1870 Жыл бұрын
Love your content
@Cat-h-o4q
@Cat-h-o4q Жыл бұрын
Cool!
@aogunnaike
@aogunnaike Жыл бұрын
Thanks 👍
@TechiePress
@TechiePress Жыл бұрын
You are welcome 👍 What kind of blocks do you plan to make?
@RajibAhmad
@RajibAhmad Жыл бұрын
Hi buddy... good to see U after long time.... I am still waiting for the "Woocommerce Custom Theme Development for WordPress from Scratch" series to be finished... is there any possibility in near future?? Once again thanks a lot for your valuable contents..
@TechiePress
@TechiePress Жыл бұрын
Very soon. I will be making some new stuff on the Woocommerce series. It is because WordPress and Woocommerce are growing in block development so I have been watching the direction to make sure the info I share is upto date. Soom you will get some notifications about the new videos.
@brunonicholas6965
@brunonicholas6965 Жыл бұрын
Good content but volume is low
@TechiePress
@TechiePress Жыл бұрын
Thanks for this. I will improve on it in the next video. Do you view these in transit or using headsets?
@brunonicholas6965
@brunonicholas6965 Жыл бұрын
@@TechiePress thanks for the response, I usually use my computer default speakers, just like now, but use the headset at times
@TechiePress
@TechiePress Жыл бұрын
I will bump up the audio. Hopefully I should get a better setup soon.
Получилось у Миланы?😂
00:13
ХАБИБ
Рет қаралды 4,2 МЛН
Double Stacked Pizza @Lionfield @ChefRush
00:33
albert_cancook
Рет қаралды 103 МЛН
Easy custom blocks using InnerBlocks in Gutenberg
19:09
Brian Coords - WordPress Dev
Рет қаралды 2,7 М.
The Day Michael Jordan Destroyed Kobe Bryant & Shaquille O’neal
13:22
Players Unlimited - Basketball
Рет қаралды 723 М.
How to Build a REST API With Laravel: PHP Full Course
1:49:26
Envato Tuts+
Рет қаралды 242 М.
Querying external APIs with XML data using WordPress
18:18
TechiePress
Рет қаралды 2,2 М.
The Story of Next.js
12:13
uidotdev
Рет қаралды 558 М.
WordPress Gutenberg Site Editing & Block Themes: Build Anything!
21:31
Let’s Build a Custom Block in 15 Minutes
15:12
WordPress
Рет қаралды 8 М.
iPhone socket cleaning #Fixit
0:30
Tamar DB (mt)
Рет қаралды 17 МЛН
КРУТОЙ ТЕЛЕФОН
0:16
KINO KAIF
Рет қаралды 6 МЛН
Todos os modelos de smartphone
0:20
Spider Slack
Рет қаралды 64 МЛН