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).
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?
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.
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.
@@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. 👍🏽
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 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?
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 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
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.
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.
@@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
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!
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
@@zoradesign 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.
@@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.
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.
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
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!
Thanks!
Clear, nice and helpfull!
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).
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?
I'm not sure I'm following the question here, can you provide a little more context?
@@BrianCoordssorry I guess my case is different because I am trying to add an option to the existing control: ORDER BY.
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.
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.
@@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. 👍🏽
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 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
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!
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!
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
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?
@@zoradesign 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.