Developers · Gutenberg
Password Strength Meter block for WordPress
Real-time password strength checker with visual bar, strength label and requirements checklist.
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
Real-time password strength checker with visual bar, strength label and requirements checklist.
Inspector panels on this block: Header, Strength Settings, Requirements Checklist, Strength Labels, Sizing & Layout. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Developers → search “Password Strength Meter” (block name `blockenberg/password-strength-meter` in block.json). Style it in the sidebar after insert.
How to use Password Strength Meter block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Password Strength Meter”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Header. Set “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show Subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Header — Title | Text field in the inspector. block.json default: Password Strength Checker. Saved as `title`. |
| Subtitle | Text field in the inspector. block.json default: Type a password to see how secure it is. Saved as `subtitle`. |
| Placeholder | Text field in the inspector. block.json default: Enter a password…. Saved as `placeholder`. |
| Minimum Length Requirement | Numeric range control in the inspector. Range 4–32. block.json default: 8. Saved as `minLength`. |
| Show Toggle Visibility | On/off toggle in the inspector. On by default. Saved as `showToggleVisibility`. |
| Minimum Length | On/off toggle in the inspector. On by default. Saved as `showLengthReq`. |
| Uppercase Letter | On/off toggle in the inspector. On by default. Saved as `showUppercaseReq`. |
| Lowercase Letter | On/off toggle in the inspector. On by default. Saved as `showLowercaseReq`. |
| Number | On/off toggle in the inspector. On by default. Saved as `showNumberReq`. |
| Special Character | On/off toggle in the inspector. On by default. Saved as `showSymbolReq`. |
| Weak Label | Text field in the inspector. block.json default: Weak. Saved as `labelWeak`. |
| Fair Label | Text field in the inspector. block.json default: Fair. Saved as `labelFair`. |
| Good Label | Text field in the inspector. block.json default: Good. Saved as `labelGood`. |
| Strong Label | Text field in the inspector. block.json default: Strong. Saved as `labelStrong`. |
| Card Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Input Border Radius | Numeric range control in the inspector. Range 0–24. block.json default: 10. Saved as `inputRadius`. |
| Max Width (px) | Numeric range control in the inspector. Range 300–800. block.json default: 480. Saved as `maxWidth`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–160. block.json default: 60. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–160. block.json default: 60. Saved as `paddingBottom`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- JavaScript functions that perform the math: scorePassword.
When this is the right block
- Real-time password strength checker with visual bar, strength label and requirements checklist — that is the job of Password Strength Meter, not a generic content block.
- Use it when you need the editor control labeled “Show Title”, which exists on this block’s inspector.
- It matches pages about password, strength, security.
- The math runs in the visitor’s browser after publish — no extra calculator 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 Password Strength Meter block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Password Strength Meter”. It sits under Developers. After insert, open Header and set “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
Does Password Strength Meter need a server or extra plugin?
No. After Blockenberg is active, the view script runs in the browser with the values you saved on the block.
Is the Password Strength Meter Gutenberg block free?
Yes. Password Strength Meter ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Password Strength Meter 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: Header, Strength Settings, Requirements Checklist, Strength Labels).
Related developers blocks
Password Generator
Secure random password generator with configurable length, character types (uppercase, lowercase, numbers, symbols), strength indicator, copy button, and fully customizable styling.
Hash Generator
Generate MD5, SHA-1, SHA-256 and SHA-512 cryptographic hashes from any text input. Useful for developers, security professionals and data integrity checks.
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Barcode Generator
Generate Code128 barcodes from any text or number. Customize bar height, width, colors, and download as PNG.
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Browser Mockup
Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Password Strength Meter from the Gutenberg inserter.