Adding Custom Fields (attributes) to Core Gutenberg Blocks | WordPress
Вставка
- Опубліковано 8 лип 2024
- 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 🚨
👉 briancoords.com/7tools
👉 Code: github.com/bacoords/example-q...
👉 Block Filters: developer.wordpress.org/block...
👉 SlotFill: developer.wordpress.org/block...
👉 Gutenberg Storybook: 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 - Наука та технологія
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!
That's great! So happy it helped.
Thanks for making this!
I hope it helps!
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
Thanks for the video. It is really helpful...
great tutorial brian! Which plugin you are using for the help text information?
Thanks! Are you talking about the help text inside my code editor that show the WordPress core functions? (I'll also note that I might have GitHub Copilot enabled in this video, which basically auto-suggests lines of code sometimes).
That was very helpful, is there any way to make the Cover block link to Post, like Featuredimage Block? Thanks 🙏
I suppose you could do a similar thing to the cover block where you use the render_block filter to change the `` to an ``, but it might cause some other issues and would need a lot of testing. (You could also wrap the cover block in a group block and do the filtering there, which would be easier to modify).
There is some discussion about giving the entire Post Template block an option to be a clickable link for query loops, so that anywhere you click inside would be a link to the post: github.com/WordPress/gutenberg/issues/38014
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?
(Noting for others that there's a reply to this in another thread)
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
Are the translations working in other parts of your plugin, just not in the JavaScript parts?
@@BrianCoords thanks for answering! i am following your tutorial so the only translatable code in this plugin is the in the javascript file where we imported the i18n. i am using my plugin text-domain when i added the translatable strings. and Poedit recognised them all. i have all the traslations file. but in the editor interface it is still in English.
Oh interesting. I guess some debugging questions I might ask are:
Is the rest of the editor translating properly?
Is the plugin's text domain properly loading outside of the editor? Can you test with a simple PHP output? developer.wordpress.org/plugins/internationalization/how-to-internationalize-your-plugin/#loading-text-domain @@lebonron
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.
Hey Mark- Definitely check out all of the components from 10up. They have a image uploader that I've used before github.com/10up/block-components/tree/develop/components/image
Thanks for that @@BrianCoords . Being trying to implement the 10up Image component but I don't get a remove image option and although my thumbnail ID is saved in the attribute, the saved image does load when the page is reloaded again.
@@wpmarkuk That's a separate component I think that works alongside it: github.com/10up/block-components/tree/develop/components/media-toolbar
@@BrianCoords thanks for coming back on this issue. I think you are correct and I think I have it working now 😀 Thanks for sharing this knowledge, it has been super useful and look forward to watching more of your content in the future.
@@wpmarkukOh good! And I totally forgot I did a whole video on that Image Component if anyone reading this thread needs it: ua-cam.com/video/WxAGNN-xtwc/v-deo.html
Could you add custom field attributes to a block variation? Or do they work just for core blocks?
If you added a custom field to a core block, it should show up for all variations of that block. Now, I wonder if you can filter your custom fields to _only_ show up for a specific variation. I bet you could!
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?
So actually that's a perfect use case for the Block Bindings API coming in WordPress 6.5 - dynamically sync a paragraph's text to a custom field. Useful in query loops ua-cam.com/users/liveqexf4ZmJuSs
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?
Interesting - It looks like that may be an issue with the SSR component. This method may just not be compatible with it: github.com/WordPress/gutenberg/issues/10528
@@BrianCoords I solved it by registering the attributes in PHP with register_block_type_args. I removed the registration from Javascript and it works for all kinds of blocks.
@@marcoalmeida3683 Makes sense - that's a smart approach!
How do I learn all this stuff for writing many customizations in my custom theme?
Any tutorials step by step?
Can you be more specific - which steps in this video could be more detailed so I can point you in the right direction?
@@BrianCoordsgood question, follow up and i will try to be as specific as possible. I am using the divi theme. I used the ACF plug-in to add more fields to the blog page which I essentially turned into a mini event management page (single blog page now has dates, time, artist, venue etc)
Problem is, I can't figure out how to add all these fields to the archive page (ie the page displays all the post/now events in one page.)
So if you go to a typical city festival page for example there is the display of acts, dates, time etc in the 'what to me will be the blog page.
I am using the Divi theme. Is there a way of doing it? Sorry if i am not clear, not a developer.
@@sotosayable Ah to be honest I don't know much about Divi, my video is about the block editor. I believe there is a lot of UA-cam content specifically aimed at accomplishing these sorts of thing with the Divi builder.
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
So the changes we make to the block through the render_block function will only show up on the frontend- in the editor we don't update the content of the actual block at all.
@@BrianCoords I think this answers my question too but is it possible to apply the changes in the editor as well, any other hooks?
@@videostar555 There are JavaScript hooks to modify content in the block editor, but you do have to be more careful there. Basically if you modify the HTML of a block as it's saved, you just can't ever disable your plugin/theme because it'll break the block markup. This is why I typically just modify the frontend. If I need something different in the editor, I might make a custom block. (Granted this all depends on what you're trying to do.)
@@BrianCoords That makes sense. I am trying to add some js/css functionalities for a core block so it looks different than default look and if people disable the plugin, the original core block is still there. I will just make the css changes so it looks exactly like front end and add the actual features only on the front end.
Thanks.
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?
ACF lets you add custom fields to posts and it works with the block editor. As far as I know, there is no "no-code" tool that lets you add custom fields to individual blocks- you have to do it with code.
@@BrianCoords That's ok, I do have Blockstudio as a way to create custom blocks. It does create a dependency on the plugin but same goes for ACF/Metabox. Not used it as yet becasue I'm waiting for the GUI. My page builder of choice is Builderius as it allows me to query anything in the database but steep learning curve. I heard that Wordpress maybe creating an api that allows page builders to create native blocks. What's your thoughts on that?
@@stephenjeffers2316I hadn't heard that yet, but technically any builder could integrate with the block editor and add native blocks. I believe Kadence and GeneratePress fall into that category of builders but are built on top of the block editor.
@@BrianCoords I'm saw I saw it in the group when looking through the posts that spasked your response. When you say "technically any builder could integrate " does that mean they can build a block? I won't hold you to it, just interested. If a builder can, it'll be an intersting video.