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 🚨

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

[Steve-Ariss]

Your content has been super helpful! I’m been looking to switch from an acf block building process and it’s great to see what’s possible

[wpmarkuk]

Thanks for this - super useful. Have you got an example of an media upload inspector control (?) which saves a media ID or URL as the attribute? I can't find one.

[weristsam]

great tutorial brian! Which plugin you are using for the help text information?

[spadilha]

This was really helpful. I could understand better how it works and I was able to fix a code that I spent hours trying to figure out. Thank you!

[videostar]

I have a small HTML change in the render_block_core/gallery hook but it doesn't show in the block editor, it shows in frontend. How do we show it on the block editor?

[lebonron]

hi, hope i can ank another question: since you are using a custom field in the set attribute. what if i want to replace the content of a p tag to a custom field value? how can i do that? i have tried using the shortcode block inside the query loop block, but it doesn't display the right value for each item in the loop. so i thought to build on what i have learnt here to display for example: person name in a testimonials custom post type. is there a way, not to change an attribute, but rather the content itself?

[PhilaUAdam]

Could you add custom field attributes to a block variation? Or do they work just for core blocks?

[lebonron]

this is really great!!! one question if i may: i added a languages folder, and in it all the files translated with poedit. but i cannot seem to integrate it so it will show the translated string. any idea how i can do it? best regards

[EricThomson]

This looks like it might help me, I am trying to add a custom field (ACF) as an option for ORDER BY. My field is a date field named 'when' and I want to add option: 'when new to old' instead of using the publish date. Can you offer any incite into what is different about that case from the 'read more' button example?

[afghanistan]

That was very helpful, is there any way to make the Cover block link to Post, like Featuredimage Block? Thanks 🙏

[marcoalmeida]

I followed this to create some attributes to all blocks and on another block I developed, which uses ServerSideRender to render the block in PHP, I'm getting " 'atrtributeName" is not a valid property of Object ". Any idea?

[karlson]

How do I learn all this stuff for writing many customizations in my custom theme?

Any tutorials step by step?

[Whatreally]

Hi Brian,
I am trying to modify an existing core block. I downloaded the src files from github. Using ChatGPT, i made minor changes to the main functions in the php file. However, I am unable to build this. I created the same folder structure in VS Code as on github but "npm start" issues errors. I tried learning from the create-block method but not sure how to map the same files available on github to the structure created by create-block.
Is there any video or blog which details how I can build a custom plugin based on the src files of the core blocks downloaded from github? All I need to learn is how to build the plugin package. I have made the required code changes in the main php file.

Thanks.

[stephenjeffers]

I'm a non developer but I do have a question. Can youany add custom fields in the same way as ACF and Metbox to core wordpress?

[MalalaniainaRaharinirina]

On the front, everything works fine, but in the editor the attributes are not taken into account, even though the props are destructured in the addFilter

[kadimgultekin]

Thanks for the video. It is really helpful...