Marketing · Gutenberg
Newsletter Signup block for WordPress
Email opt-in form that stores subscribers via the built-in /subscribe REST endpoint.
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
Email opt-in form that stores subscribers via the built-in /subscribe REST endpoint.
Inspector panels on this block: Content, Layout & Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Form Layout” options: Vertical (stacked), Horizontal (inline); “Card Style” options: Card (with background), Box (white card), Minimal (no background), Inline (banner).
Where to find it
Gutenberg inserter → Marketing → search “Newsletter Signup” (block name `blockenberg/newsletter` in block.json). Style it in the sidebar after insert.
How to use Newsletter Signup block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Newsletter Signup”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Content. Set “Show Icon”, “Show Name Field”, “Name Placeholder”, “Email Placeholder”.
- Check the published page. The view script reads HTML data attributes: data-error, data-success. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Show Name Field | On/off toggle in the inspector. Off by default. Saved as `showName`. |
| Name Placeholder | Text field in the inspector. block.json default: Your name. Saved as `placeholderName`. |
| Email Placeholder | Text field in the inspector. block.json default: Your email address. Saved as `placeholderEmail`. |
| Button Label | Text field in the inspector. block.json default: Subscribe. Saved as `submitLabel`. |
| Success Message | Text field in the inspector. block.json default: 🎉 You're subscribed! Thank you.. Saved as `successMessage`. |
| Error Message | Text field in the inspector. block.json default: Please enter a valid email address.. Saved as `errorMessage`. |
| Form Layout | Select control; the chosen value is saved on the block. Options: Vertical (stacked); Horizontal (inline). block.json default: vertical. Saved as `layout`. |
| Card Style | Select control; the chosen value is saved on the block. Options: Card (with background); Box (white card); Minimal (no background); Inline (banner). |
| Max Width (px) | Numeric range control in the inspector. Range 200–1200. block.json default: 560. Saved as `maxWidth`. |
| Padding (px) | Numeric range control in the inspector. Range 0–80. block.json default: 40. Saved as `padding`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `borderRadius`. |
| Button Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `btnRadius`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-error, data-success.
- It calls WordPress REST: `/blockenberg/v1/subscribe`.
- Submit/load uses fetch or wp.apiFetch on the published page, not the editor canvas.
- A honeypot field named website is included to drop bot submissions.
When this is the right block
- Email opt-in form that stores subscribers via the built-in /subscribe REST endpoint — that is the job of Newsletter Signup, not a generic content block.
- Use it when you need the editor control labeled “Show Icon”, which exists on this block’s inspector.
- It matches pages about newsletter, subscribe, email.
- Use it when submissions should hit this block’s REST route, not a third-party form plugin.
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 Signup block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Newsletter Signup”. It sits under Marketing. After insert, open Content and set “Show Icon”, “Show Name Field”, “Name Placeholder”, “Email Placeholder”.
Where do Newsletter Signup submissions go?
The published page calls this block’s Blockenberg REST route (see front-end notes). The editor canvas does not send mail unless you preview on the front end.
Is the Newsletter Signup Gutenberg block free?
Yes. Newsletter Signup ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Newsletter Signup 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, Layout & Style).
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 Section
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.
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.
Content Lock
Gate content behind an email opt-in, password, or click-reveal. Perfect for lead generation, member content, and spoilers.
Content Upgrade
In-article content upgrade / lead magnet box with opt-in form. Goes between article paragraphs to capture emails in exchange for a bonus resource.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Newsletter Signup from the Gutenberg inserter.