Let’s Build a Custom Block in One Hour

Block development can be challenging, but getting started with block development has never been easier. In the past few years, WordPress contributors have created tools to simplify the process and make building blocks more accessible to those without advanced knowledge of JavaScript and React. Coupled with core components, native block supports, and a bit of guidance, every WordPress builder can add custom blocks to their toolset.

This online workshop is a follow-up to my WordCamp US presentation “Let’s Build a Custom Block in 15 Minutes”. We will walk through the process of building a custom block using the Create Block tool in more detail and add a few additional features. For our block example, we will be “blockifying” the original Hello Dolly plugin by Matt Mullenweg.
---

[tobbeeleeto]

Awesome video. Whats the different between attributes: text-align and the supports: align. Dont they do the same thing ?

[EricThomson]

Thanks Nick. When I ran the command as shown the plugin was named: variant so I had to rerun it with the plugin name before the options.

[buddysek]

ever best before tons of thanks for this vlog

[Whatreally]

Hi Nick,

I want to modify the Title block a bit to suit one of my needs.

Do I need to have an IDE to copy the entire block code from github and make the relevant changes and build it? or can I just duplicate the folder structure on my WP installation and make the relevant modifications? will that work? and how to make the block upgradeable so that when WP updates the Title block (in my case), my custom block also can be updated without it affecting my site.

Thanks.

[YaidierPerez]

Great video! It would be awesome if you dig deeper into the editor on a second version :) Thanks again for such great content :)

[Franiveliuselmago]

Is it possible to add multiple blocks in one plugin?

[tinotaylor]

Would be nice if you guys added the documentation links in the video description

[jyotibarasker]

Your video is great can u please share the url of the plugin block that u have created using the create-block tool. Then it will be very helpful for me anyway love this video

[Scottyhutch]

great video bro. Im just wondering now that I have followed the video and created the block, how do I add it to my website? If Ive missed it/ overlooked it in the video, let me know, and I'll head to it.
cheers

[andreranulfo-dev]

I'm looking for a good Dynamic Block tutorial. Any suggests?

[webshoreeu]

Hey Nick,

Thanks for the great video! How did you create this fantastic looking presentation? You mention something at ~ 0:27s

[hujth]

Amazing video, thank you! realy put things in order for new comers like myself. custom blocks is a mess at first site and your video realy helped me. thanks again

[Scottyhutch]

If I have created a hamburger menu in HTML, CSS and Js already, which file does the HTML, JS code go into? I am wanting to make custom plugins with code I have already created. If you could help that would be brilliant. cheers

[AlexKozack]

🤔 But how to create custom block inside theme? I creating a theme and need several custom blocks to satisfy the entire design. Do I need ships several plugins for each custom block with my theme, or I may some how create several npm project for each block inside theme, or I may create single npm project for several blocks inside theme?

[kensleylewis]

although this was created 4 months ago. This tutorial already feels outdated. for example the --variant property is no longer part of the npx command process. Is this content still relevant? if so, what is the proper npx command we should be running "today" to do what you are showing.

[pasbesan]

Once WordPress was really good and great for developers. This blocks are great, but process how to make them is so stupid and confusing and all over the place. Next time think twice please :)