Developers · Gutenberg
URL Encoder / Decoder block for WordPress
Encode and decode URLs or convert text to and from Base64, with a clean multi-tab interface.
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 and decode URLs or convert text to and from Base64, with a clean multi-tab interface.
Inspector panels on this block: Header, Encoder Settings, Sizing & Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Default Tab” options: URL Encode, URL Decode, Base64.
Where to find it
Gutenberg inserter → Developers → search “URL Encoder / Decoder” (block name `blockenberg/url-encoder` in block.json). Style it in the sidebar after insert.
How to use URL Encoder / Decoder block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “URL Encoder / Decoder”, 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, data-tab. 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: URL Encoder / Decoder. Saved as `title`. |
| Subtitle | Text field in the inspector. block.json default: Encode, decode URLs and convert Base64. Saved as `subtitle`. |
| Default Tab | Select control; the chosen value is saved on the block. Options: URL Encode; URL Decode; Base64. block.json default: encode. Saved as `defaultMode`. |
| Default Input Text | Multiline text field in the inspector. block.json default: https://example.com/search?q=hello world&lang=en#results. Saved as `defaultText`. |
| Show Base64 Tab | On/off toggle in the inspector. On by default. Saved as `showBase64Tab`. |
| Show Copy Button | On/off toggle in the inspector. On by default. Saved as `showCopyButton`. |
| Show Clear Button | On/off toggle in the inspector. On by default. Saved as `showClearButton`. |
| Show Char Count | On/off toggle in the inspector. On by default. Saved as `showCharCount`. |
| Textarea Rows | Numeric range control in the inspector. Range 3–16. block.json default: 5. Saved as `textareaRows`. |
| 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–20. block.json default: 10. Saved as `inputRadius`. |
| Tab Border Radius | Numeric range control in the inspector. Range 0–20. block.json default: 8. Saved as `tabRadius`. |
| Max Width (px) | Numeric range control in the inspector. Range 360–1100. block.json default: 680. Saved as `maxWidth`. |
| Padding Top | Numeric range control in the inspector. Range 0–160. block.json default: 60. Saved as `paddingTop`. |
| Padding Bottom | 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, data-tab.
When this is the right block
- Encode and decode URLs or convert text to and from Base64, with a clean multi-tab interface — that is the job of URL Encoder / Decoder, 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 url, 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 URL Encoder / Decoder block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “URL Encoder / Decoder”. It sits under Developers. After insert, open Header and set “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
What makes URL Encoder / Decoder different from other Blockenberg blocks?
Encode and decode URLs or convert text to and from Base64, with a clean multi-tab interface. Inspector labels on this block include “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
Is the URL Encoder / Decoder Gutenberg block free?
Yes. URL Encoder / Decoder ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style URL 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: Header, Encoder Settings, Sizing & Layout).
Related developers blocks
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
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.
Browser Mockup
Display a realistic browser chrome window around a customizable mini page preview — perfect for product screenshots, UI demos, and tutorials.
Clipboard Copy
Display a copyable code, coupon, or text with a one-click copy button.
Code Block
Syntax-highlighted code block with copy button, line numbers, and multiple themes.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert URL Encoder / Decoder from the Gutenberg inserter.