Developers · Gutenberg
Barcode Generator block for WordPress
Generate Code128 barcodes from any text or number. Customize bar height, width, colors, and download as PNG.
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
Generate Code128 barcodes from any text or number. Customize bar height, width, colors, and download as PNG.
Inspector panels on this block: Content, Barcode Settings. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Developers → search “Barcode Generator” (block name `blockenberg/barcode-generator` in block.json). Style it in the sidebar after insert.
How to use Barcode Generator block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Barcode Generator”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Content. Set “Default Text / Number”, “Bar Height (px)”, “Bar Width Multiplier”, “Show Text Label”.
- 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 |
|---|---|
| Default Text / Number | Text field in the inspector. block.json default: BLOCKENBERG-2024. Saved as `defaultText`. |
| Bar Height (px) | Numeric range control in the inspector. Range 30–200. block.json default: 80. Saved as `barHeight`. |
| Bar Width Multiplier | Numeric range control in the inspector. Range 1–5. block.json default: 2. Saved as `barWidth`. |
| Show Text Label | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Show Download Button | On/off toggle in the inspector. On by default. Saved as `showDownload`. |
| Show Copy Button | On/off toggle in the inspector. On by default. Saved as `showCopy`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Subtitle | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `subtitleTypo`. |
| Accent Color | Color control in the inspector. block.json default: #1f2937. Saved as `accentColor`. |
| Bar Color | Color control in the inspector. block.json default: #000000. Saved as `barColor`. |
| Barcode Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Section Background | Color control in the inspector. block.json default: #f9fafb. Saved as `sectionBg`. |
| Title Color | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Button Color | Color control in the inspector. block.json default: #1f2937. Saved as `buttonBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Drawing happens on a canvas element after the page loads.
- Keyboard handlers move focus between items.
- JavaScript functions that perform the math: generate.
When this is the right block
- Generate Code128 barcodes from any text or number. Customize bar height, width, colors, and download as PNG — that is the job of Barcode Generator, not a generic content block.
- Use it when you need the editor control labeled “Default Text / Number”, which exists on this block’s inspector.
- It matches pages about barcode, code128, scan.
- 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 Barcode Generator block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Barcode Generator”. It sits under Developers. After insert, open Content and set “Default Text / Number”, “Bar Height (px)”, “Bar Width Multiplier”, “Show Text Label”.
Does Barcode 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 Barcode Generator Gutenberg block free?
Yes. Barcode Generator ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Barcode 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, Barcode Settings).
Related developers blocks
QR Code
Generate a QR code from any URL or text with custom colors and size.
CSS Gradient Generator
Interactive CSS gradient builder with live preview, multiple color stops, and one-click CSS copy.
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.
Lorem Ipsum Generator
Generate placeholder Lorem Ipsum text by paragraphs, sentences, words, or lists — with optional HTML output and one-click copy.
Password Generator
Secure random password generator with configurable length, character types (uppercase, lowercase, numbers, symbols), strength indicator, copy button, and fully customizable styling.
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Barcode Generator from the Gutenberg inserter.