How to create a WordPress Gutenberg Custom Block
Vložit
- čas přidán 14. 03. 2022
- A WordPress Tutorial on how to build a custom Gutenberg Block. You can create a Gutenberg Block if you have a small knowledge of HTML, CSS and Javascript.
We go step by step in this WordPress Development Tutorial on how to create a Gutenberg Block. We create two files that will include the information for our block. First file is a php file and the second is a javascript file.
Download the show files here: idp.bz/gutenberg-block
#wordpress #gutenberg #howto
Let me know here in the comments what type of Gutenberg Blocks you need/want to create. I may chose one to create a video about. Love you all.. Thank you so much for watching, subscribing and commenting!
Could you explain how to add image upload button and repeater fields? Thank you for great job
Can you do pdf Download list custom block please
Excellent vid! I am totally new to custom WP blocks. Can you do one or recommend one for a simple block in the footer that can grab and display data from another site, such as the author's stats from a leaderboard on another non-WP site?
@@lumovox have you found such this kind of block?
All the official WP tutorials and docs have you setting up dev environments, docker instances, node and all sorts of BS. The generated code is incomprehensible. They have no idea what a tutorial actually is. This video gets straight to where we need to be with all the most important aspects explained and a nice small working example which anyone can understand. Well done Joshua. Top marks.
Thank you!
19:39 Just WOW!!! A real life saver!!! I know react, but this Babel really saves some time!! Thanks a lot!
Awesome Tutorial Joshua, thank you very much for this. Your explanation style is very clear and helpful. Can‘t wait to see more of your Gutenberg tutorials. 👍
As someone that is used to extending WordPress with shortcodes and that knows their way around PHP, but not so much JS, this was very helpful to finally getting started with Gutenberg blocks.
With some more help from ChatGPT, I was able to extend your example and create a block that would output some dynamic contents courtesy of PHP. This will hopefully allow me to create more user-friendly backends for my clients, because adding a couple input fields should be better than adding 5 different attributes to a shortcode. 🙂
Awesome! Thanks for watching and commenting.
Thanks a lot Joshua! You made it seem so easy and approachable.
Awesome, this was a great tutorial for me, it opened up a lot of areas to explore. I hope that you did do the video you mentioned 'doing next' about styling, because i'll be really interested to check that out as well. Many thanks!
Hello Joshua! That was a great tutorial. I'm waiting for the next one.
I don't know why, but your process on creating blocks has been the easiest and most intuitive process I have found in the past 3 years. It makes these "no-configuration" packages off of github look over-bloated. In regards to css, I'm assuming that all I would need to do is create a node_modules environment in the same plugin area, to convert my scss sheets to css and then connect them to the block project. Feels very easy. Many many thanks on this!
Thank you very much for the compliment. If you are using VS code or Sublime, there are packages that convert your scss to css. You can enqueue those files into the php file of this plugin. I have that video to make next, but trying to find the time to do it. Been traveling a lot lately and haven't been able to get the time to make the followup video.
What @jherbison said; personally, I'm using "compile hero" (they renamed it to "SASS/LESS/Stylus/ [...] compiler", the name is now quite a mouthful) and it gets the job done beautifully. I'm only using it for SCSS to CSS conversion. For it to work, you need to open a folder rather than "just" the files, this is one of the common mistakes, but after that, it tends to do exactly what you need it to do. 🙂
Man you literally blew my mind!!!!! this is exactly what I was looking for
Thank you for watching and commenting.
I'm not a wordpress fan, but sometimes I have to develop something there, so I'm glad for videos like that one - explaining how to do low-level stuff with awesome lib like react. Well done
Thank you. I am not a fan of react, but it is what WordPress is using more and more.
These videos are golden. Thank you for everything
Thank you. Glad you like them.
Stunning really 😍 Could you please upload part 2 😢 and plan part 3.
I used to hate blocks really cuz the official documentation sucked. But now - thanks to you - I finally get it. ❤
You are the best Joshua thanks!
Hey, it's 2024, and it looks like your video needs an update. There are tons of new features in WordPress. How about kicking off a WordPress series, covering everything from the basics to custom theme and plugin development, security, speed optimization, and more? I'm a 20-year-old from a poor family in India, working on building my career. Your updated tutorials or a new series would be super helpful. Thanks and lots of love from India!🇮🇳❤
As always great tutorial, thank you
Thank you!
Hi Joshua, thanks for your great tutorial.
Hello Joshua. Thanks for this video. It is by far the most approachable intro into blocks for non react devs. I hate setting up the environments such as the one needed for compiling react and that has been my biggest obstacle into creating blocks.
Regarding ideas for a future video!
Different kinds of fields, and especially innerblocks inclusion, so that one add blocks within the one we are building. Block templates then to limit what can be added etc.
This is extremely simple to do with ACF but it is also a kind of thing that seems should be done without ACF as it does not rely on fields.
Thanks.
Thanks for this tutorial
Great tutorial as always!! I have 2 quick questions,
1. If I'm taking a date and a time as inputs what would be the attribute type be for those? (creating a countdown timer widget)
2. Starting at timestamp 30:42, could you talk about how to make it into one function in the next video?
this is probably the best "getting started" developing blocks especially because you didn't use build tools, now I understand it much better and ask myself if i should use build tools at all... If you are planing to make more video-tutorials about Block development, i would love to see your kind of teaching blocks with dynamic content
I agree. A lot of the times they can really slow you down. Unless you're doing a complex project, you likely don't need any of that. The less friction, the better.
Thanks a lot for these useful information🤩
Thank's for tutorial! I want to see about custom plugins and themes development wordpress! Really interesting!
Thank you for watching and commenting.. I have videos about plugins and themes on my channel.
@@jherbison Great, I'll see! Continue please this!
Thanks, that's great - just started using wp a bit after developing some stuff for Joomla so good to see how to create those custom blocks for the block editor.
Awesome. Thank you for watching and commenting.
Great tutorial.
Do you have any tutorials on how to create an announcement banner plugin that sits on top of the website?
Thank you dear Herbison for the great tutorial. Please create some image, conditional and repeater field tutorials. Ex. if the field is blank it should disappear. Thank you again :)
Thank you for watching and commenting.. I am hoping I can get a couple of videos out this week to answer some of those questions.
Thank a lot!
Wait! Is it necessary to insert the block again every time I want to change a single detail in the front-end? Isn't a hard refresh and save in the backend enough to update the front end?
It is impracticable in the long term, especially if it is a block that needs to be reused in many places.
I want to create a block that accepts 1 attribute, lets say a city, then when its saved and displayed runs PHP code to generate the HTML (for arguments sake lets say the PHP code is going to call a web service and get weather data. Do you have a tutorial that covers how to set up a block that can do that?
dear Joshua: Many thanks for this userful video. Its great 👑💓🕊!
Very good - keep up your awesome work 🌟👑 plz do more such great videos - especially for the new version of WordPress - the 6.1 that is arriving next month!!
Can't thank enough. ❤ 😊👍🏼 Much
Great tutorial! So much easier to understand than the official WP docs. Could you please show how to show a block that uses an image from the media library. I would like to eventually create a Cover block that uses art direction to select different photos depending on screen width. I know how to do this with HTML but I want to be able to do this in WP. Thanks.
Helpful. That’s. Is there a way for getting the block to update later if you made changes?
You need to adopt me so I stay at your house learning this. Man so good at this.
Great tutorial. Thank you! Any chance you could do a short video of how to customize the admin panel for the blocks? Custom icon, visuals etc. Maybe hide unnecessary default Wordpress block and just keep the custom ones, it could probably be helpful for some people, including me :)
Thanks for this.. 👍
Thank you for watching and commenting.. Hopefully CZcams will process the full HD version soon.
Hi Joshua, thanks for another great tutorial. I have a question, don't we need to sanitize the the input values?
Thanks :)
I was able to register my plguin, but after I set up my JS file I am not able to see my block. Not sure what I am doing, anybody have a similar problem?
Thanks Joshua. You are a very good teller 👍💥
Please make a video about adding and output post meta for posts.
Consistent quality ✌🏼
Thank you so much!!
Thanks? Your cool developer!
Thank you!
Joshua, where are you? Could you do more lessons about custom plugin and theme wordpress development? I want to learn how I can do mini- classified dashboard plugin with on wordpress
Thank's for tutorial! I want to learn how can I do mini-classifieds add, from zero with unique plugin and theme development wordpress!
Have you started on it? Thank you for watching and commenting.
@@jherbison Hi, no I can't start. I don't know how architect it, from what things started. I want to learn how I can do this from zero
Hey, this is an awesome tutorial and was very helpful. Is there any continuation for this video, you mentioned regarding the CSS part like in the next video?
Can you post the link of the next video regarding styling and other stuffs? Really awesome and easiest way you described here.. enjoyed this video...
Yes, can you please post the styling video?
Please create one more tutorial related to the repeater field. If I need to add multiple anchor etc
What version of WP did you use for this tutorial. I cannot get the plugin to do anything apart from appear in the plugin list. I am using version 6.0.2.
Not sure.. It shouldn't matter, it still works on 6.0.2 on my end.. May be doing something wrong..
The WP version should not matter....
Great video, please do popup button with text block
what is the benefit of add this JS in header ?
Wow, that babel output is so readable.
Nice Tutorial, but what is the advantage of using React here? thx
Why not use npx @wordpress/create-block?
Because it teaches us nothing.
That works, but this is a TUTORIAL man!
I Wonder if someone can explain how to add download button for pdf in custom block.
Hi Joshua, this was actually a great tutorial and helped grasp the concepts of gutenberg. My only question is, why didn't you use jsx?
I was going to ask if you can just use jsx instead
Waiting for the styling part on the editor end, please publish that video as well.
Hey! that's great! but, where is the next video? 🤔we are anxiously awaiting!
Hey Joshua , can you please do a video on styling the custom Guntenberg block ?
YES! He talked about doing that in the "next vid" and.... (much to my disappointment) it looks like he hasn't made it yet.
I tried to follow this and I see the plugin but there is no widget. I went through everything several times and nothing works. I cannot see any errors being thrown in the console. How do you troubleshoot this?
Didn't work for me either.
Teach us how to add image option in the menu (apperance>menus) by coding please :> thanks in advance
it's awesome for me as beginner. A lot of thanks! Can you let me know what's are the benefits of joining your monthly membership.
Thank you for watching and commenting.. I respond quicker to members, members also go free access to download the "show files" as I call them. Some "show files" will be free anyway, but some are not. I only did that to get everyone to follow the video and learn how to do it instead of just downloading the file and then trying to figure it out. I will also soon be releasing member only videos with no ads and more detail. Last but not least, being a member also helps me create more videos and hopefully make this a full time gig.. I have been a developer for 34 years and have a lot of knowledge not only in development (almost any language) but also business knowledge on how to be a successful freelancer. Been doing it for a really long time!!
@@jherbison thank you sir for promptly replying me. Yes i do learn a lot from your channel day by day. I just started doing working on wordpress website development during covid time when i had lost my source of living with no prior knowledge of working with computer technologies. Even six years back i didn't have any knowledge of what an OS do in computers, why it is there? But these questions just made me curious to know more about how computers, web/mobile applications work. i was struggling with even updating content in websites then i just followed your videos and got the idea of even doing some of coding not only content updating. I am looking for getting into kind of freelancing since i haven't got any job in a company till this time since when it comes to my tech education, i am from non-technical background. Secondly, my age which is as of now is around 44yrs and i started just working in wordpress two years back doesn't fit to companies' criteria so i got not selected. For now, the people who are already doing freelancing i work with them for a little money. I'll join your membership.
Great video, but where is the next video how to add classes to the elements and style them ?
Whats the best way to do this that you show us in the video in 2024?
Doomsday is coming for wordpress. I am a back end developer and I don't want to touch unreliable front-end technologies. Can I do this with PHP only?
Unfortunately not. It is one of the biggest mistakes WordPress has made.
hi
thanks for video but file link are not working
A gutenberg block which will display a dropdown list with autocomplete from an external api. This api should work as middleware. If you make a video for us!!!❤❤❤❤
Great content! It is a shame that this is a very slow development flow
It doesn't show up in the Block library once coded.
Happened to me too, it means there's an error in your js file somewhere.
is must need to same folder structre like you
wordpress docs hard to understand. i'm reading them for 4th day, it hard to tell where smth goes and what it does. ))
in docs they describe edit function as it used for handle appearance in editor, while save is what it will be in frontend of site. but somewhere also mention that save function save shouldn't change anything. so it was very annoining question, how i can build actually reactive plugin that can work with, database for example. i looked code for custom elements, not to say they overwhelming me with defferent code, as i understood nevertheless all plugin logic decribed in edit function, and save function return null almoust all the time. it's very confusing and annoying) ok. keep watching.
why poor video quality? i see 360p
CZcams is taking their time at processing the HD quality of the video!
I am a smaller channel so they take their time processing my videos. They say they don't and that it is a first come first serve but that isn't true. I have a friend that has a really large channel. I posted a video and then he posted one 20 minutes later. His was processed almost immediately and mine took 2 hours.
@@jherbison i think you should publish your video when its fully converted because we need to read your coding which is not possible in lower resolution. anyway you are going great. you are going to be big. thumbs up
@@1mr4n4li Thank you.. It is funny, if I wait until it is done publishing, youtube takes even longer. I waited 42 hours one time before it was completed. They say if it takes more than 48 hours, you should remove it and re-upload it.
@@jherbison no problem you are doing good
Pleaes give source code
I will get that fixed today.. Sorry about that. Our redirect to the files aren't working for some reason. Moved the server and probably broke something. Thank you for letting me know.
It was a caching issue. It is fixed now and the link should be working.
i doesnt work anymore again :D
@@jherbison
This is soo wrong on so many levels
Yeah? Please explain! You can’t just say it is wrong without saying why! Did you make a video that shows how to do it right?