Marketing · Gutenberg
Size Guide block for WordPress
Product or clothing sizing table with editable columns, rows, and optional highlight for recommended size.
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
Product or clothing sizing table with editable columns, rows, and optional highlight for recommended size.
Inspector panels on this block: Settings, Columns & Rows. Those titles come from index.js, not from a shared template.
Size Guide 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 “Size Guide” (block name `blockenberg/size-guide` in block.json). Style it in the sidebar after insert.
How to use Size Guide block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Size Guide”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Settings. Set “Settings — Title”, “Show Title”, “Show Note”, “Note Text”.
- 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 |
|---|---|
| Settings — Title | Text field in the inspector. block.json default: Size Guide. Saved as `title`. |
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show Note | On/off toggle in the inspector. On by default. Saved as `showNote`. |
| Note Text | Text field in the inspector. block.json default: Measurements are in centimetres. Model is 5'10" wearing size M.. Saved as `note`. |
| Highlight Column | On/off toggle in the inspector. On by default. Saved as `showHighlight`. |
| Highlight Col Index (0=first) | Numeric range control in the inspector. block.json default: 2. Saved as `highlightCol`. |
| Highlight Badge Label | Text field in the inspector. block.json default: Recommended. Saved as `highlightLabel`. |
| Cell Padding | Numeric range control in the inspector. Range 4–28. block.json default: 12. Saved as `cellPadding`. |
| Border Radius | Numeric range control in the inspector. Range 0–20. block.json default: 10. Saved as `borderRadius`. |
| BG | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Header BG | Color control in the inspector. block.json default: #111827. Saved as `headerBg`. |
| Header Text | Color control in the inspector. block.json default: #ffffff. Saved as `headerText`. |
| Highlight BG | Color control in the inspector. block.json default: #eef2ff. Saved as `highlightBg`. |
| Highlight Text | Color control in the inspector. block.json default: #4338ca. Saved as `highlightText`. |
| Alt Row BG | Color control in the inspector. block.json default: #f9fafb. Saved as `rowAltBg`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Colors — Text | Color control in the inspector. block.json default: #374151. Saved as `textColor`. |
| Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
When this is the right block
- Product or clothing sizing table with editable columns, rows, and optional highlight for recommended size — that is the job of Size Guide, not a generic content block.
- Use it when you need the editor control labeled “Settings — Title”, which exists on this block’s inspector.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
Static block: markup is saved in post content; no PHP render callback in this folder.
FAQ
How do I add the Size Guide block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Size Guide”. It sits under Marketing. After insert, open Settings and set “Settings — Title”, “Show Title”, “Show Note”, “Note Text”.
What makes Size Guide different from other Blockenberg blocks?
Product or clothing sizing table with editable columns, rows, and optional highlight for recommended size. Inspector labels on this block include “Settings — Title”, “Show Title”, “Show Note”, “Note Text”.
Is the Size Guide Gutenberg block free?
Yes. Size Guide ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Size Guide 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: Settings, Columns & Rows).
Related marketing blocks
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.
Affiliate Section
Affiliate/referral program landing section with commission highlight, how-it-works steps, benefits list, and stats.
Age Gate
Age verification overlay that protects page content behind a customizable age confirmation dialog.
Announcement Strip
A thin dismissible announcement bar — ideal above the site header for promotions, launches, or alerts.
App Download
Ready-made app promotion section with iOS / Android badges, device screenshot, heading, subtitle, ratings/reviews, and full background controls.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Size Guide from the Gutenberg inserter.