Marketing · Gutenberg
Affiliate Review Box block for WordPress
Structured product review block with score badge, pros & cons columns, verdict summary, price display, and affiliate CTA button.
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 review block with score badge, pros & cons columns, verdict summary, price display, and affiliate CTA button.
Inspector panels on this block: Product Info, Score & Verdict, Pros, Cons, Price & CTA, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Open Link In” options: New Tab, Same Tab; “Layout” options: Horizontal (image left), Vertical (image top).
Where to find it
Gutenberg inserter → Marketing → search “Affiliate Review Box” (block name `blockenberg/affiliate-box` in block.json). Style it in the sidebar after insert.
How to use Affiliate Review Box block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Affiliate Review Box”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Product Info. Set “Product Name”, “Tagline”, “Show Product Image”, “Show Score Badge”.
- Check the published page. An IntersectionObserver starts work when the block enters the viewport. 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: Sony WH-1000XM5. Saved as `productName`. |
| Tagline | Text field in the inspector. block.json default: The best noise-cancelling headphones you can buy. Saved as `tagline`. |
| Show Product Image | On/off toggle in the inspector. On by default. Saved as `showImage`. |
| Show Score Badge | On/off toggle in the inspector. On by default. Saved as `showScore`. |
| Overall Score | Numeric range control in the inspector. block.json default: 9.2. Saved as `overallScore`. |
| Max Score | Numeric range control in the inspector. Range 5–10. block.json default: 10. Saved as `maxScore`. |
| Score Label | Text field in the inspector. block.json default: Expert Score. Saved as `scoreLabel`. |
| Show Verdict Box | On/off toggle in the inspector. On by default. Saved as `showVerdict`. |
| Verdict Label | Text field in the inspector. block.json default: Our Verdict. Saved as `verdictLabel`. |
| Verdict Text | Text field in the inspector. block.json default: The WH-1000XM5 sets the standard for consumer noise-cancelling headphones. Outstanding ANC, superb sound quality, and excellent call performance make it the go-to choice for frequent travellers and remote workers.. Saved as `verdict`. |
| Section Label | Text field in the inspector. block.json default: Pros. Saved as `prosLabel`. |
| Section Label (Cons Label) | Text field in the inspector. block.json default: Cons. Saved as `consLabel`. |
| Show Price | On/off toggle in the inspector. On by default. Saved as `showPrice`. |
| Currency Symbol | Text field in the inspector. block.json default: $. Saved as `currency`. |
| Price | Text field in the inspector. block.json default: 379.99. Saved as `price`. |
| Original Price | Text field in the inspector. Saved as `originalPrice`. |
| Show Strikethrough Price | On/off toggle in the inspector. Off by default. Saved as `showOriginalPrice`. |
| CTA Button Label | Text field in the inspector. block.json default: Check Best Price →. Saved as `ctaLabel`. |
| CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Open Link In | Select control; the chosen value is saved on the block. Options: New Tab; Same Tab. block.json default: _blank. Saved as `ctaTarget`. |
| Show Affiliate Disclosure | On/off toggle in the inspector. On by default. Saved as `showAffiliateNote`. |
| Disclosure Text | Text field in the inspector. block.json default: We may earn a commission if you buy through our links.. Saved as `affiliateNote`. |
| Layout | Select control; the chosen value is saved on the block. Options: Horizontal (image left); Vertical (image top). block.json default: horizontal. Saved as `layout`. |
| Card Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Card Padding | Numeric range control in the inspector. Range 8–80. block.json default: 32. Saved as `cardPadding`. |
| Image Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `imageRadius`. |
| Score Badge Radius | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `scoreRadius`. |
| Verdict Box Radius | Numeric range control in the inspector. Range 0–40. block.json default: 10. Saved as `verdictRadius`. |
| Button Radius | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `ctaRadius`. |
| Product Name (Name Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `nameTypo`. |
| Tagline (Tagline Typo) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `taglineTypo`. |
| List Items | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `listTypo`. |
| Verdict | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `verdictTypo`. |
| Score Number Size | Numeric range control in the inspector. Range 28–80. block.json default: 48. Saved as `scoreSize`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 48. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 48. Saved as `paddingBottom`. |
What the front-end script actually does
- An IntersectionObserver starts work when the block enters the viewport.
- JavaScript functions that perform the math: animateScore.
When this is the right block
- Structured product review block with score badge, pros & cons columns, verdict summary, price display, and affiliate CTA button — that is the job of Affiliate Review Box, not a generic content block.
- Use it when you need the editor control labeled “Product Name”, which exists on this block’s inspector.
- The math runs in the visitor’s browser after publish — no extra calculator plugin.
- 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 Affiliate Review Box block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Affiliate Review Box”. It sits under Marketing. After insert, open Product Info and set “Product Name”, “Tagline”, “Show Product Image”, “Show Score Badge”.
Does Affiliate Review Box need a server or extra plugin?
No. After Blockenberg is active, the view script runs in the browser with the values you saved on the block.
Is the Affiliate Review Box Gutenberg block free?
Yes. Affiliate Review Box ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Affiliate Review Box 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, Score & Verdict, Pros, Cons).
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 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.
Badge Wall
Showcase certifications, achievements, awards, or partner logos as a styled badge grid.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Affiliate Review Box from the Gutenberg inserter.