Gutenberg

Build a pricing comparison table with core blocks only

A scenario prompt that lays out three subscription tiers side by side using Columns and Group blocks instead of the Table block, since Table can't hold buttons or highlight a recommended plan.

Works with Claude / GPT980 uses 4.3

The prompt

gutenberg-pricing-comparison-table
I'm adding a pricing section with three tiers to our SaaS pricing page:

Starter: $9/mo, 1 user, 5 projects, email support, button "Choose Starter"
Growth: $29/mo, 5 users, unlimited projects, priority support, button "Choose Growth"
  (this is the plan we want to visually highlight as "Most popular")
Scale: $79/mo, unlimited users, unlimited projects, dedicated support, button
  "Contact sales"

[replace with your own tiers, pricing, features, and button links]

Do not use the Table block for this, a table can't hold buttons or a highlighted
column border, and cramming pricing cards into table cells produces messy markup.
Instead:

1. Build a `wp:columns` block with three equal-width `wp:column` children, one
   per plan.
2. Inside each column, use a `wp:group` with a heading (plan name), a paragraph
   for the price, a `wp:list` for the feature bullets, and a `wp:buttons` block
   for the CTA.
3. For the Growth column, add a border and a slightly different background color
   to the group (pull both from the theme's defined color palette slugs in
   theme.json, don't hardcode a hex value that will clash the moment someone
   switches themes) and add a small "Most popular" label as its own paragraph
   above the heading.
4. Keep the feature lists parallel: if Starter lists 4 items and Scale lists 6,
   decide whether to pad Starter's list with "not included" style entries so rows
   roughly line up, or explicitly accept the misalignment, don't leave it
   accidental.
5. Make sure every list uses real `wp:list-item` children (not a paragraph with
   manual "- " prefixes), since a paragraph styled to look like a list is invisible
   to screen readers as a list.
6. Output the full nested block markup, columns down through buttons.

Columns-of-groups is the standard pattern for pricing tables in Gutenberg precisely because it lets each tier hold buttons, badges, and mixed content that the Table block structurally can’t. Double-check column width ratios add up to 100 after editing, a stray custom width on one column is the most common reason a pricing row looks lopsided on desktop but fine in the editor preview.