How to create a WordPress Gutenberg Custom Block

No video

How to create a WordPress Gutenberg Custom Block

Рет қаралды 48,423

Күн бұрын

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/gutenber...
#wordpress #gutenberg #howto

Пікірлер: 120

@jherbison 2 жыл бұрын

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!

@lumovox 2 жыл бұрын

Could you explain how to add image upload button and repeater fields? Thank you for great job

@ayesayrelax3136 Жыл бұрын

Can you do pdf Download list custom block please

@alreadyghosts7727 Жыл бұрын

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?

@mushabmithawala7553 11 ай бұрын

@@lumovox have you found such this kind of block?

@johnpearcey Жыл бұрын

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.

@jherbison Жыл бұрын

Thank you!

@andreranulfo-dev8607 Жыл бұрын

19:39 Just WOW!!! A real life saver!!! I know react, but this Babel really saves some time!! Thanks a lot!

@kensleylewis 2 жыл бұрын

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!

@jherbison 2 жыл бұрын

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.

@nexTabDE 11 ай бұрын

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

@nexTabDE 11 ай бұрын

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

@jherbison 11 ай бұрын

Awesome! Thanks for watching and commenting.

@logimw 11 ай бұрын

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

@jherbison 11 ай бұрын

Thank you. I am not a fan of react, but it is what WordPress is using more and more.

@MahmoudSaadawy 10 ай бұрын

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

@user-gj5qe9ii9b 11 ай бұрын

Man you literally blew my mind!!!!! this is exactly what I was looking for

@jherbison 11 ай бұрын

Thank you for watching and commenting.

@plakadiva Жыл бұрын

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

@fahadus Жыл бұрын

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.

@kirilltyrov8791 2 жыл бұрын

Thank's for tutorial! I want to see about custom plugins and themes development wordpress! Really interesting!

@jherbison 2 жыл бұрын

Thank you for watching and commenting.. I have videos about plugins and themes on my channel.

@kirilltyrov8791 2 жыл бұрын

@@jherbison Great, I'll see! Continue please this!

@tevfik7 Жыл бұрын

These videos are golden. Thank you for everything

@jherbison Жыл бұрын

Thank you. Glad you like them.

@thisweblabvideos 2 жыл бұрын

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.

@premiumeule1830 2 жыл бұрын

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

@JilaniAhmed 2 жыл бұрын

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

@jherbison 2 жыл бұрын

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.

@jimlanpheer5281 Жыл бұрын

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!

@al-thaidi Жыл бұрын

Thanks a lot Joshua! You made it seem so easy and approachable.

@thebilalafsar 6 ай бұрын

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!🇮🇳❤

@boxoffisa 2 жыл бұрын

You need to adopt me so I stay at your house learning this. Man so good at this.

@nnwebdigital Жыл бұрын

Hello Joshua! That was a great tutorial. I'm waiting for the next one.

@cholo2605 4 ай бұрын

Thanks a lot for these useful information🤩

@darrenforster99 Жыл бұрын

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.

@jherbison Жыл бұрын

Awesome. Thank you for watching and commenting.

@anirudhachakrabarty2050 Жыл бұрын

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

@mayrazamudio9914 Жыл бұрын

Yes, can you please post the styling video?

@nicolasreitin8397 7 ай бұрын

Hi Joshua, thanks for your great tutorial.

@PatrickMeppe 6 ай бұрын

Great tutorial.

@dmarushchak 2 жыл бұрын

As always great tutorial, thank you

@jherbison 2 жыл бұрын

Thank you!

@martinkaspar5095 Жыл бұрын

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

@pabloeduardoibanez 2 жыл бұрын

You are the best Joshua thanks!

@kirtyrov2636 2 жыл бұрын

Thank's for tutorial! I want to learn how can I do mini-classifieds add, from zero with unique plugin and theme development wordpress!

@jherbison 2 жыл бұрын

Have you started on it? Thank you for watching and commenting.

@kirtyrov2636 2 жыл бұрын

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

@kedarnathkare9067 9 ай бұрын

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?

@theman7050 2 жыл бұрын

Consistent quality ✌🏼

@jherbison 2 жыл бұрын

Thank you so much!!

@kennedyfreitas7548 2 жыл бұрын

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?

@jasonetaylor 2 жыл бұрын

I was going to ask if you can just use jsx instead

@user-zg2ne2ko2i 9 ай бұрын

Thanks? Your cool developer!

@jherbison 9 ай бұрын

Thank you!

@user-ly6ws7cz7n 2 жыл бұрын

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

@BaltoMovie Жыл бұрын

Wow, that babel output is so readable.

@ondrejbudicek5587 Жыл бұрын

Great video, please do popup button with text block

@nic7708 Жыл бұрын

Thanks Joshua. You are a very good teller 👍💥 Please make a video about adding and output post meta for posts.

