How to create a WordPress Gutenberg Custom Block

preview_player
Показать описание
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.

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

jherbison
Автор

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.

johnpearcey
Автор

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

premiumeule
Автор

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

andreranulfo-dev
Автор

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!

jimlanpheer
Автор

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

al-thaidi
Автор

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!

kensleylewis
Автор

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

nnwebdigital
Автор

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

nexTabDE
Автор

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

logimw
Автор

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

MahmoudSaadawy
Автор

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

gjqeiib
Автор

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.

thisweblabvideos
Автор

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

plakadiva
Автор

These videos are golden. Thank you for everything

tevfik
Автор

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

kirilltyrov
Автор

Hi Joshua, thanks for your great tutorial.

nicolasreitin
Автор

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

JilaniAhmed
Автор

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

boxoffisa
Автор

Thanks a lot for these useful information🤩

cholo