Creating a plugin with @wordpress/create-blocks that has multiple blocks

No video

Creating a plugin with @wordpress/create-blocks that has multiple blocks

Рет қаралды 6,261

Күн бұрын

Update: This video is a little out of date. The code will still work, but the @wordpress/scripts package now supports multiple blocks by default. Check out this video for more • Customizing your @word...
We use the @wordpress/create-blocks package to scaffold a plugin that contains a single custom block. Then we modify the setup to be able to have multiple blocks.
Highights:
3:17 -14:35 Used the @wordpress/create-block package to scaffold a new plugin with a single block.
14:36 - 36:25 Restructured the plugin to allow for registering multiple blocks.
36:26 - 43:51 Added a custom webpack.config.js to set up one entry point per block.
44:00 Demo'd a custom template that uses the same structure: npx @wordpress/create-block --template @ryanwelcher/multiple-blocks-template.
Template url: www.npmjs.com/...
Repository for all my streams: github.com/rya...

Пікірлер: 35

@alexandersamokhin 2 жыл бұрын

Thank you so much, I've discovered this channel recently and it's a real gem for WP developers.

@RyanWelcherCodes 2 жыл бұрын

Glad you enjoy it!

@kpkratz 2 жыл бұрын

Thank you for this super helpful, quality explanation. I'm stoked to see I'm not the only one that hits the white-screen of death!

@RyanWelcherCodes 2 жыл бұрын

Thanks for watching!

@antoniocruz1202 2 жыл бұрын

Hi Ryan, thanks so much for this video. It saved me a lot of time and I was able to create a multi-block plugin following your instructions.

@RyanWelcherCodes 2 жыл бұрын

Thanks for watching! I’m glad it helped.

@thewpwing 2 жыл бұрын

Hi Ryan, This is what I was looking for. Thanks for your explanation on each thing. Best wishes :)

@RyanWelcherCodes 2 жыл бұрын

Glad it was helpful!

@atuljain5107 Жыл бұрын

Thank you, Ryan. This video was very helpful.

@nexTabDE 11 ай бұрын

Oh, I didn't know you were on KZfaq as well. Hello fellow Twitch dev streamer!

@andreysivak6404 Жыл бұрын

Thank a lot!

@MrZerosixZeroone Жыл бұрын

Thanks man, you answered questions I did not know I had.

@lazygamer6249 2 жыл бұрын

That's a hell of a job man. I really appreciate your effort and thank you so much. I mean it. You are amazing.

@RyanWelcherCodes 2 жыл бұрын

I appreciate that!

@jeffersoncarvalho2566 Жыл бұрын

And when we build the plug-in for production? We don't want to zip the plug-in with the source files of the blocks (includes/block-editor/block-name/...), only the bundled files. But the block.json files are not copied to bundle directory, it is only in the includes/block-editor/block-name/block.json. Will the register_block_type function in the server works?

@ararthepro3972 Жыл бұрын

Thank you very much for the video, you made some unexplained sections clear!,+ I have several questions: isn't it needed to `wp_enqueue_script`/`wp_register_script` the generated `build/index.js` file? (I didn't see you doing it, is it done automatically? or did you import it in from another pre-registered `js` file?) + about the dependency array in the `php` (sec arg of the `register_block_type()`), you didn't write it, is it mandatory? I didn't see U got errors from it, should I ignore it? and if not and I use one entry for all blocks, should I put the same generated dependency array from `index.asset.php` for every block registration? and using the @wordpress/create-block I got a `php` file called `render.php` what is it for? Thanks again!

@kumpalikumpa 2 жыл бұрын

i am new to wordpress so how do you create built in custom blocks for a custom themes??

@isagive 2 жыл бұрын

Awesome stuff Ryan, you really helped me understand the structure and logic 🙏 I want to get rid of the save.js and use a dynamic PHP save file using your package. Getting a brain freeze trying to think how to do that... i watched your video showing how to do that when dealing with one block - but... how do I integrate that possibility into this package? In anycase, Thank you very much Ryan

@RyanWelcherCodes 2 жыл бұрын

Have a look at this video for how I did this without a save.js file - kzfaq.info/get/bejne/d799g9Z0ybjOg4U.html

@isagive 2 жыл бұрын

@Ryan Welcher Codes Thanks, Ryan... i am stuck on one point... I'll share it with a little prayer that might have a minute to check it i almost managed to organized your 'multi-block' in the build folder image: prnt.sc/h5HgNYad4lq7 But, i can't seem to output valid CSS files into the corresponding folder, either MiniCssExtractPlugin doesn't work or i am losing my mind I also tried to just all the CSS files into one CSS folder but i am getting empty CSS I don't understand why 😭 prnt.sc/M6OKm-AueIhZ Any ideas? in any case, many thanks for the great tutorials... keep it rolling - appreciate you ❤️

@AnoopD2013 2 жыл бұрын

Is `slot fill` still relevant .......... if it is then how about a session based on that .

@RyanWelcherCodes 2 жыл бұрын

Hi Anoop. I talk about slot fill in this stream - kzfaq.info/get/bejne/kK6dnKxi1Ziahpc.html&lc=UgzOkPN3KMeIAiYAZFV4AaABAg and if you're interested in a more deep-dive, I did a presentation on the SlotFill system that is available to view here - kzfaq.info/get/bejne/prN0Y7qhsse8daM.html

@ViralMehta 2 жыл бұрын

For me, it does not work. after building it does not load blocks

@RyanWelcherCodes 2 жыл бұрын

Sorry to hear you're running into issues. If the blocks are building, perhaps the issue is with the register_block_type call on the PHP side? I'm happy to look at your code if that helps.

@ViralMehta 2 жыл бұрын

@@RyanWelcherCodes I got solved now, I had an issue with path in block.json file.

@sir_afk 2 жыл бұрын

Subbed on both my youtube accounts for this one. Is it possible to place the build files in their own respective folders within the build folder? 😄 P.s. Thanks for sharing.

@RyanWelcherCodes 2 жыл бұрын

Thanks for watching! In theory, each entry point could be put into their own folder. Recently, the `@wordpress/scripts` package was updated to look for multiple block.json files. This removes the need to create a custom webpack.config.js. I have a video coming soon that goes over that.

@sir_afk 2 жыл бұрын

@@RyanWelcherCodes Awesome! I'll be looking forward to that one. 👌👍

@RyanWelcherCodes 2 жыл бұрын

@@sir_afk have a look at this video - kzfaq.info/get/bejne/d799g9Z0ybjOg4U.html

@sir_afk 2 жыл бұрын

@@RyanWelcherCodes Spot on! Many thanks. 👌👍

@MuhammadAliHamza-fq2kj 6 ай бұрын

Whenever I add Multiple block I get this error in console "blocks.min.js?ver=7204d43123223474471a:3 Block "create-block/test2" is already registered" why is that happening?

@RyanWelcherCodes 6 ай бұрын

You need to make sure that the name of each block is different in the block.json file.

@MuhammadAliHamza-fq2kj 6 ай бұрын

They are different in each block.json @@RyanWelcherCodes

@MuhammadAliHamza-fq2kj 6 ай бұрын

I have added ten blocks and each of their names are different @@RyanWelcherCodes

@MuhammadAliHamza-fq2kj 6 ай бұрын

The name of each block in every block.json is different still I am getting an error in console that block is already registered. @@RyanWelcherCodes