Marketing · Gutenberg
Price List block for WordPress
Display restaurant menus, service pricing, or product catalogues with category sections, images, badges and rich styling.
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
Display restaurant menus, service pricing, or product catalogues with category sections, images, badges and rich styling.
Inspector panels on this block: Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “List style” options: Vertical list, Two-column grid, Horizontal card.
Price List 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 “Price List” (block name `blockenberg/price-list` in block.json). Style it in the sidebar after insert.
How to use Price List block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Price List”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Layout. Set “List style”, “Columns”, “Section spacing (px)”, “Item spacing (px)”.
- 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 |
|---|---|
| List style | Select control; the chosen value is saved on the block. Options: Vertical list; Two-column grid; Horizontal card. block.json default: list. Saved as `layout`. |
| Columns | Numeric range control in the inspector. Range 2–4. block.json default: 2. Saved as `columns`. |
| Section spacing (px) | Numeric range control in the inspector. Range 16–80. block.json default: 40. Saved as `sectionSpacing`. |
| Item spacing (px) | Numeric range control in the inspector. Range 8–48. block.json default: 16. Saved as `itemSpacing`. |
| Show dividers between items | On/off toggle in the inspector. On by default. Saved as `dividerEnabled`. |
| Show badges | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Show images | On/off toggle in the inspector. Off by default. Saved as `showImage`. |
| Image size (px) | Numeric range control in the inspector. Range 40–200. block.json default: 72. Saved as `imageSize`. |
| Image radius (px) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `imageRadius`. |
| Section Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `sectionTypo`. |
| Item Name | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `nameTypo`. |
| Description | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `descTypo`. |
| Price | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `priceTypo`. |
| Colors — Background | Color control in the inspector. Saved as `bgColor`. |
| Section title | Color control in the inspector. block.json default: #111827. Saved as `sectionColor`. |
| Item name | Color control in the inspector. block.json default: #111827. Saved as `nameColor`. |
| Description | Color control in the inspector. block.json default: #6b7280. Saved as `descColor`. |
| Price | Color control in the inspector. block.json default: #2563eb. Saved as `priceColor`. |
| Divider | Color control in the inspector. block.json default: #f3f4f6. Saved as `dividerColor`. |
| Badge background | Color control in the inspector. block.json default: #fef3c7. Saved as `badgeBg`. |
| Badge text | Color control in the inspector. block.json default: #92400e. Saved as `badgeColor`. |
| Section Title | Text field in the inspector. |
| Name | Text field in the inspector. |
| Description | Text field in the inspector. |
| Price | Text field in the inspector. |
| Badge | Text field in the inspector. |
When this is the right block
- Display restaurant menus, service pricing, or product catalogues with category sections, images, badges and rich styling — that is the job of Price List, not a generic content block.
- Use it when you need the editor control labeled “List style”, which exists on this block’s inspector.
- It matches pages about menu, price, food.
- 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 Price List block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Price List”. It sits under Marketing. After insert, open Layout and set “List style”, “Columns”, “Section spacing (px)”, “Item spacing (px)”.
Where do Price List submissions go?
The published page calls this block’s Blockenberg REST route (see front-end notes). The editor canvas does not send mail unless you preview on the front end.
Is the Price List Gutenberg block free?
Yes. Price List ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Price List 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: Layout).
Related marketing blocks
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.
Pricing Table
Pricing card with plan name, price, features list, and CTA button. Highlight popular plans with a badge.
Product Card
Showcase any product with image, name, price, star rating, features list, badges, and buy button — no WooCommerce required.
Affiliate Disclosure
Styled FTC-compliant affiliate link disclosure notice for articles and reviews. Distinct from Affiliate Review Box — this is the small legal notice, not a full product review.
Affiliate Review Box
Structured product review block with score badge, pros & cons columns, verdict summary, price display, and affiliate CTA button.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Price List from the Gutenberg inserter.