Developers · Gutenberg
Word Counter block for WordPress
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.
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
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.
Inspector panels on this block: Header, Counter Settings, Sizing & Layout. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Developers → search “Word Counter” (block name `blockenberg/word-counter` in block.json). Style it in the sidebar after insert.
How to use Word Counter block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Word Counter”, 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: Word Counter. Saved as `title`. |
| Subtitle | Text field in the inspector. block.json default: Paste or type your text below for an instant analysis.. Saved as `subtitle`. |
| Textarea Placeholder | Text field in the inspector. block.json default: Start typing or paste your text here…. Saved as `placeholder`. |
| Default Text (pre-filled) | Text field in the inspector. Saved as `defaultText`. |
| Show Characters Without Spaces | On/off toggle in the inspector. On by default. Saved as `showCharNoSpaces`. |
| Show Sentence Count | On/off toggle in the inspector. On by default. Saved as `showSentences`. |
| Show Paragraph Count | On/off toggle in the inspector. On by default. Saved as `showParagraphs`. |
| Show Reading Time | On/off toggle in the inspector. On by default. Saved as `showReadingTime`. |
| Show Speaking Time | On/off toggle in the inspector. On by default. Saved as `showSpeakingTime`. |
| Reading Speed (WPM) | Numeric range control in the inspector. Range 100–600. block.json default: 238. Saved as `readingWPM`. |
| Speaking Speed (WPM) | Numeric range control in the inspector. Range 80–400. block.json default: 130. Saved as `speakingWPM`. |
| Enable Character Limit | On/off toggle in the inspector. Off by default. Saved as `showCharLimit`. |
| Character Limit | Numeric range control in the inspector. Range 50–5000. block.json default: 500. Saved as `charLimit`. |
| Stat Value Size | Numeric range control in the inspector. Range 20–72. block.json default: 36. Saved as `statValueSize`. |
| Textarea Height (px) | Numeric range control in the inspector. Range 80–600. block.json default: 200. Saved as `textareaHeight`. |
| 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–24. block.json default: 8. Saved as `inputRadius`. |
| Max Width (px) | Numeric range control in the inspector. Range 300–1000. block.json default: 680. 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.
When this is the right block
- 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 — that is the job of Word Counter, 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 word, counter, character.
- 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 Word Counter block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Word Counter”. It sits under Developers. After insert, open Header and set “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
What makes Word Counter different from other Blockenberg blocks?
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. Inspector labels on this block include “Show Title”, “Show Subtitle”, “Header — Title”, “Subtitle”.
Is the Word Counter Gutenberg block free?
Yes. Word Counter ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Word Counter 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, Counter Settings, Sizing & Layout).
Related developers blocks
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.
Readability Score
Analyze text readability with Flesch-Kincaid, Gunning Fog, and more.
Base64 Encoder / Decoder
Encode plain text to Base64 or decode Base64 back to text. Supports Unicode, URL-safe Base64 and one-click copy.
Lorem Ipsum Generator
Generate placeholder Lorem Ipsum text by paragraphs, sentences, words, or lists — with optional HTML output and one-click copy.
Markdown Preview
Live Markdown editor with real-time rendered preview, toolbar shortcuts, and copy buttons.
Password Generator
Secure random password generator with configurable length, character types (uppercase, lowercase, numbers, symbols), strength indicator, copy button, and fully customizable styling.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Word Counter from the Gutenberg inserter.