Adding Custom Fields (attributes) to Core Gutenberg Blocks

No video

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

Рет қаралды 5,061

Brian Coords - WordPress Dev

Күн бұрын

Пікірлер: 50

@Steve-Ariss 8 ай бұрын

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

@spadilha 2 ай бұрын

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!

@BrianCoords 2 ай бұрын

That's great! So happy it helped.

@HashimWarren 6 ай бұрын

Thanks for making this!

@BrianCoords 6 ай бұрын

I hope it helps!

@kadimgultekin 8 ай бұрын

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

@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?

@BrianCoords Ай бұрын

I'm not sure I'm following the question here, can you provide a little more context?

@EricThomson Ай бұрын

@@BrianCoordssorry I guess my case is different because I am trying to add an option to the existing control: ORDER BY.

@videostar555 4 ай бұрын

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?

@BrianCoords 4 ай бұрын

(Noting for others that there's a reply to this in another thread)

@weristsam 7 ай бұрын

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

@BrianCoords 7 ай бұрын

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).

@lebonron 5 ай бұрын

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?

@BrianCoords 5 ай бұрын

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 kzfaq.infoqexf4ZmJuSs

@Whatreally123 12 күн бұрын

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.

@BrianCoords 8 күн бұрын

If you're getting errors running `npm start` then there's probably an issues with how it was installed. I would recommend trying from the Create-Block package, getting that running, and then slowly copying over functionality until you get it working. I don't recommend using ChatGPT or AI code unless you're very comfortable with the fundamentals of how the code works, how the build process works, etc.

@Whatreally123 7 күн бұрын

@@BrianCoords Hi Brian, after a lot of time spent going through multiple articles and videos, I was finally able to tweak one of the core blocks to do what I want. Thanks for your videos. 👍🏽

@marcoalmeida3683 6 ай бұрын

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?

@BrianCoords 6 ай бұрын

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

@marcoalmeida3683 6 ай бұрын

@@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.

@BrianCoords 6 ай бұрын

@@marcoalmeida3683 Makes sense - that's a smart approach!

@PhilaUAdam 7 ай бұрын

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

@BrianCoords 7 ай бұрын

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!

@afghanistan7457 8 ай бұрын

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

@BrianCoords 8 ай бұрын

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

@wpmarkuk 8 ай бұрын

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.

@BrianCoords 8 ай бұрын

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

@wpmarkuk 8 ай бұрын

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.

@BrianCoords 8 ай бұрын

@@wpmarkuk That's a separate component I think that works alongside it: github.com/10up/block-components/tree/develop/components/media-toolbar

@wpmarkuk 8 ай бұрын

@@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.

@BrianCoords 8 ай бұрын

@@wpmarkukOh good! And I totally forgot I did a whole video on that Image Component if anyone reading this thread needs it: kzfaq.info/get/bejne/jd5xerF_kt7Yp5c.html

@MalalaniainaRaharinirina 6 ай бұрын

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

@BrianCoords 6 ай бұрын

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.

@videostar555 4 ай бұрын

@@BrianCoords I think this answers my question too but is it possible to apply the changes in the editor as well, any other hooks?

@BrianCoords 4 ай бұрын

@@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.)

@videostar555 4 ай бұрын

@@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.

@lebonron 7 ай бұрын

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

@BrianCoords 7 ай бұрын

Are the translations working in other parts of your plugin, just not in the JavaScript parts?

@lebonron 7 ай бұрын

@@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.

@BrianCoords 7 ай бұрын

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

@karlson2804 7 ай бұрын

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

@BrianCoords 7 ай бұрын

Can you be more specific - which steps in this video could be more detailed so I can point you in the right direction?

@sotosayable 6 ай бұрын

@@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.

@BrianCoords 6 ай бұрын

@@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 KZfaq content specifically aimed at accomplishing these sorts of thing with the Divi builder.

@stephenjeffers2316 7 ай бұрын

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?

@BrianCoords 7 ай бұрын

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.

@stephenjeffers2316 7 ай бұрын

@@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?

@BrianCoords 7 ай бұрын

@@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.

@stephenjeffers2316 7 ай бұрын

@@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.