Creating a plugin with @wordpress/create-blocks that has multiple blocks
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- 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...
Thank you so much, I've discovered this channel recently and it's a real gem for WP developers.
Glad you enjoy it!
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!
Thanks for watching!
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.
Thanks for watching! I’m glad it helped.
Hi Ryan,
This is what I was looking for. Thanks for your explanation on each thing. Best wishes :)
Glad it was helpful!
Oh, I didn't know you were on TH-cam as well. Hello fellow Twitch dev streamer!
Thank you, Ryan. This video was very helpful.
That's a hell of a job man. I really appreciate your effort and thank you so much. I mean it. You are amazing.
I appreciate that!
Thanks man, you answered questions I did not know I had.
Thank a lot!
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?
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!
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
Have a look at this video for how I did this without a save.js file - th-cam.com/video/AYMPsCdRjSQ/w-d-xo.html
@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 ❤️
i am new to wordpress so how do you create built in custom blocks for a custom themes??
Is `slot fill` still relevant .......... if it is then how about a session based on that .
Hi Anoop. I talk about slot fill in this stream - th-cam.com/video/ZHmiI1p26Vc/w-d-xo.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 - th-cam.com/video/pMD0WpMaXEo/w-d-xo.html
For me, it does not work. after building it does not load blocks
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.
@@RyanWelcherCodes I got solved now, I had an issue with path in block.json file.
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.
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.
@@RyanWelcherCodes Awesome! I'll be looking forward to that one. 👌👍
@@sir_afk have a look at this video - th-cam.com/video/AYMPsCdRjSQ/w-d-xo.html
@@RyanWelcherCodes Spot on! Many thanks. 👌👍
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?
You need to make sure that the name of each block is different in the block.json file.
They are different in each block.json @@RyanWelcherCodes
I have added ten blocks and each of their names are different
@@RyanWelcherCodes
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