Marketing · Gutenberg
Product Showcase block for WordPress
Full product detail section with image gallery, variant selectors, feature highlights, tabbed content, and trust signals.
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
Full product detail section with image gallery, variant selectors, feature highlights, tabbed content, and trust signals.
Inspector panels on this block: Product Info, Pricing, Rating & Stock, Features List, Product Tabs, Variant Selectors, Trust Badges, Call to Action Buttons. Those titles come from index.js, not from a shared template.
Behavior controls: “Currency Position” options: Before price ($99), After price (99$); “Display Style” options: Color Swatches, Button Labels; “Image Position” options: Left, Right; “Image Aspect Ratio” options: Square (1:1), Portrait (3:4), Landscape (4:3), Wide (16:9).
Where to find it
Gutenberg inserter → Marketing → search “Product Showcase” (block name `blockenberg/product-showcase` in block.json). Style it in the sidebar after insert.
How to use Product Showcase block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Product Showcase”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Product Info. Set “Product Name”, “Tagline”, “Badge Text”, “Show Badge”.
- Check the published page. The view script reads HTML data attributes: data-alt. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Product Name | Text field in the inspector. block.json default: Premium Wireless Headphones. Saved as `productName`. |
| Tagline | Text field in the inspector. block.json default: Studio-quality sound, redefined.. Saved as `tagline`. |
| Badge Text | Text field in the inspector. block.json default: Best Seller. Saved as `badge`. |
| Show Badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| SKU | Text field in the inspector. block.json default: SKU-WH-001. Saved as `sku`. |
| Show SKU | On/off toggle in the inspector. Off by default. Saved as `showSku`. |
| Currency Symbol | Text field in the inspector. block.json default: $. Saved as `currency`. |
| Currency Position | Select control; the chosen value is saved on the block. Options: Before price ($99); After price (99$). block.json default: before. Saved as `currencyPos`. |
| Price | Text field in the inspector. block.json default: 249.00. Saved as `price`. |
| Original Price (strikethrough) | Text field in the inspector. block.json default: 349.00. Saved as `originalPrice`. |
| Show Original Price | On/off toggle in the inspector. On by default. Saved as `showOriginalPrice`. |
| Rating (out of 5) | Numeric range control in the inspector. Range 0–5. block.json default: 4.7. Saved as `rating`. |
| Review Count | Text field in the inspector. |
| Show Rating | On/off toggle in the inspector. On by default. Saved as `showRating`. |
| In Stock | On/off toggle in the inspector. On by default. Saved as `inStock`. |
| Stock Label | Text field in the inspector. block.json default: In Stock – ships in 24h. Saved as `stockText`. |
| Show Stock Status | On/off toggle in the inspector. On by default. Saved as `showStock`. |
| Section Title | Text field in the inspector. block.json default: Why you'll love it. Saved as `featuresTitle`. |
| Show Features | On/off toggle in the inspector. On by default. Saved as `showFeatures`. |
| Show Tabs | On/off toggle in the inspector. On by default. Saved as `showTabs`. |
| Tab Label | Text field in the inspector. |
| Product Tabs — Content | Text field in the inspector. |
| Show Variants | On/off toggle in the inspector. On by default. Saved as `showVariants`. |
| Group Label | Text field in the inspector. |
| Display Style | Select control; the chosen value is saved on the block. Options: Color Swatches; Button Labels. |
| Hex | Text field in the inspector. |
| Show Trust Badges | On/off toggle in the inspector. On by default. Saved as `showTrustBadges`. |
| Trust Badges — Text | Text field in the inspector. |
| Primary Button Label | Text field in the inspector. block.json default: Add to Cart. Saved as `ctaLabel`. |
| Primary Button URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Show Secondary Button | On/off toggle in the inspector. On by default. Saved as `showSecCta`. |
| Secondary Button Label | Text field in the inspector. block.json default: Add to Wishlist. Saved as `secCtaLabel`. |
| Secondary Button URL | Text field in the inspector. block.json default: #. Saved as `secCtaUrl`. |
| Image Position | Select control; the chosen value is saved on the block. Options: Left; Right. block.json default: left. Saved as `imagePosition`. |
| Image Aspect Ratio | Select control; the chosen value is saved on the block. Options: Square (1:1); Portrait (3:4); Landscape (4:3); Wide (16:9). block.json default: 1/1. Saved as `imageRatio`. |
| Column Gap (px) | Numeric range control in the inspector. Range 0–120. block.json default: 48. Saved as `gap`. |
| Card Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 20. Saved as `cardRadius`. |
| Card Padding | Numeric range control in the inspector. Range 8–80. block.json default: 40. Saved as `cardPadding`. |
| Image Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `imageRadius`. |
| Button Radius | Numeric range control in the inspector. Range 0–40. block.json default: 10. Saved as `ctaRadius`. |
| Badge Radius | Numeric range control in the inspector. Range 0–99. block.json default: 99. Saved as `badgeRadius`. |
| Product Name | Shared Blockenberg typography popover (family, size, weight, spacing). |
| Tagline | Shared Blockenberg typography popover (family, size, weight, spacing). |
| Price | Shared Blockenberg typography popover (family, size, weight, spacing). |
| Feature Items | Shared Blockenberg typography popover (family, size, weight, spacing). |
| CTA Buttons | Shared Blockenberg typography popover (family, size, weight, spacing). |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-alt.
- An IntersectionObserver starts work when the block enters the viewport.
- Keyboard handlers move focus between items.
When this is the right block
- Full product detail section with image gallery, variant selectors, feature highlights, tabbed content, and trust signals — that is the job of Product Showcase, not a generic content block.
- Use it when you need the editor control labeled “Product Name”, which exists on this block’s inspector.
- 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 Showcase block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Product Showcase”. It sits under Marketing. After insert, open Product Info and set “Product Name”, “Tagline”, “Badge Text”, “Show Badge”.
What makes Product Showcase different from other Blockenberg blocks?
Full product detail section with image gallery, variant selectors, feature highlights, tabbed content, and trust signals. Inspector labels on this block include “Product Name”, “Tagline”, “Badge Text”, “Show Badge”.
Is the Product Showcase Gutenberg block free?
Yes. Product Showcase ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Product Showcase 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 Info, Pricing, Rating & Stock, Features List).
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 Product Showcase from the Gutenberg inserter.