Developers · Gutenberg
Password Generator block for WordPress
Secure random password generator with configurable length, character types (uppercase, lowercase, numbers, symbols), strength indicator, copy button, and fully customizable styling.
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
Secure random password generator with configurable length, character types (uppercase, lowercase, numbers, symbols), strength indicator, copy button, and fully customizable styling.
Inspector panels on this block: Content, Password Options, Display Options, Sizing. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Developers → search “Password Generator” (block name `blockenberg/password-generator` in block.json). Style it in the sidebar after insert.
How to use Password Generator block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Password Generator”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Content. Set “Show Title”, “Content — Title”, “Show Subtitle”, “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`. |
| Content — Title | Text field in the inspector. block.json default: Password Generator. Saved as `title`. |
| Show Subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Subtitle | Text field in the inspector. block.json default: Generate a strong, secure random password instantly.. Saved as `subtitle`. |
| Copy Button Label | Text field in the inspector. block.json default: Copy Password. Saved as `copyLabel`. |
| Copied Confirmation Label | Text field in the inspector. block.json default: Copied!. Saved as `copiedLabel`. |
| Generate Button Label | Text field in the inspector. block.json default: Generate New. Saved as `generateLabel`. |
| Default Length | Numeric range control in the inspector. Range 4–64. block.json default: 16. Saved as `defaultLength`. |
| Min Length | Numeric range control in the inspector. Range 4–32. block.json default: 6. Saved as `minLength`. |
| Max Length | Numeric range control in the inspector. Range 16–128. block.json default: 64. Saved as `maxLength`. |
| Include Uppercase (A-Z) | On/off toggle in the inspector. On by default. Saved as `includeUppercase`. |
| Include Lowercase (a-z) | On/off toggle in the inspector. On by default. Saved as `includeLowercase`. |
| Include Numbers (0-9) | On/off toggle in the inspector. On by default. Saved as `includeNumbers`. |
| Include Symbols (!@#…) | On/off toggle in the inspector. On by default. Saved as `includeSymbols`. |
| Exclude Ambiguous (0,O,l,1,I) | On/off toggle in the inspector. Off by default. Saved as `excludeAmbiguous`. |
| Show Strength Meter | On/off toggle in the inspector. On by default. Saved as `showStrength`. |
| Show Length Slider | On/off toggle in the inspector. On by default. Saved as `showLength`. |
| Show Copy Button | On/off toggle in the inspector. On by default. Saved as `showCopyBtn`. |
| Show Refresh Button | On/off toggle in the inspector. On by default. Saved as `showRefreshBtn`. |
| Show Visibility Toggle | On/off toggle in the inspector. On by default. Saved as `showToggleVisible`. |
| Accent Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Copy Button Background | Color control in the inspector. block.json default: #6c3fb5. Saved as `copyBtnBg`. |
| Copy Button Text | Color control in the inspector. block.json default: #ffffff. Saved as `copyBtnColor`. |
| Generate Button Background | Color control in the inspector. block.json default: #f3f4f6. Saved as `genBtnBg`. |
| Password Field Background | Color control in the inspector. block.json default: #f5f3ff. Saved as `pwdBg`. |
| Password Text Color | Color control in the inspector. block.json default: #1e1b4b. Saved as `pwdColor`. |
| Weak Strength Color | Color control in the inspector. block.json default: #ef4444. Saved as `strengthWeak`. |
| Fair Strength Color | Color control in the inspector. block.json default: #f59e0b. Saved as `strengthFair`. |
| Good Strength Color | Color control in the inspector. block.json default: #3b82f6. Saved as `strengthGood`. |
| Strong Strength Color | Color control in the inspector. block.json default: #10b981. Saved as `strengthStrong`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Section Background | Color control in the inspector. Saved as `bgColor`. |
| Card Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Button Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `btnRadius`. |
| Max Width (px) | Numeric range control in the inspector. Range 300–900. block.json default: 560. 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: generatePassword, generate.
When this is the right block
- Secure random password generator with configurable length, character types (uppercase, lowercase, numbers, symbols), strength indicator, copy button, and fully customizable styling — that is the job of Password Generator, 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, generator, 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 Generator block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Password Generator”. It sits under Developers. After insert, open Content and set “Show Title”, “Content — Title”, “Show Subtitle”, “Subtitle”.
Does Password Generator 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 Generator Gutenberg block free?
Yes. Password Generator ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Password Generator 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, Password Options, Display Options, Sizing).
Related developers blocks
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.
Password Strength Meter
Real-time password strength checker with visual bar, strength label and requirements checklist.
UUID Generator
Generate universally unique identifiers (UUID v4 and v1-style). Batch generate, copy individual or all, toggle formatting options, and view generation history.
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.
CSS Gradient Generator
Interactive CSS gradient builder with live preview, multiple color stops, and one-click CSS copy.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Password Generator from the Gutenberg inserter.