Developers · Gutenberg
Text Case Converter block for WordPress
Live text transformer: paste any text and instantly get it in multiple case formats with 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
Live text transformer: paste any text and instantly get it in multiple case formats with one-click copy.
Inspector panels on this block: Header, Case Options, Sizing & Layout. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Developers → search “Text Case Converter” (block name `blockenberg/text-case-converter` in block.json). Style it in the sidebar after insert.
How to use Text Case Converter block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Text Case Converter”, 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: Text Case Converter. Saved as `title`. |
| Subtitle | Text field in the inspector. block.json default: Paste your text below and copy any case instantly. Saved as `subtitle`. |
| Input Placeholder | Text field in the inspector. block.json default: Paste or type your text here…. Saved as `placeholder`. |
| UPPERCASE | On/off toggle in the inspector. On by default. Saved as `showUppercase`. |
| lowercase | On/off toggle in the inspector. On by default. Saved as `showLowercase`. |
| Title Case | On/off toggle in the inspector. On by default. Saved as `showTitleCase`. |
| Sentence case | On/off toggle in the inspector. On by default. Saved as `showSentenceCase`. |
| camelCase | On/off toggle in the inspector. On by default. Saved as `showCamelCase`. |
| PascalCase | On/off toggle in the inspector. On by default. Saved as `showPascalCase`. |
| snake_case | On/off toggle in the inspector. On by default. Saved as `showSnakeCase`. |
| kebab-case | On/off toggle in the inspector. On by default. Saved as `showKebabCase`. |
| Show Copy Buttons | On/off toggle in the inspector. On by default. Saved as `showCopyButtons`. |
| Card Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Row Border Radius | Numeric range control in the inspector. Range 0–24. block.json default: 10. Saved as `rowRadius`. |
| Max Width (px) | Numeric range control in the inspector. Range 340–960. block.json default: 640. 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: toPascalCase.
When this is the right block
- Live text transformer: paste any text and instantly get it in multiple case formats with one-click copy — that is the job of Text Case Converter, 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 text, case, convert.
- 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 Text Case Converter block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Text Case Converter”. It sits under Developers. After insert, open Header and set “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
Does Text Case Converter 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 Text Case Converter Gutenberg block free?
Yes. Text Case Converter ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Text Case Converter 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, Case Options, Sizing & Layout).
Related developers blocks
Markdown Preview
Live Markdown editor with real-time rendered preview, toolbar shortcuts, and copy buttons.
Readability Score
Analyze text readability with Flesch-Kincaid, Gunning Fog, and more.
Text Analyzer
Comprehensive text analysis tool: word/character/sentence counts, vocabulary richness, top word frequency chart, average lengths, and more. Live updates as you type.
Word Counter
An interactive word counter tool. Users paste or type text and instantly see word count, character count, sentence count, paragraph count, reading time, and speaking time.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Text Case Converter from the Gutenberg inserter.