Marketing · Gutenberg
Product Spec Sheet block for WordPress
Structured product specification sheet with grouped categories, key-value rows, and rich styling options.
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
Structured product specification sheet with grouped categories, key-value rows, and rich styling options.
Inspector panels on this block: Product Header, Spec Groups, Display, Table Colors, Header & Group Colors, Highlight Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Table, Cards, Compact (2 cols); “Display — Style” options: Striped rows, Bordered, Minimal.
Where to find it
Gutenberg inserter → Marketing → search “Product Spec Sheet” (block name `blockenberg/product-spec` in block.json). Style it in the sidebar after insert.
How to use Product Spec Sheet block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Product Spec Sheet”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Product Header. Set “Show product header”, “Product name”, “Tagline”, “Display — Style”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show product header | On/off toggle in the inspector. On by default. Saved as `showHeader`. |
| Product name | Text field in the inspector. block.json default: Product Name. Saved as `productName`. |
| Tagline | Text field in the inspector. block.json default: The complete technical specifications. Saved as `productTagline`. |
| Layout | Select control; the chosen value is saved on the block. Options: Table; Cards; Compact (2 cols). block.json default: table. Saved as `layout`. |
| Display — Style | Select control; the chosen value is saved on the block. Options: Striped rows; Bordered; Minimal. block.json default: striped. Saved as `style`. |
| Show group titles | On/off toggle in the inspector. On by default. Saved as `showGroupTitles`. |
| Highlight starred rows | On/off toggle in the inspector. On by default. Saved as `showHighlight`. |
| Border radius | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Product Header | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `headerTypo`. |
| Group Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `groupTitleTypo`. |
| Row Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `rowTypo`. |
| Table Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Borders | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Key text | Color control in the inspector. block.json default: #64748b. Saved as `keyColor`. |
| Value text | Color control in the inspector. block.json default: #0f172a. Saved as `valueColor`. |
| Stripe row bg | Color control in the inspector. block.json default: #f8fafc. Saved as `stripeBg`. |
| Accent | Color control in the inspector. block.json default: #3b82f6. Saved as `accentColor`. |
| Header background | Color control in the inspector. block.json default: #1e293b. Saved as `headerBg`. |
| Header text | Color control in the inspector. block.json default: #ffffff. Saved as `headerColor`. |
| Group title bg | Color control in the inspector. block.json default: #f1f5f9. Saved as `groupTitleBg`. |
| Group title text | Color control in the inspector. block.json default: #475569. Saved as `groupTitleColor`. |
| Highlight background | Color control in the inspector. block.json default: #eff6ff. Saved as `highlightBg`. |
| Highlight text | Color control in the inspector. block.json default: #1e40af. Saved as `highlightColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Structured product specification sheet with grouped categories, key-value rows, and rich styling options — that is the job of Product Spec Sheet, not a generic content block.
- Use it when you need the editor control labeled “Show product header”, which exists on this block’s inspector.
- It matches pages about product, specs, specifications.
- 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 Product Spec Sheet block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Product Spec Sheet”. It sits under Marketing. After insert, open Product Header and set “Show product header”, “Product name”, “Tagline”, “Display — Style”.
What makes Product Spec Sheet different from other Blockenberg blocks?
Structured product specification sheet with grouped categories, key-value rows, and rich styling options. Inspector labels on this block include “Show product header”, “Product name”, “Tagline”, “Display — Style”.
Is the Product Spec Sheet Gutenberg block free?
Yes. Product Spec Sheet ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Product Spec Sheet 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: Product Header, Spec Groups, Display, Table Colors).
Related marketing blocks
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table block.
Comparison Checklist
Two-column 'With / Without' checklist comparison to highlight the value of your product or service.
Comparison Guide
A structured X vs Y comparison guide with criteria scoring, winner badges, and a verdict. Perfect for product, software, and strategy comparisons.
Comparison Section
Us vs. Them comparison table with feature rows, checkmark/cross icons, highlighted winner column, and full colour/typography controls.
Comparison Wall
Side-by-side feature comparison with two columns — ideal for before/after, free vs pro, etc.
Feature Alternating
Zigzag alternating feature rows — image on one side, feature list + CTA on the other. Pairs alternate left↔right automatically.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Product Spec Sheet from the Gutenberg inserter.