Let’s Build a Custom Block in One Hour
Vložit
- čas přidán 9. 09. 2024
- 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.
---
View this video and others on WordPress.TV: wordpress.tv/2...
tutorial starts at 8:40
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.
ever best before tons of thanks for this vlog
Best wordpress tutorial i have seen!
Thanks this was helpful!
Awesome 👍👍, thank you very much.
Thanks for the video!
Awesome video. Whats the different between attributes: text-align and the supports: align. Dont they do the same thing ?
Great video! It would be awesome if you dig deeper into the editor on a second version :) Thanks again for such great content :)
Really awesome and best tutorial
Would be nice if you guys added the documentation links in the video description
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
Buenardardo 👍👍👍
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.
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
Is it possible to add multiple blocks in one plugin?
thank!
Thanks. Is there a repo file?
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
I'm looking for a good Dynamic Block tutorial. Any suggests?
Hey Nick,
Thanks for the great video! How did you create this fantastic looking presentation? You mention something at ~ 0:27s
I think he mentioned it in the WordCamp US version of this talk - it's a web page built with blocks :D
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.
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
🤔 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?
Have you considered adding block patterns to your theme?
developer.wordpress.org/themes/advanced-topics/block-patterns/
@@WordPress It's not exacly what I'm looking for. In my case, I have a complex widget whose rendering is different for the editor and for the frontend. The user should also have additional edditing tools and buttons. I don't see how to acchive this with template pattern
They can still have editing options with block patterns. We'd recommend giving it a shot, then posting your question here if you're running into difficulties:
wordpress.org/support/forum/wp-advanced/
Add multiple blocks to WP plugin
@@AB-kq9xm There needs to be more educational resources on this
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 :)
Updating failed. The response is not a valid JSON response. thats an hour of my life I will never get back
OMG. Just get on with it.