Easiest Way To Create A Dynamic WordPress Block (Gutenberg Development Tutorial)

No video

Easiest Way To Create A Dynamic WordPress Block (Gutenberg Development Tutorial)

Рет қаралды 34,333

Күн бұрын

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/k...
*Don't forget to subscribe!*
*SOCIAL*
Twitter: / alexanderbyoung
Instagram: / the_alex_young
#WordPress #Gutenberg #React

Пікірлер: 72

@WPCasts 5 жыл бұрын

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_

@andreranulfo-dev8607 8 ай бұрын

15:14 That's what was giving me headaches! Thanks!

@artabramov2254 4 жыл бұрын

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

@andreranulfo-dev8607 8 ай бұрын

Just Priceless!

@devnebula 4 жыл бұрын

If you want to get the data slightly easily use wp.data .select('core').getEntityRecords('postType', 'post'); wp.data .select('core').getEntityRecords('taxonomy', 'category');

@junglized 4 жыл бұрын

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?

@gggfff7675 5 жыл бұрын

Thanks a lot! I think you has gone deeper than anyone on youtube! 👍 Great job!

@JustinTiell 2 жыл бұрын

This is exactly what I needed! Great video!

@travholt 5 жыл бұрын

Nice! I haven't gotten around to using Gutenberg much, but this was very instructional. Thanks.

@WPCasts 5 жыл бұрын

I'm glad you found it instructional! Cheers!

@antoineoriot5538 2 жыл бұрын

Great tutorial, thank you exactly what I was looking for !

@nateandersson 3 жыл бұрын

Tip! If you want a preview in admin include the ServerSideRender component from wp.components, and add

@escuelawordpress1308 5 жыл бұрын

Simply amazing intro to block creation with WP Gunteberg! Thanks!

@miguelmachado6862 5 жыл бұрын

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

@WPCasts 5 жыл бұрын

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

@miguelmachado6862 5 жыл бұрын

WPCasts true, it’s a must have for every Wordpress developer. Keep the good work ;)

@rayremnant 5 жыл бұрын

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

3 жыл бұрын

Awesome tutorial! I would love to see a version while using React and creating the whole structure from scratch.

@qoraicheyassine6452 3 жыл бұрын

Thanks for this

@user-en8fd9ut5q 3 жыл бұрын

Great lesson. Good luck!

@danihazler 4 жыл бұрын

This tutorial is so helpful! Thanks a lot!

@zipponvr7043 3 жыл бұрын

Definitely LIKE You're the best, very good tutorial!

@pahtashow 4 жыл бұрын

A full course on wordpress development please!

@dimor22 4 жыл бұрын

Yes it was very helpful, I learned a lot. Thank you

@nitdesign 4 жыл бұрын

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!

@rovshen.public 4 жыл бұрын

Thank you so much! For this video!

@antonfsd 4 жыл бұрын

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?

@dragos199993 3 жыл бұрын

nope, take a look here: github.com/ahmadawais/create-guten-block/tree/master/examples/03-multi-block

@oguz-kagan 4 жыл бұрын

thank you really helpful

@LeandroBergSchulz 4 жыл бұрын

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?

@LeandroBergSchulz 4 жыл бұрын

@errorerror1337 5 жыл бұрын

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!

@WPCasts 5 жыл бұрын

You can and should! Thanks for the feedback :)

@oliviaposch187 2 жыл бұрын

Hi @WPCast thanks for the Tutorial I follow it, but the settings to display the posts on the frontend does not work....

@sandeepjainwp Жыл бұрын

Some time starting command not worked, so can use nvm use 14.16.1 before run cgb command

@MatthewMcDonald 3 жыл бұрын

Super!

@Labyrinthman 3 жыл бұрын

On the frontend I get Notice: Undefined index: selectedCategory And my code is exactly like yours.

@diederickb1806 3 жыл бұрын

create-guten-block is broken for me ;c can u redo this tutorial using the new npm init @wordpress/block?

@jannemanhuman4237 2 жыл бұрын

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?

@thenajsays 2 жыл бұрын

its very easy, for the 'select' element, after the 'value' attribute, add 'multiple' and thats it.

@lloydmangin2335 Жыл бұрын

Hi Alex, do you have a repo for this tutorial? thanks

@raj080288 3 жыл бұрын

What's the difference creating the blocks in React.js and PHP (Wordpress)?

@MorganHvidt 5 жыл бұрын

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?

@WPCasts 5 жыл бұрын

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.

@MorganHvidt 5 жыл бұрын

@@WPCasts I hope you do, it was a joy to follow :)

@mostafamrabet7883 4 жыл бұрын

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.

@carlosg8716 5 жыл бұрын

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?

@renanbessa8778 3 жыл бұрын

Is there anyway to render the content for edit() method from the server side? Just like return null and render_callback similar to save()?

@tamidynes 4 жыл бұрын

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

@WPCasts 4 жыл бұрын

Hey Tami! This is tough without being able to see whole picture. What issue were you running into with cgb?

@tamidynes 4 жыл бұрын

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

@alexlytle089 3 жыл бұрын

How can you add multiple blocks to the same project?

@leonh5453 3 жыл бұрын

Yes, will each block be a plugin with this create-guten-block boilerplate?

@floris3766 4 жыл бұрын

Why does this live inside a plugin and not inside a folder in a custom theme for example?

@WPCasts 4 жыл бұрын

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.

@jessicadesjardins1165 4 жыл бұрын

Does this also generate the posts in the editor when the block is in “preview” mode?

@mnaoh6704 4 жыл бұрын

just try and click on Preview !

@michael.knight 5 жыл бұрын

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.

@kensleylewis 3 жыл бұрын

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.

@jannemanhuman4237 2 жыл бұрын

Same for me.

@raj080288 3 жыл бұрын

is this known as an inner block?

@Labyrinthman 4 жыл бұрын

@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; }, } );

@ollip3452 3 жыл бұрын

If you are doing this in local and you home address in local is like this "localhost/you-site/"

@Labyrinthman 3 жыл бұрын

@@ollip3452 You mean like this? wp.apiFetch({ url:'localhost/you-site/wp-json/wp/v2/categories' })

@tagfat 4 жыл бұрын

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.

@WPCasts 4 жыл бұрын

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!

@tagfat 4 жыл бұрын

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

@tagfat 4 жыл бұрын

" 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. kzfaq.info/get/bejne/rNp5rbCSsdGnkYE.html

@tagfat 4 жыл бұрын

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. kzfaq.info/get/bejne/et9xhd2VsbHOe6s.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. kzfaq.info/get/bejne/m8CeZteXq5urdoE.html

@leonh5453 3 жыл бұрын

@@tagfat Why don't you go and make a better tutorial yourself?

@sandeepjainwp Жыл бұрын

after entering postPerPage once unable to change again with code