Let’s Build a Custom Block in One Hour

Подписаться 38 тыс.

Просмотров 22 тыс.

50% 1

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

Опубликовано:

30 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

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

@nezarfadle7715 Год назад

Awesome 👍👍, thank you very much.

@AB-kq9xm Год назад

tutorial starts at 8:40

@Whatreally123 Месяц назад

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.

@BryanKeniryG 24 дня назад

Updating failed. The response is not a valid JSON response. thats an hour of my life I will never get back

@tobbeeleeto 5 месяцев назад

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

@Franiveliuselmago Год назад

Is it possible to add multiple blocks in one plugin?

@jyotibarasker2792 Год назад

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

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

@WordPress Год назад

Have you considered adding block patterns to your theme? developer.wordpress.org/themes/advanced-topics/block-patterns/

@AlexKozack Год назад

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

@WordPress Год назад

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/

@AB-kq9xm Год назад

Add multiple blocks to WP plugin

@taunado 5 месяцев назад

@@AB-kq9xm There needs to be more educational resources on this

@taunado 5 месяцев назад

Thanks. Is there a repo file?

@YaidierPerez Год назад

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

@Scottyhutch1 Год назад

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

@andreranulfo-dev8607 10 месяцев назад

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

@tinotaylor 7 месяцев назад

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

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

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

@Scottyhutch1 Год назад

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

@simonbates8715 Год назад

OMG. Just get on with it.

@buddysek9119 Год назад

ever best before tons of thanks for this vlog

@Agent12214 6 месяцев назад

Thanks this was helpful!

@LatinoWebStudio Год назад

Thanks for the video!

@webshoreeu Год назад

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

@TomJardine-Smith 10 месяцев назад

I think he mentioned it in the WordCamp US version of this talk - it's a web page built with blocks :D

@LearWithSaiful Год назад

Really awesome and best tutorial

@waltermarcelo751 Год назад

Buenardardo 👍👍👍

@sleepyholes Год назад

Best wordpress tutorial i have seen!

@hujth6 Год назад

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