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!
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 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
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!
@@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. :)
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?
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!
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.
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."
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!
The first multiblock configuration video that makes sense - thanks so much
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!
Worked like a charm, clear and easy to understand.
OMGGGG, I waster a lot of time before i found this video. You are saviour. Thank you very much
not me being stuck for hours and you helped me solve it in minutes
Thank you! Much simpler than other examples I've seen.
I also love your straightforward presentation style.
Thank you for making this! I was struggling so much to understand how it worked and you made it all simple.
Glad it helped!
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 awesome, stright in to point and clear, please do more developement tutorials.
I have just spent 8 hours to find a working solution for this. You are a goddess! :)
Glad I could help!
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!
Awesome video, it help us a lot. Thank you lovely Aurooba
Thank you very much for your tutorial. It is very helpful.
very useful tutorial with crystal clear explanations. Many thanks !
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... 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! :)
Thanks - that was really helpful.
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!
The best! Thank you for this
This is so incredibly helpful. Thank you!
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 so much for this tutorial. I'm a newbie and this was completely lifesaver.
Yay I'm so glad to hear that! :)
Brilliant tutorial!
Glad you liked it!
Of course I could count on you to have the answer I needed.
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!
thnaks arooba
OMG! finally a simple guide, Alhamdulillah
Glad you liked it!
Thanks a million. Helped me a lot!
Glad to hear that!
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!
You have such a talent for this! So clear and so useful. So grateful! Thank you so much for making it!
Thank you! :)
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!
This was a very useful video for me
Glad it was 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!
Very helpful :) Thank you!
My pleasure!
Thank you for the great video!
My pleasure!
Thank you for sharing. I love your videos.
Great! Thanks a lot!
Thanks a lot for your nice and precise tutorial. Waiting for more awesome videos on block development :)
They're coming in May! :)
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. :)
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!
Thanks! Very useful and easy explanation)
Glad it was helpful!
fantastic 👍
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!
Great tip...
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
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?
perfect, thank you very much
Glad it helped!
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!
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.
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?
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
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!