Developers · Gutenberg
Base64 Encoder / Decoder block for WordPress
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
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
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Inspector panels on this block: Tool Settings, Display Options, Sizing. Those titles come from index.js, not from a shared template.
Behavior controls: “Default Mode” options: Encode (Text → Base64), Decode (Base64 → Text).
Where to find it
Gutenberg inserter → Developers → search “Base64 Encoder / Decoder” (block name `blockenberg/base64-encoder` in block.json). Style it in the sidebar after insert.
How to use Base64 Encoder / Decoder block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Base64 Encoder / Decoder”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Tool Settings. Set “Default Mode”, “Prefilled Input”, “Show URL-safe option”, “Show line-break option”.
- Check the published page. The view script reads HTML data attributes: data-mode, 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 Mode | Select control; the chosen value is saved on the block. Options: Encode (Text → Base64); Decode (Base64 → Text). block.json default: encode. Saved as `defaultMode`. |
| Prefilled Input | Text field in the inspector. Saved as `defaultInput`. |
| Show URL-safe option | On/off toggle in the inspector. On by default. Saved as `showUrlSafe`. |
| Show line-break option | On/off toggle in the inspector. On by default. Saved as `showLineBreaks`. |
| Show character stats | On/off toggle in the inspector. On by default. Saved as `showStats`. |
| Max Width (px) | Numeric range control in the inspector. Range 400–1100. block.json default: 720. Saved as `contentMaxWidth`. |
| 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`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-mode, data-opts.
When this is the right block
- Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy — that is the job of Base64 Encoder / Decoder, not a generic content block.
- Use it when you need the editor control labeled “Default Mode”, which exists on this block’s inspector.
- It matches pages about base64, encode, decode.
- Inserter grouping: docs sites, utilities, and developer landing pages.
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 Base64 Encoder / Decoder block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Base64 Encoder / Decoder”. It sits under Developers. After insert, open Tool Settings and set “Default Mode”, “Prefilled Input”, “Show URL-safe option”, “Show line-break option”.
What makes Base64 Encoder / Decoder different from other Blockenberg blocks?
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy. Inspector labels on this block include “Default Mode”, “Prefilled Input”, “Show URL-safe option”, “Show line-break option”.
Is the Base64 Encoder / Decoder Gutenberg block free?
Yes. Base64 Encoder / Decoder ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Base64 Encoder / Decoder 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: Tool Settings, Display Options, Sizing).
Related developers blocks
URL Encoder / Decoder
Encode and decode URLs or convert text to and from Base64, with a clean multi-tab interface.
Regex Tester
Live regular expression tester with match highlighting, capture groups, and flag controls.
UUID Generator
Generate universally unique identifiers (UUID v4 and v1-style). Batch generate, copy individual or all, toggle formatting options, and view generation history.
API Reference
Display API endpoint documentation with method badge, parameters table, and request/response code examples.
Code Tabs
Multi-language tabbed code viewer with syntax highlighting. Show the same snippet in JavaScript, Python, PHP, and more.
Color Converter
Live Hex ↔ RGB ↔ HSL color converter with a real-time color preview swatch.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Base64 Encoder / Decoder from the Gutenberg inserter.