Adding Rich Text Content & Registering Block Format Types in the Gutenberg Block Editor Development

The Gutenberg Block Editor is an essential tool for creating dynamic and interactive content in WordPress. If you're a developer, you can take your content creation capabilities to the next level by learning how to add rich text content and register new block format types in the Gutenberg Block Editor.
In this video, we'll explore the process of adding rich text content and registering new block format types in the Gutenberg Block Editor. We'll start by discussing why Rich Text is important in the Gutenberg Block Editor and the benefits of using it, including how it's used in Gutenberg rich text blocks.
Then, we'll dive into how to register new block format types using the RegisterBlockType Gutenberg API, which allows developers to create custom block types. This is a clear Gutenberg block example to illustrate how to use the API to add custom formatting options in the daily content creation usage.
By the end of this video, you'll have a comprehensive understanding of how to add rich text content and register new block format types in the Gutenberg Block Editor using the Gutenberg block API. Whether you're a seasoned developer or a newcomer to WordPress, this video is a must-watch for anyone looking to take their content creation capabilities to the next level. Let's dig in!
Chapters
00:00 Adding Rich text to the Block editor Challenge
02:03 Scaffold plugin with wp-scripts
02:58 Cleanup Plugin setup files
05:07 Register Format Type for Block Content
06:38 Check for Registered Format Types in WP
07:29 Adding a Rich Text Toolbar Button
09:19 Use onChange events to add new button markup
12:17 Register Multiple Format Types
13:01 Unregister Format Types in Block Editor
14:24 Complete registry of multiple Block Format Types
18:04 Conclusion
The usable plugin can be found here:
WordPress Repo: wordpress.org/plugins/simple-...
Github: github.com/bahiirwa/simple-ht...
HOW TO SUPPORT THE CHANNEL
=============================================
Do you like what I am doing?
- Join channel membership to get access to perks: / @techiepress 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...
Learn Git
== Git tutorial for writers + software developers for beginners - • Git tutorial for begin...

[@HassanAhmed-om8op]

Thanks!

[@autumnpace3876]

Thank you so much for this tutorial! It made everything super clear and having the flexibility to apply this to all core blocks, not just custom, is amazing. Thanks again!

[@novencetechnical2520]

please make the videos without plugins ,, for api

[@TechiePress]

What do you mean without plugins? You can add the same code into your theme via functions.php but when you switch the theme, you lose the functionality

[@HassanAhmed-om8op]

Hello Laurence are you still around? @TechiePress