Marketing · Gutenberg
Pricing Table block for WordPress
Pricing card with plan name, price, features list, and CTA button. Highlight popular plans with a badge.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Pricing card with plan name, price, features list, and CTA button. Highlight popular plans with a badge.
Inspector panels on this block: Plan Info, Price, Features, Button, Card Design, Popular Badge. Those titles come from index.js, not from a shared template.
Behavior controls: “Currency Position” options: Before, After; “Feature List Style” options: Icons, Bullet, Checkmark (CSS), None; “Button Width” options: Full Width, Auto; “Card Style” options: Shadow, Large Shadow, Flat + Border, Gradient Header, Colored Header.
Pricing Table has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Marketing → search “Pricing Table” (block name `blockenberg/pricing-table` in block.json). Style it in the sidebar after insert.
How to use Pricing Table block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Pricing Table”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Plan Info. Set “Plan Name”, “Description”, “Show Description”, “Mark as Popular”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Plan Name | Text field in the inspector. block.json default: Professional. Saved as `planName`. |
| Description | Text field in the inspector. block.json default: Perfect for growing teams and projects. Saved as `planDescription`. |
| Show Description | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Mark as Popular | On/off toggle in the inspector. On by default. Saved as `isPopular`. |
| Popular Badge Label | Text field in the inspector. block.json default: Most Popular. Saved as `popularLabel`. |
| Currency Symbol | Text field in the inspector. block.json default: $. Saved as `currency`. |
| Currency Position | Select control; the chosen value is saved on the block. Options: Before; After. block.json default: before. Saved as `currencyPosition`. |
| Price | Text field in the inspector. block.json default: 49. Saved as `price`. |
| Period (e.g. /month) | Text field in the inspector. block.json default: /month. Saved as `pricePeriod`. |
| Price Subtext | Text field in the inspector. block.json default: Billed annually. Saved as `priceSubtext`. |
| Show Price Subtext | On/off toggle in the inspector. On by default. Saved as `showPriceSubtext`. |
| Feature List Style | Select control; the chosen value is saved on the block. Options: Icons; Bullet; Checkmark (CSS); None. block.json default: icon. Saved as `featureListStyle`. |
| Show Divider between Features and Button | On/off toggle in the inspector. On by default. Saved as `showFeatureDivider`. |
| Gap Between Features (px) | Numeric range control in the inspector. Range 4–32. block.json default: 12. Saved as `featureGap`. |
| Feature Text | Text field in the inspector. |
| Included | On/off toggle in the inspector. |
| Button Text | Text field in the inspector. block.json default: Get Started. Saved as `buttonText`. |
| Button URL | Text field in the inspector. block.json default: #. Saved as `buttonUrl`. |
| Open in New Tab | On/off toggle in the inspector. Off by default. Saved as `buttonTarget`. |
| Button Width | Select control; the chosen value is saved on the block. Options: Full Width; Auto. block.json default: full. Saved as `btnWidth`. |
| Vertical Padding (px) | Numeric range control in the inspector. Range 8–32. block.json default: 14. Saved as `btnPaddingV`. |
| Border Width (px) | Numeric range control in the inspector. Range 0–6. block.json default: 2. Saved as `btnBorderWidth`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–60. block.json default: 8. Saved as `btnBorderRadius`. |
| Card Style | Select control; the chosen value is saved on the block. Options: Shadow; Large Shadow; Flat + Border; Gradient Header; Colored Header. block.json default: shadow. Saved as `cardStyle`. |
| Header Style | Select control; the chosen value is saved on the block. Options: Accent Color; Dark; Light. block.json default: default. Saved as `headerStyle`. |
| Border Radius (px) (Card Border Radius) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardBorderRadius`. |
| Border Width (px) (Card Border Width) | Numeric range control in the inspector. Range 0–6. block.json default: 2. Saved as `cardBorderWidth`. |
| Section Gap (px) | Numeric range control in the inspector. Range 8–60. block.json default: 24. Saved as `sectionGap`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–80. block.json default: 36. Saved as `cardPaddingTop`. |
| Padding Right (px) | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `cardPaddingRight`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–80. block.json default: 36. Saved as `cardPaddingBottom`. |
| Padding Left (px) | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `cardPaddingLeft`. |
| Plan Name (Name Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `nameTypo`. |
| Description (Desc Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `descTypo`. |
| Price (Price Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `priceTypo`. |
| Feature | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `featureTypo`. |
| Typography — Button | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `btnTypo`. |
| Currency Size (px) | Numeric range control in the inspector. Range 12–48. block.json default: 24. Saved as `currencySize`. |
| Period Size (px) | Numeric range control in the inspector. Range 11–24. block.json default: 16. Saved as `periodSize`. |
| Subtext Size (px) | Numeric range control in the inspector. Range 10–18. block.json default: 13. Saved as `priceSubtextSize`. |
| Badge Size (px) | Numeric range control in the inspector. Range 10–18. block.json default: 12. Saved as `badgeSize`. |
| Border Radius (px) (Badge Border Radius) | Numeric range control in the inspector. Range 0–50. block.json default: 50. Saved as `badgeBorderRadius`. |
When this is the right block
- Pricing card with plan name, price, features list, and CTA button. Highlight popular plans with a badge — that is the job of Pricing Table, not a generic content block.
- Use it when you need the editor control labeled “Plan Name”, which exists on this block’s inspector.
- It matches pages about pricing, plan, price.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Pricing Table block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Pricing Table”. It sits under Marketing. After insert, open Plan Info and set “Plan Name”, “Description”, “Show Description”, “Mark as Popular”.
What makes Pricing Table different from other Blockenberg blocks?
Pricing card with plan name, price, features list, and CTA button. Highlight popular plans with a badge. Inspector labels on this block include “Plan Name”, “Description”, “Show Description”, “Mark as Popular”.
Is the Pricing Table Gutenberg block free?
Yes. Pricing Table ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Pricing Table to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Plan Info, Price, Features, Button).
Related marketing blocks
Pricing Section
All-in-one multi-tier pricing section with monthly/yearly toggle, feature rows, popular badge, and per-plan CTAs.
Pricing Slider
Interactive pricing section with a usage/tier slider — drag to select a plan and prices update dynamically with smooth animation.
Feature List
Rich feature checklist showing included / not-included / partial / coming-soon states per item. Ideal for pricing pages, plan comparisons, and product spec sheets.
Offer Card
Special offer and deal card with urgency badge, original/sale price, includes list, CTA, and optional countdown timer.
Product Card
Showcase any product with image, name, price, star rating, features list, badges, and buy button — no WooCommerce required.
Split Price CTA
Two-column sales section: pricing offer on the left, CTA with supporting benefits on the right. Common on SaaS pricing and checkout pages.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Pricing Table from the Gutenberg inserter.