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 😳♥
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!
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!
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. :)
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.
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?
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
@@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. :)
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."
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 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.
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!
You are the first of many many many tutorials that just explains this easy AF, so thank!
This is very helpful. I love the short videos. Each video just solves one problem. Very efficient!
Glad it was helpful! :)
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!
The first multiblock configuration video that makes sense - thanks so much
OMGGGG, I waster a lot of time before i found this video. You are saviour. Thank you very much
Thank you for making this! I was struggling so much to understand how it worked and you made it all simple.
Glad it helped!
I have just spent 8 hours to find a working solution for this. You are a goddess! :)
Glad I could help!
Worked like a charm, clear and easy to understand.
should've watched your video 3 hours ago 😭 this was a life saver
I'm glad to hear it! :)
not me being stuck for hours and you helped me solve it in minutes
A year on and this is still super helpful, thank you for the clear explanation and easy to follow guidance!
Glad it was helpful!
Thank you! Much simpler than other examples I've seen.
I also love your straightforward presentation style.
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!
More videos like this! Really 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!
Excellent video, thank you. Very clear and concise.
Glad it was helpful!
Awesome video, it help us a lot. Thank you lovely Aurooba
You are awesome, stright in to point and clear, please do more developement tutorials.
OMG! finally a simple guide, Alhamdulillah
Glad you liked it!
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!
very useful tutorial with crystal clear explanations. Many thanks !
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 😳♥
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!
Awesome... Simplest solution .. Been struggling all day ... 7 minute video did it all. :-D :-D :-D
You have such a talent for this! So clear and so useful. So grateful! Thank you so much for making it!
Thank you! :)
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 very much for your tutorial. It is very helpful.
This is so incredibly helpful. Thank you!
The best! Thank you for this
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 so much for this tutorial. I'm a newbie and this was completely lifesaver.
Yay I'm so glad to hear that! :)
Thanks a million. Helped me a lot!
Glad to hear that!
Brilliant tutorial!
Glad you liked it!
Thanks - that was really helpful.
This is super helpful, many thanks for sharing, and a really good presenting style, no need to over complicate anything!
Glad it was helpful!
Of course I could count on you to have the answer I needed.
Very helpful :) Thank you!
My pleasure!
Great Tutorial! Lifesaver Thanks
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!
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. :)
This was a very useful video for me
Glad it was helpful!
Thank you for the great video!
My pleasure!
thnaks arooba
Thanks a lot for your nice and precise tutorial. Waiting for more awesome videos on block development :)
They're coming in May! :)
Thank you for sharing. I love your videos.
This is so cool! Thank a lot)
Thanks! Very useful and easy explanation)
Glad it was helpful!
Amazing! TY for sharing this ;)
My pleasure!
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.
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?
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.
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?
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!
Great! Thanks a lot!
fantastic 👍
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
Great tip...
Can you make some tutorial on wordpress block development.
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.
Thank you
perfect, thank you very much
Glad it helped!
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
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!
thank you
You're welcome!
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?
Thanks for this - great video.
You're welcome, Mark!