Marketing · Gutenberg
Content Upgrade block for WordPress
In-article content upgrade / lead magnet box with opt-in form. Goes between article paragraphs to capture emails in exchange for a bonus resource.
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
In-article content upgrade / lead magnet box with opt-in form. Goes between article paragraphs to capture emails in exchange for a bonus resource.
Inspector panels on this block: Content, Image. Those titles come from index.js, not from a shared template.
Behavior controls: “Content — Style” options: Boxed, Inline (no border), Minimal (left accent bar).
Where to find it
Gutenberg inserter → Marketing → search “Content Upgrade” (block name `blockenberg/content-upgrade` in block.json). Style it in the sidebar after insert.
How to use Content Upgrade block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Content Upgrade”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Content. Set “Content — Style”, “Form Placeholder”, “Submit Button Label”, “Form Action URL”.
- 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 |
|---|---|
| Content — Style | Select control; the chosen value is saved on the block. Options: Boxed; Inline (no border); Minimal (left accent bar). block.json default: boxed. Saved as `style`. |
| Form Placeholder | Text field in the inspector. block.json default: Enter your email address. Saved as `formPlaceholder`. |
| Submit Button Label | Text field in the inspector. block.json default: Send Me the Checklist. Saved as `formSubmitLabel`. |
| Form Action URL | Text field in the inspector. block.json default: #. Saved as `formAction`. |
| Success Message | Multiline text field in the inspector. block.json default: 🎉 Check your inbox! The download is on its way.. Saved as `successMessage`. |
| Padding Top | Numeric range control in the inspector. Range 0–120. block.json default: 40. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–120. block.json default: 40. Saved as `paddingBottom`. |
| Border Radius | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `borderRadius`. |
| Colors — Background | Color control in the inspector. block.json default: #f5f3ff. Saved as `bgColor`. |
| Colors — Border | Color control in the inspector. block.json default: #ddd6fe. Saved as `borderColor`. |
| Accent | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Heading | Color control in the inspector. block.json default: #1e1b4b. Saved as `headingColor`. |
| Description | Color control in the inspector. block.json default: #4b5563. Saved as `descColor`. |
| Input Background | Color control in the inspector. block.json default: #ffffff. Saved as `inputBg`. |
| Input Border | Color control in the inspector. block.json default: #d1d5db. Saved as `inputBorder`. |
| Input Text | Color control in the inspector. block.json default: #111827. Saved as `inputColor`. |
| Submit Button | Color control in the inspector. block.json default: #6366f1. Saved as `submitBg`. |
| Submit Text | Color control in the inspector. block.json default: #ffffff. Saved as `submitColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- In-article content upgrade / lead magnet box with opt-in form. Goes between article paragraphs to capture emails in exchange for a bonus resource — that is the job of Content Upgrade, not a generic content block.
- Use it when you need the editor control labeled “Content — Style”, which exists on this block’s inspector.
- It matches pages about content upgrade, lead magnet, opt-in.
- 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 Content Upgrade block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Content Upgrade”. It sits under Marketing. After insert, open Content and set “Content — Style”, “Form Placeholder”, “Submit Button Label”, “Form Action URL”.
What makes Content Upgrade different from other Blockenberg blocks?
In-article content upgrade / lead magnet box with opt-in form. Goes between article paragraphs to capture emails in exchange for a bonus resource. Inspector labels on this block include “Content — Style”, “Form Placeholder”, “Submit Button Label”, “Form Action URL”.
Is the Content Upgrade Gutenberg block free?
Yes. Content Upgrade ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Content Upgrade 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: Content, Image).
Related marketing blocks
Lead Magnet
Free resource / lead magnet landing section. Features a mockup image (book, PDF, phone), headline, benefit checklist, and an email capture form with privacy note. Ideal for e-books, templates, checklists, and courses.
Ebook Section
Digital product and ebook showcase with 3D book cover, feature list, social proof, and CTA.
Newsletter Signup
Email opt-in form that stores subscribers via the built-in /subscribe REST endpoint.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Content Upgrade from the Gutenberg inserter.