Effects · Gutenberg
Typing Effect block for WordPress
Animated typewriter text that cycles through multiple phrases with a blinking cursor.
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
Animated typewriter text that cycles through multiple phrases with a blinking cursor.
Inspector panels on this block: Content, Animation. Those titles come from index.js, not from a shared template.
Behavior controls: “Typing Phrases (comma-separated)” (e.g.: beautiful websites,powerful apps,amazing brands); “Text Align” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Effects → search “Typing Effect” (block name `blockenberg/typing-effect` in block.json). Style it in the sidebar after insert.
How to use Typing Effect block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Typing Effect”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Content. Set “Static Prefix Text”, “Typing Phrases (comma-separated)”, “Static Suffix Text”, “HTML Tag”.
- Check the published page. The view script reads HTML data attributes: data-cursor-blink, data-delete-speed, data-loop, data-pause, data-phrases, data-type-speed. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Static Prefix Text | Text field in the inspector. block.json default: We build . Saved as `prefix`. |
| Typing Phrases (comma-separated) | Multiline text field in the inspector. e.g.: beautiful websites,powerful apps,amazing brands. block.json default: beautiful websites,powerful apps,amazing brands. Saved as `phrases`. |
| Static Suffix Text | Text field in the inspector. Saved as `suffix`. |
| HTML Tag | Select control; the chosen value is saved on the block. block.json default: h2. Saved as `tag`. |
| Type Speed (ms/char) | Numeric range control in the inspector. Range 20–300. block.json default: 80. Saved as `typeSpeed`. |
| Delete Speed (ms/char) | Numeric range control in the inspector. Range 10–200. block.json default: 40. Saved as `deleteSpeed`. |
| Pause After Phrase (ms) | Numeric range control in the inspector. Range 200–5000. block.json default: 1800. Saved as `pauseDelay`. |
| Loop | On/off toggle in the inspector. On by default. Saved as `loop`. |
| Cursor Character | Text field in the inspector. block.json default: |. Saved as `cursorChar`. |
| Cursor Blink | On/off toggle in the inspector. On by default. Saved as `cursorBlink`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 32. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 32. Saved as `paddingBottom`. |
| Prefix / Suffix Color | Color control in the inspector. block.json default: #1f2937. Saved as `prefixColor`. |
| Typed Text Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `typedColor`. |
| Cursor Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `cursorColor`. |
| Background Color | Color control in the inspector. Saved as `bgColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-cursor-blink, data-delete-speed, data-loop, data-pause, data-phrases, data-type-speed.
When this is the right block
- Animated typewriter text that cycles through multiple phrases with a blinking cursor — that is the job of Typing Effect, not a generic content block.
- Use it when you need the editor control labeled “Static Prefix Text”, which exists on this block’s inspector.
- It matches pages about typing, typewriter, animated.
- Inserter grouping: motion, overlays, and visual treatments.
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 Typing Effect block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Typing Effect”. It sits under Effects. After insert, open Content and set “Static Prefix Text”, “Typing Phrases (comma-separated)”, “Static Suffix Text”, “HTML Tag”.
What makes Typing Effect different from other Blockenberg blocks?
Animated typewriter text that cycles through multiple phrases with a blinking cursor. Inspector labels on this block include “Static Prefix Text”, “Typing Phrases (comma-separated)”, “Static Suffix Text”, “HTML Tag”.
Is the Typing Effect Gutenberg block free?
Yes. Typing Effect ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Typing Effect 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, Animation).
Related effects blocks
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Gradient Text
Heading or paragraph text with a rich gradient fill, optional outline, shadow, and CSS animation.
Morphing Text
Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions.
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Cursor Spotlight
A dark section with a radial spotlight that follows the cursor, dramatically revealing the content beneath.
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Typing Effect from the Gutenberg inserter.