Developers · Gutenberg
Regex Tester block for WordPress
Live regular expression tester with match highlighting, capture groups, and flag controls.
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 regular expression tester with match highlighting, capture groups, and flag controls.
Inspector panels on this block: Content, Sizing. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Developers → search “Regex Tester” (block name `blockenberg/regex-tester` in block.json). Style it in the sidebar after insert.
How to use Regex Tester block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Regex Tester”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Content. Set “Content — Title”, “Subtitle”, “Default Pattern”, “Default Flags”.
- Check the published page. The view script reads HTML data attributes: data-flag, 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 |
|---|---|
| Content — Title | Text field in the inspector. block.json default: Regex Tester. Saved as `title`. |
| Subtitle | Text field in the inspector. block.json default: Test regular expressions with live match highlighting. Saved as `subtitle`. |
| Default Pattern | Text field in the inspector. block.json default: \b\w+@\w+\.\w+\b. Saved as `defaultPattern`. |
| Default Flags | Text field in the inspector. block.json default: gi. Saved as `defaultFlags`. |
| Show Capture Groups | On/off toggle in the inspector. On by default. Saved as `showGroups`. |
| Show Cheatsheet | On/off toggle in the inspector. Off by default. Saved as `showCheatsheet`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Code / Editor | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `editorTypo`. |
| Accent / Matches | Color control in the inspector. block.json default: #f59e0b. Saved as `accentColor`. |
| Match Highlight Bg | Color control in the inspector. block.json default: #fef3c7. Saved as `matchBg`. |
| Code Editor Bg | Color control in the inspector. block.json default: #1e1e2e. Saved as `editorBg`. |
| Code Editor Text | Color control in the inspector. block.json default: #cdd6f4. Saved as `editorText`. |
| Error Color | Color control in the inspector. block.json default: #dc2626. Saved as `errorColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Section Background | Color control in the inspector. block.json default: #f9fafb. Saved as `sectionBg`. |
| Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Subtitle | Color control in the inspector. block.json default: #6b7280. Saved as `subtitleColor`. |
| Labels | Color control in the inspector. block.json default: #374151. Saved as `labelColor`. |
| Editor Height (px) | Numeric range control in the inspector. Range 80–600. block.json default: 160. Saved as `editorHeight`. |
| Max Width (px) | Numeric range control in the inspector. Range 360–1400. block.json default: 780. Saved as `contentMaxWidth`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-flag, data-opts.
When this is the right block
- Live regular expression tester with match highlighting, capture groups, and flag controls — that is the job of Regex Tester, not a generic content block.
- Use it when you need the editor control labeled “Content — Title”, which exists on this block’s inspector.
- It matches pages about regex, regexp, regular expression.
- 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 Regex Tester block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Regex Tester”. It sits under Developers. After insert, open Content and set “Content — Title”, “Subtitle”, “Default Pattern”, “Default Flags”.
What makes Regex Tester different from other Blockenberg blocks?
Live regular expression tester with match highlighting, capture groups, and flag controls. Inspector labels on this block include “Content — Title”, “Subtitle”, “Default Pattern”, “Default Flags”.
Is the Regex Tester Gutenberg block free?
Yes. Regex Tester ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Regex Tester 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, Sizing).
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.
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.
Cron Builder
Visual cron expression builder. Edit each field individually, see a human-readable description, choose from common presets, preview next run times, and copy the final expression.
GitHub Card
Display a GitHub user profile or repository card with live stats fetched from the GitHub API.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Regex Tester from the Gutenberg inserter.