Generate a pricing table Gutenberg block
Every SaaS landing has a pricing table, and most are built from generic block libraries. The result is usually OK-looking but rarely optimized for conversion or SEO.
A dedicated pricing block lets you control the details that matter: consistent feature alignment across tiers, a working monthly/yearly toggle, tooltips on complex features, and structured data that tells Google what each tier costs.
Why generate it instead of installing an existing plugin?
Kadence and GenerateBlocks include pricing tables. They work. The monthly/yearly toggle they offer is cosmetic — it swaps a number. A proper toggle switches the whole pricing context: different prices, different CTA URLs (because the Stripe price id differs), different "save 2 months" annotations.
The generated block handles the toggle correctly as a block-level state, keeps the CTAs in sync, and emits schema.org Product + Offer JSON-LD so each plan is machine-readable.
Feature alignment is the second win. If tier B has a long feature name that wraps, the corresponding feature in tier A stays at the same vertical position via CSS grid — no drift.
Example prompt
This is the kind of description that generates this plugin. You can start from it and tweak whatever you need before hitting generate.
Plugin name: Acme Pricing
Block acme/pricing-table with 3 nested InnerBlocks of type acme/pricing-tier.
Tier attributes:
- name, tagline
- price_monthly, price_yearly, currency
- cta_label, cta_url_monthly, cta_url_yearly
- features: [{label, tooltip?, included: bool}]
- highlighted: bool
Table renders with a billing toggle on top. State is block-level (JS, simple aria-pressed buttons).
Features render as a CSS grid across tiers so the nth feature is vertically aligned across columns.
Schema.org: each tier emits Product + Offer with price matching the currently selected period.
Keyboard accessible toggle. Tooltip implemented as <details> for zero-JS fallback.What the generated plugin typically includes
- Parent + child block structure for tiers
- Monthly/yearly toggle switching price, CTA and currency
- CSS grid alignment across tiers
- Schema.org Product + Offer per tier
- Tooltip via <details> (no JS required)
- Highlight styling for the recommended tier
Tier count, currency, feature format and highlight styling are all defined per-instance via block attributes. Currency formatting uses Intl.NumberFormat for locale accuracy.
Frequently asked questions
Does the toggle affect SEO?
JSON-LD is emitted for both periods so Google sees the full price surface. The visible toggle is for users.
Can I connect it to Stripe checkout links?
Yes. Put the Stripe Payment Link URL in cta_url_monthly and cta_url_yearly. No backend code needed.