Marketing · Gutenberg
Content Lock block for WordPress
Gate content behind an email opt-in, password, or click-reveal. Perfect for lead generation, member content, and spoilers.
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
Gate content behind an email opt-in, password, or click-reveal. Perfect for lead generation, member content, and spoilers.
Inspector panels on this block: Lock Type, Locked Content, Gate Appearance, Form Labels. Those titles come from index.js, not from a shared template.
Behavior controls: “Gate Method” options: Email Opt-in, Password, Click to Reveal; “Content Lock Style” options: Blur preview, Hide completely, Fade out; “Storage Key (unique per block)” (Unique ID so each lock is remembered separately); “Webhook URL (optional)” (POST email to this URL (Zapier, Make, etc.)).
Where to find it
Gutenberg inserter → Marketing → search “Content Lock” (block name `blockenberg/content-lock` in block.json). Style it in the sidebar after insert.
How to use Content Lock block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Content Lock”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Lock Type. Set “Gate Method”, “Content Lock Style”, “Blur Amount (px)”, “Visible preview lines”.
- 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 |
|---|---|
| Gate Method | Select control; the chosen value is saved on the block. Options: Email Opt-in; Password; Click to Reveal. block.json default: email. Saved as `lockType`. |
| Content Lock Style | Select control; the chosen value is saved on the block. Options: Blur preview; Hide completely; Fade out. block.json default: blur. Saved as `lockStyle`. |
| Blur Amount (px) | Numeric range control in the inspector. Range 1–20. block.json default: 6. Saved as `blurAmount`. |
| Visible preview lines | Numeric range control in the inspector. Range 1–10. block.json default: 3. Saved as `teaserLines`. |
| Remember unlock (localStorage) | On/off toggle in the inspector. On by default. Saved as `rememberUnlock`. |
| Storage Key (unique per block) | Text field in the inspector. Unique ID so each lock is remembered separately. Saved as `storageKey`. |
| Webhook URL (optional) | Text field in the inspector. POST email to this URL (Zapier, Make, etc.). Saved as `webhookUrl`. |
| Password | Text field in the inspector. Password is stored in HTML. Not for sensitive content. Saved as `password`. |
| Locked Content (HTML) | Multiline text field in the inspector. block.json default: <p>This is your protected content. Add anything here — text, images, resources, download links, or exclusive information.</p><p>Visitors must unlock this content to read it.</p>. Saved as `lockedContent`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Icon (emoji) | Text field in the inspector. block.json default: 🔒. Saved as `icon`. |
| Show Eyebrow Label | On/off toggle in the inspector. On by default. Saved as `showEyebrow`. |
| Eyebrow Text | Text field in the inspector. block.json default: Members Only. Saved as `eyebrow`. |
| Heading | Text field in the inspector. block.json default: Unlock this content. Saved as `heading`. |
| Sub-text | Text field in the inspector. block.json default: Enter your email to get instant access to this exclusive content.. Saved as `subText`. |
| Max Width (px) | Numeric range control in the inspector. Range 300–900. block.json default: 560. Saved as `maxWidth`. |
| Padding (px) | Numeric range control in the inspector. Range 16–80. block.json default: 40. Saved as `padding`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `borderRadius`. |
| Input Border Radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 8. Saved as `inputRadius`. |
| Email Placeholder | Text field in the inspector. block.json default: Enter your email address. Saved as `emailPlaceholder`. |
| Submit Button Label | Text field in the inspector. block.json default: Unlock Now. Saved as `submitLabel`. |
| Show Privacy Note | On/off toggle in the inspector. On by default. Saved as `showPrivacy`. |
| Privacy Note | Text field in the inspector. block.json default: We respect your privacy. No spam, ever.. Saved as `privacyNote`. |
| Success Heading | Text field in the inspector. block.json default: You're in! 🎉. Saved as `successHeading`. |
| Success Text | Text field in the inspector. block.json default: Enjoy your exclusive content below.. Saved as `successText`. |
| Password Input Placeholder | Text field in the inspector. block.json default: Enter password. Saved as `passwordPlaceholder`. |
| Submit Button Label (Password Submit Label) | Text field in the inspector. block.json default: Unlock. Saved as `passwordSubmitLabel`. |
| Error Message | Text field in the inspector. block.json default: Incorrect password. Please try again.. Saved as `passwordErrorMsg`. |
| Reveal Button Label | Text field in the inspector. block.json default: Reveal Content. Saved as `clickButtonLabel`. |
| Button Icon (emoji) | Text field in the inspector. block.json default: 👁. Saved as `clickButtonIcon`. |
| Heading (Typo Heading) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeading`. |
| Typography — Button | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoButton`. |
| Eyebrow Size (px) | Numeric range control in the inspector. Range 10–24. block.json default: 11. Saved as `eyebrowSize`. |
| Sub-text Size (px) | Numeric range control in the inspector. Range 12–36. block.json default: 14. Saved as `subTextSize`. |
| Gate Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `gateBg`. |
| Eyebrow Color | Color control in the inspector. block.json default: #6366f1. Saved as `eyebrowColor`. |
| Heading Color | Color control in the inspector. block.json default: #111827. Saved as `headingColor`. |
| Text Color | Color control in the inspector. block.json default: #6b7280. Saved as `textColor`. |
| Input Background | Color control in the inspector. block.json default: #f9fafb. Saved as `inputBg`. |
| Input Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `inputBorder`. |
| Input Focus Border | Color control in the inspector. block.json default: #6366f1. Saved as `inputFocusBorder`. |
| Button Background | Color control in the inspector. block.json default: #6366f1. Saved as `btnBg`. |
| Button Text Color | Color control in the inspector. block.json default: #ffffff. Saved as `btnColor`. |
| Privacy Note Color | Color control in the inspector. block.json default: #9ca3af. Saved as `privacyColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
- It writes to localStorage in the visitor’s browser, not to wp_options.
- Submit/load uses fetch or wp.apiFetch on the published page, not the editor canvas.
- Keyboard handlers move focus between items.
When this is the right block
- Gate content behind an email opt-in, password, or click-reveal. Perfect for lead generation, member content, and spoilers — that is the job of Content Lock, not a generic content block.
- Use it when you need the editor control labeled “Gate Method”, which exists on this block’s inspector.
- It matches pages about lock, gate, paywall.
- 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 Lock block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Content Lock”. It sits under Marketing. After insert, open Lock Type and set “Gate Method”, “Content Lock Style”, “Blur Amount (px)”, “Visible preview lines”.
Where does Content Lock store visitor state?
In localStorage on that browser. Clearing site data resets it. It is not a WordPress user meta field unless render.php says so.
Is the Content Lock Gutenberg block free?
Yes. Content Lock ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Content Lock 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: Lock Type, Locked Content, Gate Appearance, Form Labels).
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.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Content Lock from the Gutenberg inserter.