Create WordPress Block Plugins for Block Editor aka Gutenberg

Тәжірибелік нұсқаулар және стиль

In this video, we will be building blocks in a block plugin for the WordPress Block editor also known as Gutenberg Editor.
We will create see how you can scaffold a quick blocks plugin in 2023 and use Block editor APIs to add features.
Code used in this video -
github.com/smalltowndev/tutor...
Links to useful WordPress Block Editor Docs:
Scaffold Blocks Plugin -
developer.wordpress.org/block...
Anatomy of a Block Plugin -
developer.wordpress.org/block...
Block Editor package -
developer.wordpress.org/block...
Block Editor Components -
wordpress.github.io/gutenberg/
=== Timestamps ===
00:00 - Installing @wordpress/create-block
03:51 - Activating the block
04:51 - Creating multiple blocks
09:13 - Customizing the blocks
Music in this video -
Sappheiros - Embrace" is under a Creative Commons license (CC BY 3.0)
/ sappheiros
Music promoted by BreakingCopyright: bit.ly/embrace-song

Пікірлер: 26

  • @SmallTownDev
    @SmallTownDev10 ай бұрын

    Hi guys, I hope you're enjoying this video and I appreciate any response/feedback on this 🙌 Please know that a simple Subscribe/Like from you goes a long way for me, so if you could just hit the subscribe button it would mean the world to me ❤

  • @portalteam5832
    @portalteam5832 Жыл бұрын

    Thanks for the great tutorial. One note: you should use `users.find` instead of `users.filter` or `users.map`. It returns the data directly instead of having to set an outside variable as well, it stops looping through as soon as it finds a result so it's more performant in all cases except when the last user is selected, then it's equally performant.

  • @SmallTownDev

    @SmallTownDev

    Жыл бұрын

    Glad you found it useful, and yes thats a great tip ❤️

  • @nateux8267
    @nateux826710 ай бұрын

    SO far, the most helpful example of development for the new WP paradigms, much appreciated! Any chance you want to share your VScode theme and font?

  • @SmallTownDev

    @SmallTownDev

    10 ай бұрын

    Hi there 👋, Really appreciate your kind words ❤️ I'm also building a WordPress Plugin Starter package, if you have some time do check it out - kzread.info/dash/bejne/e4mtrMWOqrW1d8Y.html Also, VSCode theme is - Copilot Theme by Benjamin Benais, And the font is - Dank Mono marketplace.visualstudio.com/items?itemName=BenjaminBenais.copilot-theme Have a great day 🙌

  • @daviddwq4513
    @daviddwq45136 ай бұрын

    Thank you for this tut. Just one little comment you don't need to downloading wp components again as you did in 21:10 since they are already when you downloaded the scaffold wordpress-blocks... Anyway this shows us very well the path that wordpress it's taking, I assumed that very soon it won't need of web developers...in some sense that would be good for the end user. Recently I'm working on a block trying to use the CSS Grid Layout Module but in the editor becomes so messy however in the front end it renders exactly what I want... MUI has a grid component but ironically it's based on CSS Flexible Box Layout Module making it very difficult to customized the markup. I hope this is going tobe my last project in WP and just by watching you struggling with a simple fetching I know I'm not alone hehehe....

  • @SmallTownDev

    @SmallTownDev

    6 ай бұрын

    Thank you for watching David, and oops I’ll keep that in mind. Hah, well struggle is what makes it fun sometimes 😆. Anyways I wish you all the best for your future endeavors 🙌

  • @SimmsRyan97
    @SimmsRyan973 ай бұрын

    Is there any way to add classes depending on the user selected? I have managed to get it to work within the editor but can't get it to show the class on the front end.

  • @nhatnghe5073
    @nhatnghe50739 ай бұрын

    I abandoned the front end learning path and came to wordpress as I find out a peaceful and stable place. Ironically, now wordpress wants to jump into the chaos of the dependency hell... anyway, thanks bro!

  • @SmallTownDev

    @SmallTownDev

    9 ай бұрын

    Hehe sounds familiar, but it has been that way in plugin dev as well if you haven’t used PHP’s composer it is the same as npm/yarn of Node. Though I get it most plugins do get away without using Composer dependencies. Basically dependencies are an integral part of reusing code shared by community within the language ecosystem. And glad this helps 🙌

  • @user-l9v7xff567
    @user-l9v7xff5678 ай бұрын

    Can I load someone else's plugin I'm currently using into VC code and just fix the CSS? The style isn't pretty so I'd like to change it a bit. Is that possible?

  • @saxena_aks
    @saxena_aks6 ай бұрын

    How can i create a cpt layout with block Like if i create team via shortcode can i create a layout in the block which filters the data in frontend also?

  • @SmallTownDev

    @SmallTownDev

    6 ай бұрын

    Yes you can, you can create a server side block and easily do this. Or you can also do in all client side by fully embracing rest apis, by exposing some custom endpoints and using them in the block if not with localized js data. I think this could very well go in one of my upcoming videos, I’ll keep this in mind 🙌

  • @easywebsolution7044
    @easywebsolution70442 ай бұрын

    Thanks , unique tutorial on youtube. but you should not record it at first time.

  • @taunado
    @taunado2 ай бұрын

    I assume this works with FSE? I'm new to Wordpress - do I create the block that has to be in the form of a plugin, install plugin and then I'll have the block in the library to add to my FSE pages?

  • @taunado

    @taunado

    2 ай бұрын

    Or can I create the blocks within my theme repo and then the client has no need to install the blocks as a plugin if they install the theme?

  • @Erikshan
    @Erikshan10 ай бұрын

    Is this the most latest and efficient way to build the blocks? I am trying to learn building blocks but there are too many inconsistencies on how people built it before because of all the rapid changes. Is it now stable enough to work on building blocks?

  • @SmallTownDev

    @SmallTownDev

    10 ай бұрын

    Hey, Yes this is now the standard way to build blocks. IMO block building is way more stable compared to FSE themes right now as the WP Gutenberg teams focus has been shifted more towards overall editor experience. I’ll be posting more videos on block development, you can checkout this channel for more advanced ways of building plugins in WordPress. Also one where, I’m working on a Plugin starter package which also includes block development and a nice admin ui - kzread.info/dash/bejne/e4mtrMWOqrW1d8Y.htmlsi=puTDiofQ9U4VyzZ3 Let me know if you have any suggestions for future content, I’d be more than happy to add that to my list ✌️

  • @Erikshan

    @Erikshan

    10 ай бұрын

    @@SmallTownDev Yeah that's why I do not want to dive into learning something new and by the time I finished learning, there comes a new way of doing it 😀 My next stop is FSE themes but I will not look its way at least for 6 months to a year as I think more changes are on its way. I have only worked with php on WP for years, now with blocks there are a lot of new things to learn. I tried learning it whenever I have time but the changes have been rapid. And since most plugins are outputted with only the build files, it is difficult to study how others follow what standards to build it. And sure If I have anything in mind, I will leave it in a comment 👍

  • @SmallTownDev

    @SmallTownDev

    10 ай бұрын

    @Erikshan Sounds about right to me 🎯 I’m trying hard as well to keep up with the new changes in FSE and will keep posting the changes for people like you and me who are willing to get into whenever they want. So stay tuned 🥂

  • @Erikshan

    @Erikshan

    10 ай бұрын

    @@SmallTownDev Great 👍

  • @avoswebdesigner
    @avoswebdesigner7 ай бұрын

    I don't think the music was necessary

  • @SmallTownDev

    @SmallTownDev

    7 ай бұрын

    Thank you for your feedback

  • @emanuelsaramago1039
    @emanuelsaramago10396 ай бұрын

    01:08 Installing @wordpress/create-block 03:51 Activating the block 04:51 Creating multiple blocks 09:13 Customizing the blocks 22:20 Wordpress Gutenberg components

  • @SmallTownDev

    @SmallTownDev

    6 ай бұрын

    Hi there @emanuelsaramago1039 Thanks for doing that. I have attached the timestamps in the video description, though they didn't appear right away.

  • @emanuelsaramago1039

    @emanuelsaramago1039

    6 ай бұрын

    @@SmallTownDev I didn't see them 😁

Келесі