@philipbunce95 Жыл бұрын

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.

@Dyl4n2010 2 жыл бұрын

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?

@tobbeeleeto 4 ай бұрын

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?

@viragvaghasiya2901 2 жыл бұрын

Hey Joshua , can you please do a video on styling the custom Guntenberg block ?

@jimlanpheer5281 Жыл бұрын

YES! He talked about doing that in the "next vid" and.... (much to my disappointment) it looks like he hasn't made it yet.

@aogunnaike 2 жыл бұрын

Thanks for this.. 👍

@jherbison 2 жыл бұрын

Thank you for watching and commenting.. Hopefully KZfaq will process the full HD version soon.

@PegoSama Ай бұрын

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.

@johnpearcey Жыл бұрын

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.

@jherbison Жыл бұрын

Not sure.. It shouldn't matter, it still works on 6.0.2 on my end.. May be doing something wrong..

@jimlanpheer5281 Жыл бұрын

The WP version should not matter....

@marcokielenschede Жыл бұрын

Hi Joshua, thanks for another great tutorial. I have a question, don't we need to sanitize the the input values?

@gutemberguemascarenhas7890 2 жыл бұрын

Thanks for this tutorial

@Whatreally123 15 күн бұрын

Hi Joshua, I am not a developer. I want to make a custom block based on existing gutenberg blocks. How can I use the code of existing blocks (available on github) and make some minor changes and turn it into an installable block? Or can i just duplicate the folder structure on my WP installaton and change relevant function names etc and will it work?

@MukeshKumar-vh4vp 2 жыл бұрын

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.

@jherbison 2 жыл бұрын

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!!

@MukeshKumar-vh4vp 2 жыл бұрын

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

@mahmoudsamyessawy 7 ай бұрын

Thanks :)

@alifallahrn 2 жыл бұрын

Hey! that's great! but, where is the next video? 🤔we are anxiously awaiting!

@TamasMoroz 2 жыл бұрын

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

@TristanBailey 2 жыл бұрын

Helpful. That’s. Is there a way for getting the block to update later if you made changes?

@commonindianman2442 2 жыл бұрын

Waiting for the styling part on the editor end, please publish that video as well.

@random11 6 ай бұрын

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?

@commonindianman2442 2 жыл бұрын

Please create one more tutorial related to the repeater field. If I need to add multiple anchor etc

@kippenvogelchen9717 Жыл бұрын

Nice Tutorial, but what is the advantage of using React here? thx

@andreysivak6404 2 жыл бұрын

Thank a lot!

@cristianpintor2809 Жыл бұрын

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?

@davidreid2196 Жыл бұрын

Do you have any tutorials on how to create an announcement banner plugin that sits on top of the website?

@user-pi4ze8lu8l 11 ай бұрын

what is the benefit of add this JS in header ?

@MontanaShedCenter 2 жыл бұрын

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?

@creativeexpress18 2 жыл бұрын

Didn't work for me either.

@robeeeeen Жыл бұрын

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!!!❤❤❤❤

@adavidmezei Жыл бұрын

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?

@jherbison Жыл бұрын

Unfortunately not. It is one of the biggest mistakes WordPress has made.

@johnstorm589 Жыл бұрын

Great content! It is a shame that this is a very slow development flow

@ozoshmaharjan2016 2 жыл бұрын

Teach us how to add image option in the menu (apperance>menus) by coding please :> thanks in advance

@ayesayrelax3136 Жыл бұрын

I Wonder if someone can explain how to add download button for pdf in custom block.

@alitayefi192 2 жыл бұрын

hi thanks for video but file link are not working

@creativeexpress18 2 жыл бұрын

It doesn't show up in the Block library once coded.

@jimlanpheer5281 Жыл бұрын

Happened to me too, it means there's an error in your js file somewhere.

@a99986 10 ай бұрын

is must need to same folder structre like you

@EgorDemeshko Жыл бұрын

wordpress docs hard to understand. i'm reading them for 4th day, it hard to tell where smth goes and what it does. ))

@EgorDemeshko Жыл бұрын

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.

@1mr4n4li 2 жыл бұрын

why poor video quality? i see 360p

@jherbison 2 жыл бұрын

KZfaq is taking their time at processing the HD quality of the video!

@jherbison 2 жыл бұрын

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.

@1mr4n4li 2 жыл бұрын

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

@jherbison 2 жыл бұрын

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

@1mr4n4li 2 жыл бұрын

@@jherbison no problem you are doing good

@Realswagoverlord Жыл бұрын

Pleaes give source code

@jherbison Жыл бұрын

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.

@jherbison Жыл бұрын

It was a caching issue. It is fixed now and the link should be working.

@soloman981 11 ай бұрын

i doesnt work anymore again :D @@jherbison