Adding Multiple Blocks to a WordPress Plugin in a few steps

[@ericjonas4697]

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.

[@AuroobaMakes]

Glad it helped!

[@divin3d3signs]

You are the first of many many many tutorials that just explains this easy AF, so thank!

[@EdThompson]

The first multiblock configuration video that makes sense - thanks so much

[@yixiguan6520]

This is very helpful. I love the short videos. Each video just solves one problem. Very efficient!

[@AuroobaMakes]

Glad it was helpful! :)

[@ghussaindars-z7d]

OMGGGG, I waster a lot of time before i found this video. You are saviour. Thank you very much

[@pattyopatty]

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!

[@AuroobaMakes]

Great to hear!

[@Anhjje]

Worked like a charm, clear and easy to understand.

[@Musiken]

Thank you for making this! I was struggling so much to understand how it worked and you made it all simple.

[@AuroobaMakes]

Glad it helped!

[@JoshSalwen-i9r]

Thank you! Much simpler than other examples I've seen. I also love your straightforward presentation style.

[@JeffHebert-i2x]

A year on and this is still super helpful, thank you for the clear explanation and easy to follow guidance!

[@AuroobaMakes]

Glad it was helpful!

[@salihk5235]

You are awesome, stright in to point and clear, please do more developement tutorials.

[@jojo3636]

not me being stuck for hours and you helped me solve it in minutes

[@craigiswayne]

should've watched your video 3 hours ago 😭 this was a life saver

[@AuroobaMakes]

I'm glad to hear it! :)

[@Kamerarkas1]

Awesome video, it help us a lot. Thank you lovely Aurooba

[@НикитаТарасиков]

You are just amazing. I haven't been able to find a guide like this for a very long time. Thank you!!!!

[@AuroobaMakes]

Glad it was helpful!

[@pescadero84]

I have just spent 8 hours to find a working solution for this. You are a goddess! :)

[@AuroobaMakes]

Glad I could help!

[@dsebao]

More videos like this! Really helpful!

[@tljoshh]

Excellent video, thank you. Very clear and concise.

[@AuroobaMakes]

Glad it was helpful!

[@itsmangesh78]

Awesome... Simplest solution .. Been struggling all day ... 7 minute video did it all. :-D :-D :-D

[@fatesallow]

I didn't know you can do it out of the box like this now! Much easier. Thanks for this.

[@AuroobaMakes]

Glad I could help!

[@typhainelegales3430]

very useful tutorial with crystal clear explanations. Many thanks !

[@hujth6]

wow amazing, you sorted my mind over this issue, thank you

[@AuroobaMakes]

Glad to hear it! Don't hesitate to reach out if you have other questions!

[@saadahmad9380]

Thank you very much for your tutorial. It is very helpful.

[@JasonAllenIII]

You have such a talent for this! So clear and so useful. So grateful! Thank you so much for making it!

[@AuroobaMakes]

Thank you! :)

[@portismouth]

The best! Thank you for this

[@dave28lax]

Thanks - that was really helpful.

[@FactsnFatcsYT]

OMG! finally a simple guide, Alhamdulillah

[@AuroobaMakes]

Glad you liked it!

[@0nisomnia]

Thank you so much for this tutorial. I'm a newbie and this was completely lifesaver.

[@AuroobaMakes]

Yay I'm so glad to hear that! :)

[@friedrichsiever5964]

Thanks a million. Helped me a lot!

[@AuroobaMakes]

Glad to hear that!

[@dt-k]

Brilliant tutorial!

[@AuroobaMakes]

Glad you liked it!

[@simonwallace-jones7046]

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.

[@AuroobaMakes]

You're very welcome!

[@denishogan]

This is so incredibly helpful. Thank you!

[@twelvelegsmarketingwebsite1603]

Great Tutorial! Lifesaver Thanks

[@martinkaspar5095]

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 😳♥

[@AlexPuhl]

Very helpful :) Thank you!

[@AuroobaMakes]

My pleasure!

[@gmagnenat]

Awesome. I've been looking for that info and that's the simplest and quickest explanation around. Thanks for the help

[@AuroobaMakes]

Glad it helped!

[@WilliamBay]

Of course I could count on you to have the answer I needed.

[@mukundtiwari7207]

thnaks arooba

[@RobWatson]

This is super helpful, many thanks for sharing, and a really good presenting style, no need to over complicate anything!

[@AuroobaMakes]

Glad it was helpful!

[@aprilauger9484]

Thank you for the great video!

[@AuroobaMakes]

My pleasure!

[@chandikalakshan1914]

This was a very useful video for me

[@AuroobaMakes]

Glad it was helpful!

[@fockyable]

This is so cool! Thank a lot)

[@efthakharbinalamdihab773]

Thanks a lot for your nice and precise tutorial. Waiting for more awesome videos on block development :)

[@AuroobaMakes]

They're coming in May! :)

[@marcaum54]

Amazing! TY for sharing this ;)

[@AuroobaMakes]

My pleasure!

[@berty-dev]

Thank you so much! This is a lifesaver 😆 I didn't want to use webpack x.x

[@AuroobaMakes]

Glad I could help! Keep in mind, wp-scripts IS using webpack.

[@sarveshdhiman15]

fantastic 👍

[@terrydavis5919]

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?

[@AuroobaMakes]

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. :)

[@simphiwe4491]

Thank you for sharing. I love your videos.

[@alexanderborysenko3029]

Thanks! Very useful and easy explanation)

[@AuroobaMakes]

Glad it was helpful!

[@andreysivak6404]

Great! Thanks a lot!

[@brittonwalker7341]

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]

My pleasure!

[@rechercheur2011ny]

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!

[@aaafffsss18]

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!

[@aishanstha]

additionally, how to bundle non block.json to bundle . Is there any ways ?

[@jupa8712]

Hi, thanks for video. I have a question. It's possible to merge all block in an only build index.js? Thnaks

[@AuroobaMakes]

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.

[@AndrewUrch]

Great tutorial, thank you, is it ok that we also change textdomain?

[@AuroobaMakes]

Yes absolutely!

[@AndrewUrch]

@@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

[@AuroobaMakes]

@@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. :)

[@AndrewUrch]

@@AuroobaMakes Roger that, thank you

[@raviramcharan3812]

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?

[@azixy_web]

perfect, thank you very much

[@AuroobaMakes]

Glad it helped!

[@melanieb4212]

Thank you

[@InteractiveRealm]

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?

[@deepakroku4212]

Can you make some tutorial on wordpress block development.

[@lionelgibaudan3592]

Great tip...

[@zaidclsn6208]

Can we create pluginSidebar and blocks in the same plugin?

[@AuroobaMakes]

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!

[@zaidclsn6208]

@@AuroobaMakes Yes please do if possible

[@shoelaced]

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."

[@AuroobaMakes]

It should! It might be related to what you have in your block.json file as the file source.

[@bryanwadd]

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

[@AuroobaMakes]

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

[@AuroobaMakes]

You're welcome!

[@НикитаТарасиков]

If I could give 10 likes, I would)))

[@journeytocoding816]

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.

[@AuroobaMakes]

I..didn't delete any comment? What did you need help with?

[@wpmarkuk]

Thanks for this - great video.

[@AuroobaMakes]

You're welcome, Mark!