Design a Pricing Table Using Gutenberg – No Plugins Needed

Creating a professional pricing table in WordPress no longer requires expensive plugins or page builders. Thanks to Gutenberg Full Site Editing (FSE), you can design a fully responsive pricing table using columns and groups — all with native blocks.

In Day 9 of the Gutenberg Challenge, we’ll create a pricing table step by step, style it, and make sure it looks perfect across devices.

What You’ll Learn

✅ How to design a pricing table using Gutenberg blocks
✅ When to use columns vs. grids for better responsiveness
✅ Styling tips for backgrounds, buttons, and spacing
✅ How to keep your table mobile-friendly without extra plugins

Start with the Page Setup

✅ Create a new page in WordPress → name it Day 9: Pricing Table.
✅ Add a Group Block with a full-width layout and a dark background.
✅ Adjust padding for breathing room at the top and bottom.

💡 Tip: Use a slightly off-black shade for a softer, modern look.

Add Columns

✅ Insert a 3-Column Block for your pricing plans.
✅ Each column represents a pricing card.
✅ Set the width to Wide (1340px) for a clean layout.

Style Each Column

✅ Wrap content in Groups for easier styling.
✅ Add background colors and adjust border-radius for smooth edges.
✅ Add headings, descriptions, and price labels for each plan.

Add Labels (e.g., “New”)

Instead of using plain text backgrounds:
✅ Wrap the label text in a Group Block
✅ Add yellow background, set padding, and apply 50px border-radius

Add Call-to-Action Buttons

✅ Insert a Button Block under each plan (e.g., Get Started).
✅ Use outline buttons for secondary plans and solid buttons for the featured plan.
✅ Adjust typography to semi-bold for a strong CTA.

Make It Responsive

✅ Columns will stack automatically on mobile.
✅ For more control, use the Grid Block — it handles responsive breakpoints more smoothly than columns.