Easiest Way To Create A Dynamic WordPress Block (Gutenberg Development Tutorial)
Vložit
- čas přidán 24. 06. 2019
- In this tutorial, we go over how to create a Dynamic WordPress Block using create-guten-block, React, and PHP. Gutenberg can be confusing, so hopefully, this video will help you with getting started in your block development!
Sign up for the newsletter to notified about the free 2020 WordPress Development Course: wpcasts.tv
Get WordPress Hosting:
wpcasts.tv/go/kinsta
*Don't forget to subscribe!*
*SOCIAL*
Twitter: / alexanderbyoung
Instagram: / the_alex_young
#WordPress #Gutenberg #React
I hope you learned something! Gutenberg has been especially mysterious to me, so I wanted to distill what I've learned into a quick tutorial.
Follow me on Twitter so we can chat! - twitter.com/_WPCasts_tv_
Great tutorial, Alex, thank you a lot! Gutenberg seemed a very strange and useless thing for me when it only arrived but now when I explore it more and more I really start liking Gutenberg. It has a great power and what I like the most it could help to build sites with less bloat in the code than page builders
Thanks a lot! I think you has gone deeper than anyone on youtube! 👍 Great job!
Simply amazing intro to block creation with WP Gunteberg! Thanks!
15:14 That's what was giving me headaches! Thanks!
Great tutorial, thank you exactly what I was looking for !
This is exactly what I needed! Great video!
Nice! I haven't gotten around to using Gutenberg much, but this was very instructional. Thanks.
I'm glad you found it instructional! Cheers!
Yes it was very helpful, I learned a lot. Thank you
This tutorial is so helpful! Thanks a lot!
Awesome tutorial! I would love to see a version while using React and creating the whole structure from scratch.
Definitely LIKE
You're the best, very good tutorial!
Hi, thank you for this eye-opening tutorial, really what I was looking for. Can you make a github repository with the code? That would be amazing! Anyway, thank you for making this, luv u Alex
Just Priceless!
Great lesson. Good luck!
Thank you so much! For this video!
Thanks for the tutorial. I'd like to know how to improve this front-end side, implementing for example a "load more" functionality and filter para category or taxonomy. Any suggestion on tutorials that cover these functionalities? Many thanks!
Thanks for this
thank you really helpful
Great work. Today did the same but using ACF Blocks. I think that is a simple solution for people like me that use ACF, using their php framework
I love ACF's block interface. I should do a video on those. The only downside is that it's behind the pro version...but man is it a worth the $.
WPCasts true, it’s a must have for every Wordpress developer. Keep the good work ;)
Tip! If you want a preview in admin include the ServerSideRender component from wp.components, and add
A full course on wordpress development please!
Super!
Thank you for this tutorial! I subscribed 😄
I'm wondering if you'll continue with adding the category selector and posts per page options into the sidebar. That would allow the block to be used as a preview of the posts. What do you think?
I think that's a great idea. I'm still deciding how deep into Gutenberg I want to go. If I go deep, I'll definitely cover settings in the sidebar.
@@WPCasts I hope you do, it was a joy to follow :)
Hi Alex, do you have a repo for this tutorial? thanks
Hi @WPCast thanks for the Tutorial
I follow it, but the settings to display the posts on the frontend does not work....
Hello, nice tutorial, thanks. Can you please give me a little explanation why you have been used apiFetch instead of getEntityRecords like Block Handbook examples at dynamic blocks tutorial?
?
If you want to get the data slightly easily use wp.data .select('core').getEntityRecords('postType', 'post');
wp.data .select('core').getEntityRecords('taxonomy', 'category');
I'm getting list of posts with wp.data.select('core').getEntityRecords('postType', 'post'); but null with wp.data.select('core').getEntityRecords('taxonomy', 'category'); when I try to consloe.log it. Any ideas?
Is there anyway to render the content for edit() method from the server side? Just like return null and render_callback similar to save()?
Some time starting command not worked, so can use nvm use 14.16.1 before run cgb command
Got her from Reddit, great tutorial! I haven't touched Gutenberg either and this makes it look easy, even gives me hope I may pick up some modern JavaScript!
You can and should! Thanks for the feedback :)
I enjoyed the video thanks. I followed it and it works when you want to select a single category. However, what about a multi-select? How would you handle that?
its very easy, for the 'select' element, after the 'value' attribute, add 'multiple' and thats it.
Hi thanks for this tuto it really helps! but i got an error : react-dom.min.js?ver=16.9.0:103 TypeError: Failed to construct 'Option': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
I use wordpress v.5.3.2 php: 7.3.12. thanks.
great explanation! one question: does this mean we can only do one dynamic block in the instance of create-guten-block? sometimes for static blocks I'll create a handful in one create-guten-block folder and just import them all in the blocks.js file under src, but I assume since there is only one render callback we'd need to seperate it out for dynamic. Is it bad practice to have several statics in the same place too?
nope, take a look here: github.com/ahmadawais/create-guten-block/tree/master/examples/03-multi-block
create-guten-block is broken for me ;c can u redo this tutorial using the new npm init @wordpress/block?
I created my block and it works fine in localhost; but when I run npm build and upload the plugin to my production site, it tells me that there are some invalid file names and, even though the plugin shows up in the plugin page. The block does not appear in the page editor. Any ideas?
Does this also generate the posts in the editor when the block is in “preview” mode?
just try and click on Preview !
What's the difference creating the blocks in React.js and PHP (Wordpress)?
Hi,
Thank you so much!
I am developing on localhost and it doesn't save the selectedCategory when I refresh, even though I did execltly your steps.
Also, I used the create-block bundle instead of cgb, because I couldn't get the wp-env work with cgb for some reason. Everything went well until the setAttributes didn't save after refreshing.
How can I make the selectedCategory saved?
Thanks again,
Tami
Hey Tami! This is tough without being able to see whole picture. What issue were you running into with cgb?
@@WPCasts I am using wp-env, and it could not run the local Wordpress env from the plugin directory created by cgb, and it does work with create-block. Is this where the problem comes from? Using create-block instead of cgb? To be clear, the attributes are modified by setAttributes, but then when I refresh the page the attributes are cleared as if nothing was selected.
I appreciate your response and I understand it is hard to do it remotely without seeing the whole picture. I will keep trying to make it work and I will update you if I find a solution :)
On the frontend I get
Notice: Undefined index: selectedCategory
And my code is exactly like yours.
Why does this live inside a plugin and not inside a folder in a custom theme for example?
Housing your components in a plugin is typically the best practice to go because a plugin is more portable than some code inside of a theme. That said, if you don't plan on reusing those components, you can place them in the theme if you want.
is this known as an inner block?
How can you add multiple blocks to the same project?
Yes, will each block be a plugin with this create-guten-block boilerplate?
Why did they have to make it so complex? The ACF way seems much more logical. But I guess there may be some downsides to that approach too.
unfortunately I couldn't get through the first 6 minutes of this video, as I do not get the empty object or category lists posted in my browser console. either this coding is outdated or the block plugin code changed since the making of this video tutorial.
Same for me.
@WPCasts
I get Uncaught (in promise) {
"code": "invalid_json",
"message": "The response is not a valid JSON response."
}
and this is my code
attributes:{
categories:{
type:'object'
},
selectedCategory:{
type:'string'
}
},
edit: function ( props ) {
if( !props.attributes.categories){
wp.apiFetch({
url:'/wp-json/wp/v2/categories'
}).then(categories =>{
props.setAttributes({
categories:categories
})
});
}
if( !props.attributes.categories){
return 'Loading...';
}
if( props.attributes.categories && props.attributes.categories.length===0){
return 'No categories found...please add some';
}
console.log( props.attributes);
return (
{
props.attributes.categories.map(category =>{
return(
{category.name}
)
})
}
);
},
save: function () {
return null;
},
} );
If you are doing this in local and you home address in local is like this "localhost/you-site/"
@@ollip3452 You mean like this?
wp.apiFetch({
url:'localhost/you-site/wp-json/wp/v2/categories'
})
What is the difference between a tutorial and just doing something while talking. According to this "tutorial" there is no difference. So no overview, no content separation or sequencing. Just lacks the mouse wiggle and a some errors to be a total failure.
Sorry that you didn't like it. If you have some example tutorials that are good examples to follow, I'd love to see them! Thanks!
@@WPCasts I kinda think that this kinda thing is a product of talking too much with people mostly like yourself. As in focusing your attention on people who can do 70 - 90 % of what you do. And are helped by an unprepared, lazy, relaxed style tutorial. Same stuff is aggravating if you actually need to get an understanding of the stuff covered. Made worse by a long language sausage that makes it impossible to chuck it down to something digestable. Is it really that hard to break it down to 3 or 7 parts with a bit of separation?
" If you have some example tutorials that are good examples to follow, I'd love to see them!"
I will try to find some. In the meantime Larry McEarneney has some wonderful methods on how to structure text to make it work for readers. I think he covers a lot that is useful for making tutorials in video form as well. I often find tutorials frustrating. That is in no way your problem. But I would suggest that making more accessible stuff will help you grow a much larger audience.
czcams.com/video/vtIzMaLkCaM/video.html
Good ole WP-Scuptor have made some really good tutorials. They are by now very dated and way below my present level of understanding. But he is a real pro with regards to structure, organisation, completeness. You can see that he knows exactly what he is doing and leaves nothing to chance. It is much simpler stuff, and off course it gets harder to do more advanced stuff with this kind of approach. But some approximation would do nicely too.
czcams.com/video/DyARzdLKjKw/video.html
I watched a Traversy Media tutorial on how to do a plugin today. I will definitely use that as a learning experience. It is a bit above my level, but I trust him to be clear, predictable, reliable and detailed enough that I want ragequit after 5 attempts, but actually get something to work and learn from it. Sadly he has some serious health issues and is not able to do as much as he has done.
czcams.com/video/eZn3tfF5GFM/video.html
@@tagfat Why don't you go and make a better tutorial yourself?
after entering postPerPage once unable to change again with code