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: https://wordpress.org/plugins/simple-html-rich-text-for-block-editor/ Github: https://github.com/bahiirwa/simple-html-rich-text-for-block-editor HOW TO SUPPORT THE CHANNEL ============================================= Do you like what I am doing? - Join channel membership to get access to perks: https://www.youtube.com/channel/UCk_CWbiRCi34etpks2KwNuQ/join- Buy me a coffee through https://www.buymeacoffee.com/techiepress - Give via PayPal: https://paypal.me/laurencebahiirwa - Visit https://omukiguy.com/support-my-work/ 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 Most Popular & Most Commented Post Plugin == https://www.youtube.com/playlist?list=PLNqG1qGUllk05gUz_VB5nCHEN9A3OpS94 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 Learn Git == Git tutorial for writers + software developers for beginners - https://www.youtube.com/playlist?list=PLNqG1qGUllk2PnSJiUw1SCjiS6pNhIR2f