Marketing · Gutenberg
Newsletter Section block for WordPress
Full newsletter landing section with past issue previews, subscriber count social proof, benefits bullets, and a prominent subscribe form. Distinct from a simple newsletter widget.
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 newsletter landing section with past issue previews, subscriber count social proof, benefits bullets, and a prominent subscribe form. Distinct from a simple newsletter widget.
Inspector panels on this block: Copy, Benefits, Past Issues. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Marketing → search “Newsletter Section” (block name `blockenberg/newsletter-section` in block.json). Style it in the sidebar after insert.
How to use Newsletter Section block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Newsletter Section”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Copy. Set “Title”, “Date”, “Excerpt”, “Eyebrow”.
- 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 |
|---|---|
| Title | Text field in the inspector. Saved as `sampleIssues`. |
| Date | Text field in the inspector. Saved as `sampleIssues`. |
| Excerpt | Multiline text field in the inspector. Saved as `sampleIssues`. |
| Eyebrow | Text field in the inspector. block.json default: Weekly Newsletter. Saved as `eyebrow`. |
| Subscriber Count Badge | Text field in the inspector. block.json default: 12,000+ subscribers. Saved as `subscriberCount`. |
| Show Subscriber Badge | On/off toggle in the inspector. On by default. Saved as `showSubscriberBadge`. |
| Form Placeholder | Text field in the inspector. block.json default: Your email address. Saved as `formPlaceholder`. |
| Submit Label | Text field in the inspector. block.json default: Subscribe Free. Saved as `formSubmitLabel`. |
| Form Action URL | Text field in the inspector. block.json default: #. Saved as `formAction`. |
| Privacy Note | Text field in the inspector. block.json default: No spam. Unsubscribe anytime.. Saved as `privacyNote`. |
| Success Message | Multiline text field in the inspector. block.json default: 🎉 You're in! Check your inbox for a confirmation.. Saved as `successMessage`. |
| Show Benefits | On/off toggle in the inspector. On by default. Saved as `showBenefits`. |
| Show Sample Issues | On/off toggle in the inspector. On by default. Saved as `showSamples`. |
| Padding Top | Numeric range control in the inspector. Range 0–200. block.json default: 100. Saved as `paddingTop`. |
| Padding Bottom | Numeric range control in the inspector. Range 0–200. block.json default: 100. Saved as `paddingBottom`. |
| Max Width (px) | Numeric range control in the inspector. Range 600–1600. block.json default: 1100. Saved as `maxWidth`. |
| 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`. |
| Eyebrow | Color control in the inspector. block.json default: #818cf8. Saved as `eyebrowColor`. |
| Heading | Color control in the inspector. block.json default: #f8fafc. Saved as `headingColor`. |
| Subtext | Color control in the inspector. block.json default: #94a3b8. Saved as `subColor`. |
| Benefit Text | Color control in the inspector. block.json default: #cbd5e1. Saved as `benefitColor`. |
| Check Icon | Color control in the inspector. block.json default: #22d3ee. Saved as `checkColor`. |
| Input Background | Color control in the inspector. block.json default: #1e293b. Saved as `inputBg`. |
| Input Border | Color control in the inspector. block.json default: #334155. Saved as `inputBorder`. |
| Input Text | Color control in the inspector. block.json default: #f1f5f9. 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`. |
| Privacy Note | Color control in the inspector. block.json default: #64748b. Saved as `privacyColor`. |
| Issue Card Background | Color control in the inspector. block.json default: #1e293b. Saved as `issueBg`. |
| Issue Card Border | Color control in the inspector. block.json default: #334155. Saved as `issueBorder`. |
| Issue Title | Color control in the inspector. block.json default: #f1f5f9. Saved as `issueTitleColor`. |
| Issue Date | Color control in the inspector. block.json default: #818cf8. Saved as `issueDateColor`. |
| Issue Excerpt | Color control in the inspector. block.json default: #94a3b8. Saved as `issueExcerptColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
When this is the right block
- Full newsletter landing section with past issue previews, subscriber count social proof, benefits bullets, and a prominent subscribe form. Distinct from a simple newsletter widget — that is the job of Newsletter Section, not a generic content block.
- Use it when you need the editor control labeled “Title”, which exists on this block’s inspector.
- It matches pages about newsletter, subscribe, email list.
- 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 Newsletter Section block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Newsletter Section”. It sits under Marketing. After insert, open Copy and set “Title”, “Date”, “Excerpt”, “Eyebrow”.
What makes Newsletter Section different from other Blockenberg blocks?
Full newsletter landing section with past issue previews, subscriber count social proof, benefits bullets, and a prominent subscribe form. Distinct from a simple newsletter widget. Inspector labels on this block include “Title”, “Date”, “Excerpt”, “Eyebrow”.
Is the Newsletter Section Gutenberg block free?
Yes. Newsletter Section ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Newsletter 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: Copy, Benefits, Past Issues).
Related marketing blocks
Newsletter Popup
Email capture popup that triggers on scroll, time delay, or exit intent. Cookie-based dismissal, image support, and success state.
Newsletter Signup
Email opt-in form that stores subscribers via the built-in /subscribe REST endpoint.
Split Form
Side-by-side lead generation section — content (heading, text, feature bullets) on one side and a fully configured email / sign-up form on the other.
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 Newsletter Section from the Gutenberg inserter.