Adding Multiple Blocks to a WordPress Plugin in a few steps
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- Sign up for my FREE video crash course: JavaScript Essentials for WordPress Developers 👉🏽 aurooba.com/js-essentials-for... If you enjoyed this video, please subscribe! I am looking forward to making a lot more videos like this! 😄
Easily set up tooling and processes for multiple blocks in a single #WordPress plugin in just a few quick steps using @wordpress/create-block or @wordpress/scripts.
🎉 MY NEW BLOCK PLUGIN
Download: wordpress.org/plugins/superli...
Video: • Introducing the Super ...
✨ CONNECT WITH ME ✨
Weekly newsletter: [aurooba.com/signup/]
Twitter: / aurooba
00:00 Intro
00:38 Setting up a basic block plugin
02:14 Modifying the block plugin to support multiple blocks
03:05 Search/Replace all the right terms to get the multiple blocks working
03:55 Compiling, registering, and testing the multiple blocks
05:26 Modifying an existing plugin to support multiple blocks
05:36 THE MOST IMPORTANT PART
06:32 THE second most important part - วิทยาศาสตร์และเทคโนโลยี
OMGGGG, I waster a lot of time before i found this video. You are saviour. Thank you very much
Absolute lifesaver. In a few minutes, you got me out of a jam I had been stuck in for a couple of hours. Thank you so much for making this.
Glad it helped!
Worked like a charm, clear and easy to understand.
A year on and this is still super helpful, thank you for the clear explanation and easy to follow guidance!
Glad it was helpful!
You are the first of many many many tutorials that just explains this easy AF, so thank!
I cant believe it was that easy! Just spent several hours trying to figure this out having no luck with some other tutorials. Thank you!
Great to hear!
This is very helpful. I love the short videos. Each video just solves one problem. Very efficient!
Glad it was helpful! :)
The first multiblock configuration video that makes sense - thanks so much
You are awesome, stright in to point and clear, please do more developement tutorials.
Thank you! Much simpler than other examples I've seen.
I also love your straightforward presentation style.
OMG! finally a simple guide, Alhamdulillah
Glad you liked it!
not me being stuck for hours and you helped me solve it in minutes
Excellent video, thank you. Very clear and concise.
Glad it was helpful!
I didn't know you can do it out of the box like this now! Much easier. Thanks for this.
Glad I could help!
I have just spent 8 hours to find a working solution for this. You are a goddess! :)
Glad I could help!
Aurooba, you're indeed a blessing to the WordPress-Communuity. 🙏😊👍🏻
This video is very informative and easy to follow. You give us a great instruction in the architecture and the design of Blocks & -Block-Theming.
Explained very well - so wonderfully!. Your videos give us new ideas - and inspire us all😊. Thanks for sharing your videos. Thanks alot 😳♥
Awesome video, it help us a lot. Thank you lovely Aurooba
Thank you for making this! I was struggling so much to understand how it worked and you made it all simple.
Glad it helped!
You have such a talent for this! So clear and so useful. So grateful! Thank you so much for making it!
Thank you! :)
Of course I could count on you to have the answer I needed.
This is so incredibly helpful. Thank you!
very useful tutorial with crystal clear explanations. Many thanks !
The best! Thank you for this
Thank you for sharing. I love your videos.
You are just amazing. I haven't been able to find a guide like this for a very long time. Thank you!!!!
Glad it was helpful!
Thank you very much for your tutorial. It is very helpful.
Thanks - that was really helpful.
Great Tutorial! Lifesaver Thanks
Thank you, Aurooba. This is exactly what I was trying to work out for a plugin we are working on. Your videos are super useful, Thanks.
You're very welcome!
wow amazing, you sorted my mind over this issue, thank you
Glad to hear it! Don't hesitate to reach out if you have other questions!
More videos like this! Really helpful!
Awesome. I've been looking for that info and that's the simplest and quickest explanation around. Thanks for the help
Glad it helped!
Thank you so much for this tutorial. I'm a newbie and this was completely lifesaver.
Yay I'm so glad to hear that! :)
Great! Thanks a lot!
This is so cool! Thank a lot)
This is super helpful, many thanks for sharing, and a really good presenting style, no need to over complicate anything!
Glad it was helpful!
Thanks a million. Helped me a lot!
Glad to hear that!
Thanks! Very useful and easy explanation)
Glad it was helpful!
thnaks arooba
Thank you for the great video!
My pleasure!
Thanks for this - great video.
You're welcome, Mark!
Very helpful :) Thank you!
My pleasure!
Thanks a lot for your nice and precise tutorial. Waiting for more awesome videos on block development :)
They're coming in May! :)
Brilliant tutorial!
Glad you liked it!
perfect, thank you very much
Glad it helped!
fantastic 👍
Amazing! TY for sharing this ;)
My pleasure!
Thank you so much! This is a lifesaver 😆 I didn't want to use webpack x.x
Glad I could help! Keep in mind, wp-scripts IS using webpack.
This is really helpful as I switch blocks to using blocks.json. I have some hurdles to overcome still because I'm trying to convert one by one but this helped me understand a chunk of it. Thanks
My pleasure!
Thank you
Great tip...
Awesome... Simplest solution .. Been struggling all day ... 7 minute video did it all. :-D :-D :-D
should've watched your video 3 hours ago 😭 this was a life saver
I'm glad to hear it! :)
This was a very useful video for me
Glad it was helpful!
First: Thanks so much @Aurooba for creating and sharing this tutorial (freely!) which brought me up to speed (luckily I investigated before trying this out on my own :) )!
One question I still have: In case you want to apply a consistent style for all the blocks w/in your plugin: what would be your way to go? E.g. creating a style.scss and edit.scss directly in /src and referencing to it in index.js/edit.js via e.g. "import '.././editor.scss';"? Thanks!
thank you
You're welcome!
Excellent. Thank you. Each block has its own "editorStyle": "file:./index.css" file. Can you think of an easy way to add a second editor style that will be relevant to all of the inside blocks?
Hmm, why would you need a second editor style for that? you can add all the CSS you want targeting blocks inside this block in the same stylesheet and it will work. :)
Thanks Aurooba, that's really helpful. Glad I found your video as I was just about to start editing webpack config!
Can I just mention that this also works if you'd like to put your blocks into a blocks folder too i.e.
src/blocks/blocka
src/blocks/blocka
...and change register_block_type accordingly:
register_block_type( __DIR__ . '/build/blocks/blocka' );
register_block_type( __DIR__ . '/build/blocks/blockb' );
Thanks for the great video, subscribed.... and I found your podcast too :)
Bryan
Yes that definitely works as well. Wp-scripts will check all the folders of src/ (you can also change if you want to be src/ or not) for a block.json file :)
Let me know if you have other questions! And would love to hear what you think of the podcast!
Hello! Thanks for the video, clear and straightforward.
I have a question, what if I have this mutiple blocks plugin for my custom theme, but I want to load one single CSS file for my whole blocks?
I need to create like 20 blocks for the building of the website with blocks and I want to avoid load 20 css files.
Maybe I just need to call a single css file from my functions.php to the frontend and that's it, right? Or maybe there's a way to merge this css into a single file while building? I also readed that there's a function to load only the current css blocks that are in the post?
I just want to know the best recomended way to do it.
Thanks!
Can you make some tutorial on wordpress block development.
additionally, how to bundle non block.json to bundle . Is there any ways ?
After running the npx command and activating the plugin in the admin I am not able to see the block in the gutenberg editor. Am I missing something?
I was a le to make 2 blocks as per your video but then I tried making them block variations and now I have 4 blocks.. 2 for the created and 2 for the variations. Must be something with the names page? Do you have any feedback on this?
Hi, thanks for video. I have a question. It's possible to merge all block in an only build index.js? Thnaks
It absolutely is, and it was the way a lot of folks did it before (and still do). Create all your blocks in their respective folders, but bring all their index files into one index.js, and compile JUST that. It'll get you one build.js with all the blocks.
Great tutorial, thank you, is it ok that we also change textdomain?
Yes absolutely!
@@AuroobaMakes , sorry I was not correct, is it ok that every block have unique textdomain, should it to be the same for every one block? I'm new at Wordpress theming
@@AndrewUrch Ah! Yes, ideally, textdomains should be the same for all blocks that live in the same plugin or file. It allows anyone who translates that plugin or theme to catch and translate any strings throughout all the blocks then. :)
@@AuroobaMakes Roger that, thank you
Should this still work? I've tried it exactly as described but when I run `npm run build` it creates all the block folders in the build, but each of them only have block.json. In the terminal it says it's skipping each of the index.js files because "File is located outside of the "src" directory."
It should! It might be related to what you have in your block.json file as the file source.
Can we create pluginSidebar and blocks in the same plugin?
Yes absolutely! You'll need to add another entry point for wp-scripts for it though. Let me know if you'd like a tutorial on that!
@@AuroobaMakes Yes please do if possible
If I could give 10 likes, I would)))
Hello Mam I posted a comment for help but you deleted it why???
if you don't know its ok may be someone finds my comment could help me. But no worries. I will do it asking someone else. thanks for the faking on youtube.
I..didn't delete any comment? What did you need help with?