Marketing · Gutenberg
Value Proposition block for WordPress
Compelling value proposition section with headline, USP benefits, proof badges, and CTA.
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
Compelling value proposition section with headline, USP benefits, proof badges, and CTA.
Inspector panels on this block: Structure, CTA Links, Proof Badges, Benefits, Spacing & Shape, Header Colors, Benefit Card Colors, CTA & Badge Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Layout” options: Centered, Left aligned; “Benefit columns” options: 1 column, 2 columns, 3 columns; “Structure — Style” options: Clean, Card, Bordered.
Where to find it
Gutenberg inserter → Marketing → search “Value Proposition” (block name `blockenberg/value-proposition` in block.json). Style it in the sidebar after insert.
How to use Value Proposition block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Value Proposition”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Structure. Set “Benefit columns”, “Structure — Style”, “Show eyebrow label”, “Show subheadline”.
- 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: Centered; Left aligned. block.json default: center. Saved as `layout`. |
| Benefit columns | Select control; the chosen value is saved on the block. Options: 1 column; 2 columns; 3 columns. block.json default: 2. Saved as `benefitColumns`. |
| Structure — Style | Select control; the chosen value is saved on the block. Options: Clean; Card; Bordered. block.json default: clean. Saved as `style`. |
| Show eyebrow label | On/off toggle in the inspector. On by default. Saved as `showEyebrow`. |
| Show subheadline | On/off toggle in the inspector. On by default. Saved as `showSubheadline`. |
| Show proof badges | On/off toggle in the inspector. On by default. Saved as `showBadges`. |
| Show primary CTA | On/off toggle in the inspector. On by default. Saved as `showCta`. |
| Show secondary CTA | On/off toggle in the inspector. On by default. Saved as `showSecondaryCta`. |
| Primary CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaUrl`. |
| Secondary CTA URL | Text field in the inspector. block.json default: #. Saved as `ctaSecondaryUrl`. |
| Icon / Emoji | Text field in the inspector. Saved as `badges`. |
| Proof Badges — Text | Text field in the inspector. Saved as `badges`. |
| Icon / Emoji (Benefits) | Text field in the inspector. Saved as `benefits`. |
| Benefits — Title | Text field in the inspector. Saved as `benefits`. |
| Description | Text field in the inspector. Saved as `benefits`. |
| Section padding (vertical) | Numeric range control in the inspector. Range 16–120. block.json default: 64. Saved as `paddingV`. |
| Section padding (horizontal) | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `paddingH`. |
| Benefit card gap | Numeric range control in the inspector. Range 8–48. block.json default: 20. Saved as `gap`. |
| Border radius | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `borderRadius`. |
| Section background | Color control in the inspector. block.json default: #f8fafc. Saved as `bgColor`. |
| Accent | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Eyebrow | Color control in the inspector. block.json default: #6366f1. Saved as `eyebrowColor`. |
| Headline | Color control in the inspector. block.json default: #0f172a. Saved as `headlineColor`. |
| Subheadline | Color control in the inspector. block.json default: #475569. Saved as `subColor`. |
| Card background | Color control in the inspector. block.json default: #ffffff. Saved as `benefitBg`. |
| Card border | Color control in the inspector. block.json default: #e2e8f0. Saved as `benefitBorderColor`. |
| Icon background | Color control in the inspector. block.json default: #ede9fe. Saved as `iconBg`. |
| Benefit title | Color control in the inspector. block.json default: #1e293b. Saved as `benefitTitleColor`. |
| Benefit text | Color control in the inspector. block.json default: #64748b. Saved as `benefitTextColor`. |
| CTA background | 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`. |
| Secondary CTA | Color control in the inspector. block.json default: #6366f1. Saved as `ctaSecondaryColor`. |
| Badge background | Color control in the inspector. block.json default: #ffffff. Saved as `badgeBg`. |
| Badge text | Color control in the inspector. block.json default: #475569. Saved as `badgeColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Compelling value proposition section with headline, USP benefits, proof badges, and CTA — that is the job of Value Proposition, not a generic content block.
- Use it when you need the editor control labeled “Benefit columns”, which exists on this block’s inspector.
- It matches pages about value proposition, usp, benefits.
- 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 Value Proposition block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Value Proposition”. It sits under Marketing. After insert, open Structure and set “Benefit columns”, “Structure — Style”, “Show eyebrow label”, “Show subheadline”.
What makes Value Proposition different from other Blockenberg blocks?
Compelling value proposition section with headline, USP benefits, proof badges, and CTA. Inspector labels on this block include “Benefit columns”, “Structure — Style”, “Show eyebrow label”, “Show subheadline”.
Is the Value Proposition Gutenberg block free?
Yes. Value Proposition ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Value Proposition 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: Structure, CTA Links, Proof Badges, Benefits).
Related marketing blocks
Feature Split
Elegant two-column section — rich content (badge, headline, body, feature list, CTAs) paired with an image. The essential landing page block.
Gradient CTA
A bold full-width call-to-action section with a gradient or solid background, headline, subtitle, and buttons.
Call to Action
Headline + sub-headline + 1-2 buttons with optional color/gradient background. Perfect inside Row/Column blocks.
Split Benefits
A split section with an image on one side and a benefits checklist, headline, and CTAs on the other. A cornerstone landing page pattern.
App Download
Ready-made app promotion section with iOS / Android badges, device screenshot, heading, subtitle, ratings/reviews, and full background controls.
Button Group
Group of styled CTA buttons with alignment, spacing, individual per-button overrides, and responsive stacking.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Value Proposition from the Gutenberg inserter.