How to make a Static Gutenberg block

[Faizan711]

hello everyone, i am new to wordpress development and want to create a static gutenberg block for a pricing-table, I have installed wordpress in xampp for development, I have read many articles but still haven't been able to create this.
If anyone could help, it would mean a lot

[aristath]

Could you please elaborate?
What do you mean by "static" block?

[Faizan711]

I want to make a gutenberg block for a pricing table which i can use in my website, isn't it called a static block?? @aristath

[hanneslsm]

You probably mean reusable block aka (synced) pattern.
@ndiego made an excelent video on how to use them: https://www.youtube.com/watch?v=ctNxY9FaH-M

Note: This will be released in Wordpress 6.3, 8. August. Until then you'd need the Gutenberg Plugin (or install the Release Candidate)

[Faizan711]

If anyone wanted to build a pricing-table block in wordpress, is it called reusable block??

[hanneslsm]

Yes and no.
You can build a pricing table with regular blocks that come with WordPress. A Columns block for example, with Headings, List and Paragraph blocks included. Start there.

If you want this pricing table to be on multiple pages, let's say "Pricing" and "Contact", you could just copy all blocks to both pages.

If you later want to change the title or price you'd need to go into both pages and manually change them.
Alternatively, you create a Reusable Block (Note: Renamed to "Synced Pattern"), put this into both pages and now you can change it at one place. There are multiple excellent videos on how this concept works on https://wordpress.tv/ or on Youtube.

[aristath]

The reason I asked what you mean by "static", is that for many people. "static" is the opposite of "dynamic".
When I hear "static block", what I'm thinking is a block that has some static HTML that will never change - so it's not dynamic in the sense that it doesn't allow the user to change the contents of the block.
If that's what you want to do, then you could simply add a raw-HTML block with the contents of your pricing table inside it. It's not elegant, but if it's a one-off thing, then it will be faster to do.

If you want to build a pricing table that is dynamic and allows you to add rows, change the contents etc, then perhaps you can take a look at what other people are doing with patterns to build pricing tables here: https://wordpress.org/patterns/search/pricing/
You can just copy-paste those and reuse them on your site 👍

[Faizan711]

Actually sir, one of my seniors have given me assignment to make one static and one dynamic gutenberg block which are of value to user. But i am not familiar with wordpress development as I am a MERN stack developer. Can you help me a bit with this, how to learn and create these two things????

[ndiego]

Hi @Faizan711, I highly recommend this course: Introduction to Block Development: Build your first custom block. This will give you a solid foundation to then build out your own blocks.