Adding Multiple Blocks to a WordPress Plugin in a few steps

Рет қаралды 6,805

Күн бұрын

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

Пікірлер: 110

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

@marcdan08 6 күн бұрын

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

@Anhjje Ай бұрын

Worked like a charm, clear and easy to understand.

@divin3d3signs 6 ай бұрын

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

@pattyopatty 2 жыл бұрын

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!

@yixiguan6520 Жыл бұрын

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

@AuroobaMakes Жыл бұрын

Glad it was helpful! :)

@user-cs7hv5dn2d Жыл бұрын

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

@AuroobaMakes 9 ай бұрын

Glad it was helpful!

@EdThompson Жыл бұрын

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

@mukundtiwari7207 2 жыл бұрын

thnaks arooba

@FactsnFatcsYT 5 ай бұрын

OMG! finally a simple guide, Alhamdulillah

@AuroobaMakes 5 ай бұрын

Glad you liked it!

@salihk5235 Жыл бұрын

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

@Kamerarkas1 Жыл бұрын

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

@tljoshh 11 ай бұрын

Excellent video, thank you. Very clear and concise.

@AuroobaMakes 9 ай бұрын

Glad it was helpful!

@user-bs3qg3bn6t 4 ай бұрын

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

@dave28lax Жыл бұрын

Thanks - that was really helpful.

@portismouth Жыл бұрын

The best! Thank you for this

@martinkaspar5095 2 жыл бұрын

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

@twelvelegsmarketingwebsite1603 Жыл бұрын

Great Tutorial! Lifesaver Thanks

@JasonAllenIII 2 жыл бұрын

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

@AuroobaMakes 2 жыл бұрын

Thank you! :)

@denishogan Жыл бұрын

This is so incredibly helpful. Thank you!

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

@pescadero84 6 ай бұрын

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

@AuroobaMakes 6 ай бұрын

Glad I could help!

@simphiwe4491 2 жыл бұрын

Thank you for sharing. I love your videos.

@dsebao Жыл бұрын

More videos like this! Really helpful!

@typhainelegales3430 Жыл бұрын

very useful tutorial with crystal clear explanations. Many thanks !

@andreysivak6404 Жыл бұрын

Great! Thanks a lot!

@friedrichsiever5964 Жыл бұрын

Thanks a million. Helped me a lot!

@AuroobaMakes Жыл бұрын

Glad to hear that!

@jojo3636 Жыл бұрын

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

@fockyable Жыл бұрын

This is so cool! Thank a lot)

@sarveshdhiman15 2 ай бұрын

fantastic 👍

@simonwallace-jones7046 2 жыл бұрын

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 2 жыл бұрын

You're very welcome!

@WilliamBay 5 ай бұрын

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

@saadahmad9380 Жыл бұрын

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

@AlexPuhl Жыл бұрын

Very helpful :) Thank you!

@AuroobaMakes Жыл бұрын

My pleasure!

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

@zurkik 2 жыл бұрын

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

@AuroobaMakes 2 жыл бұрын

Glad it helped!

@user-zg2ne2ko2i 7 ай бұрын

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

@AuroobaMakes 6 ай бұрын

Glad it was helpful!

@dt-k Жыл бұрын

Brilliant tutorial!

@AuroobaMakes Жыл бұрын

Glad you liked it!

@wpmarkuk Жыл бұрын

Thanks for this - great video.

@AuroobaMakes Жыл бұрын

You're welcome, Mark!

@Musiken 11 ай бұрын

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

@AuroobaMakes 9 ай бұрын

Glad it helped!

@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 2 жыл бұрын

Thank you for the great video!

@AuroobaMakes Жыл бұрын

My pleasure!

@lionelgibaudan3592 2 жыл бұрын

Great tip...

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

@efthakharbinalamdihab773 2 жыл бұрын

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

@AuroobaMakes 2 жыл бұрын

They're coming in May! :)

@marcaum54 Жыл бұрын

Amazing! TY for sharing this ;)

@AuroobaMakes Жыл бұрын

My pleasure!

@brittonwalker7341 2 жыл бұрын

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!

@alexanderborysenko3029 2 жыл бұрын

Thanks! Very useful and easy explanation)

@AuroobaMakes 2 жыл бұрын

Glad it was helpful!

@melanieb4212 Жыл бұрын

Thank you

@chandikalakshan1914 Жыл бұрын

This was a very useful video for me

@AuroobaMakes Жыл бұрын

Glad it was helpful!

@itsmangesh78 Жыл бұрын

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

@berty-dev 6 ай бұрын

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

@AuroobaMakes 6 ай бұрын

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

@azixy_web 2 жыл бұрын

perfect, thank you very much

@AuroobaMakes 2 жыл бұрын

Glad it helped!

@rechercheur2011ny 2 ай бұрын

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!

@craigiswayne Жыл бұрын

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

@AuroobaMakes 9 ай бұрын

I'm glad to hear it! :)

@user-bf5cu3kd9l Жыл бұрын

thank you

@AuroobaMakes Жыл бұрын

You're welcome!

@AlexFreixa18 3 ай бұрын

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!

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

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

@aishanstha 21 күн бұрын

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

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

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

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

@deepakroku4212 2 жыл бұрын

Can you make some tutorial on wordpress block development.

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

@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

@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

@user-zg2ne2ko2i 7 ай бұрын

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?