Marketing · Gutenberg
Affiliate Section block for WordPress
Affiliate/referral program landing section with commission highlight, how-it-works steps, benefits list, and stats.
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
Affiliate/referral program landing section with commission highlight, how-it-works steps, benefits list, and stats.
Inspector panels on this block: Layout, Commission Badge, Benefits & Stats, CTA Buttons. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Split (Commission + Steps), Centered, Steps Focus.
Where to find it
Gutenberg inserter → Marketing → search “Affiliate Section” (block name `blockenberg/affiliate-section` in block.json). Style it in the sidebar after insert.
How to use Affiliate Section block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Affiliate Section”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Layout. Set “Max Width (px)”, “Padding Top (px)”, “Padding Bottom (px)”, “Commission Value”.
- 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 |
|---|---|
| Layout | Select control; the chosen value is saved on the block. Options: Split (Commission + Steps); Centered; Steps Focus. block.json default: split. Saved as `layout`. |
| Max Width (px) | Numeric range control in the inspector. Range 600–1400. block.json default: 1100. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 80. Saved as `paddingBottom`. |
| Commission Value | Text field in the inspector. block.json default: 30%. Saved as `commission`. |
| Commission Label | Text field in the inspector. block.json default: recurring commission. Saved as `commissionLabel`. |
| Commission Note | Text field in the inspector. block.json default: on every sale, every month, for life. Saved as `commissionNote`. |
| Show Benefits List | On/off toggle in the inspector. On by default. Saved as `showBenefits`. |
| Show Stats | On/off toggle in the inspector. On by default. Saved as `showStats`. |
| Primary CTA Label | Text field in the inspector. block.json default: Join the Program. Saved as `ctaLabel`. |
| Primary CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Show Secondary CTA | On/off toggle in the inspector. On by default. Saved as `showSecondary`. |
| Secondary CTA Label | Text field in the inspector. block.json default: Learn More. Saved as `ctaSecondaryLabel`. |
| Secondary CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaSecondaryUrl`. |
| Eyebrow Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `eyebrowTypo`. |
| Heading Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `headingTypo`. |
| Subtext Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `subtextTypo`. |
| Colors — Background | Color control in the inspector. block.json default: #0f172a. Saved as `bgColor`. |
| Accent | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Commission Badge BG | Color control in the inspector. block.json default: #6366f1. Saved as `commissionBg`. |
| Commission Badge Text | Color control in the inspector. block.json default: #ffffff. Saved as `commissionColor`. |
| Heading | Color control in the inspector. block.json default: #ffffff. Saved as `headingColor`. |
| Subtext | Color control in the inspector. block.json default: #94a3b8. Saved as `subColor`. |
| Eyebrow | Color control in the inspector. block.json default: #a5b4fc. Saved as `eyebrowColor`. |
| Step Card BG | Color control in the inspector. block.json default: #1e293b. Saved as `stepCardBg`. |
| Stat Number | Color control in the inspector. block.json default: #6366f1. Saved as `statNumColor`. |
| CTA BG | Color control in the inspector. block.json default: #6366f1. Saved as `ctaBg`. |
| CTA Text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Affiliate/referral program landing section with commission highlight, how-it-works steps, benefits list, and stats — that is the job of Affiliate Section, not a generic content block.
- Use it when you need the editor control labeled “Max Width (px)”, which exists on this block’s inspector.
- It matches pages about affiliate, referral, partner.
- 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 Section block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Affiliate Section”. It sits under Marketing. After insert, open Layout and set “Max Width (px)”, “Padding Top (px)”, “Padding Bottom (px)”, “Commission Value”.
What makes Affiliate Section different from other Blockenberg blocks?
Affiliate/referral program landing section with commission highlight, how-it-works steps, benefits list, and stats. Inspector labels on this block include “Max Width (px)”, “Padding Top (px)”, “Padding Bottom (px)”, “Commission Value”.
Is the Affiliate Section Gutenberg block free?
Yes. Affiliate Section ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Affiliate Section 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, Commission Badge, Benefits & Stats, CTA Buttons).
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.
Logo Wall
Display a static grid of client or partner logos with hover effects, grayscale mode, and optional links.
Affiliate Review Box
Structured product review block with score badge, pros & cons columns, verdict summary, price display, and affiliate CTA button.
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 Affiliate Section from the Gutenberg inserter.