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.
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.