Effects · Gutenberg
Morphing Text block for WordPress
Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions.
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
Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions.
Inspector panels on this block: Words, Static Text, Animation, Background, Morph Color Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Morph Mode” options: Blur — letters blur in/out, Crossfade — smooth opacity, Slide Up, Slide Down, Typewriter — char by char; “Text Align” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Effects → search “Morphing Text” (block name `blockenberg/morphing-text` in block.json). Style it in the sidebar after insert.
How to use Morphing Text block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Morphing Text”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Words. Set “Text Before”, “Text After”, “Morph Mode”, “Word Duration (ms)”.
- 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 |
|---|---|
| Text Before | Text field in the inspector. block.json default: We. Saved as `staticBefore`. |
| Text After | Text field in the inspector. Saved as `staticAfter`. |
| Morph Mode | Select control; the chosen value is saved on the block. Options: Blur — letters blur in/out; Crossfade — smooth opacity; Slide Up; Slide Down; Typewriter — char by char. block.json default: blur. Saved as `morphMode`. |
| Word Duration (ms) | Numeric range control in the inspector. Range 500–8000. block.json default: 2500. Saved as `duration`. |
| Pause Between (ms) | Numeric range control in the inspector. Range 0–5000. block.json default: 1500. Saved as `pauseDuration`. |
| Loop | On/off toggle in the inspector. On by default. Saved as `loop`. |
| Blinking Cursor | On/off toggle in the inspector. Off by default. Saved as `cursor`. |
| HTML Tag | Select control; the chosen value is saved on the block. block.json default: h2. Saved as `tag`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Show Background | On/off toggle in the inspector. Off by default. Saved as `showBg`. |
| Padding Vertical (px) | Numeric range control in the inspector. Range 0–120. block.json default: 32. Saved as `paddingV`. |
| Padding Horizontal (px) | Numeric range control in the inspector. Range 0–120. block.json default: 24. Saved as `paddingH`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–60. block.json default: 0. Saved as `borderRadius`. |
| Static Text Color | Color control in the inspector. block.json default: #1e293b. Saved as `staticColor`. |
| Morph Color 1 | Color control in the inspector. block.json default: #7c3aed. Saved as `morphColor`. |
| Morph Color 2 (gradient) | Color control in the inspector. block.json default: #ec4899. Saved as `morphColor2`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Use Gradient on Morphing Word | On/off toggle in the inspector. On by default. Saved as `useGradient`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions — that is the job of Morphing Text, not a generic content block.
- Use it when you need the editor control labeled “Text Before”, which exists on this block’s inspector.
- It matches pages about morph, text, animation.
- 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 Morphing Text block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Morphing Text”. It sits under Effects. After insert, open Words and set “Text Before”, “Text After”, “Morph Mode”, “Word Duration (ms)”.
What makes Morphing Text different from other Blockenberg blocks?
Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions. Inspector labels on this block include “Text Before”, “Text After”, “Morph Mode”, “Word Duration (ms)”.
Is the Morphing Text Gutenberg block free?
Yes. Morphing Text ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Morphing Text 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: Words, Static Text, Animation, Background).
Related effects blocks
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Word Flip
Headline with a vertically flipping word that cycles through alternatives — like a slot machine or departure board embedded in text.
Glitch Text
Eye-catching glitch animation text with chromatic aberration, noise, scanlines, and digital distortion effects.
Gradient Text Animator
Animated gradient-filled text with multiple animation modes — shift, pulse, wave, rainbow, and reveal.
Handwriting Text
SVG text that animates in as if being handwritten — stroke reveal effect triggered on scroll or load.
Kinetic Text
Text characters that scatter outward and snap back on hover with smooth physics animation.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Morphing Text from the Gutenberg inserter.