Adding Custom Fields (attributes) to Core Gutenberg Blocks | WordPress

Using just three filters, we'll add a few custom fields to the core "Button" block in WordPress that will update the button's content on the front end. We'll use a little bit of JavaScript, including WordPress/scripts and WordPress/components, as well as the new WP_HTML_Tag_Processor class in PHP. 🚨 Free Video Series: 7 Tools for Modern WordPress Development 🚨 👉 https://briancoords.com/7tools 👉 Code: https://github.com/bacoords/example-q... 👉 Block Filters: https://developer.wordpress.org/block... 👉 SlotFill: https://developer.wordpress.org/block... 👉 Gutenberg Storybook: https://wordpress.github.io/gutenberg... 00:00:00 Introduction 00:01:50 Scaffolding with WordPress/create-block 00:04:02 Using the addFilter Hook to add custom attributes 00:08:07 Enqueueing Block Editor Assets 00:10:36 Building a new component with WordPress/components 00:12:40 SelectControl and TextControl Form Components 00:14:28 Using the BlockEdit Filter to add to the block UI 00:17:47 Adding a conditional TextControl field 00:19:39 PHP Render Block Filter in WordPress 00:22:31 Using the HTML_Tag_Processor to modify blocks 00:26:25 Final Summary