Effects · Gutenberg
Split Text block for WordPress
Scroll-triggered per-word or per-character text reveal animation. Each word or character animates in sequentially as the block enters the viewport.
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
Scroll-triggered per-word or per-character text reveal animation. Each word or character animates in sequentially as the block enters the viewport.
Inspector panels on this block: Text, Animation, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Text content” (For line splits use new lines (Enter)); “HTML tag” options: h1, h2, h3, h4, p; “Highlight words (comma-separated)” (These words will appear in the highlight colour); “Split by” options: Words, Characters, Lines.
Where to find it
Gutenberg inserter → Effects → search “Split Text” (block name `blockenberg/split-text` in block.json). Style it in the sidebar after insert.
How to use Split Text block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Split Text”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Text. Set “Text content”, “HTML tag”, “Highlight words (comma-separated)”, “Split by”.
- Check the published page. The view script reads HTML data attributes: data-animation, data-repeat, data-split, data-stagger, data-threshold. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Text content | Multiline text field in the inspector. For line splits use new lines (Enter). block.json default: Words that reveal themselves one by one as you scroll.. Saved as `text`. |
| HTML tag | Select control; the chosen value is saved on the block. Options: h1; h2; h3; h4; p; div. block.json default: h2. Saved as `tag`. |
| Highlight words (comma-separated) | Text field in the inspector. These words will appear in the highlight colour. Saved as `highlightWords`. |
| Split by | Select control; the chosen value is saved on the block. Options: Words; Characters; Lines. block.json default: words. Saved as `splitType`. |
| Animation style | Select control; the chosen value is saved on the block. Options: Fade up; Fade in; Slide right; Zoom in; Blur in; Drop down. block.json default: fade-up. Saved as `animation`. |
| Stagger delay (ms per unit) | Numeric range control in the inspector. Range 10–400. block.json default: 80. Saved as `stagger`. |
| Animation duration (ms) | Numeric range control in the inspector. Range 100–2000. block.json default: 600. Saved as `duration`. |
| Trigger threshold (0–1) | Numeric range control in the inspector. Range 0–1. block.json default: 0.15. Saved as `threshold`. |
| Repeat when re-entering viewport | On/off toggle in the inspector. Off by default. Saved as `repeat`. |
| 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: 60. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 60. Saved as `paddingBottom`. |
| Text color | Color control in the inspector. block.json default: #111827. Saved as `textColor`. |
| Highlight color | Color control in the inspector. block.json default: #6c3fb5. Saved as `highlightColor`. |
| Colors — Background | Color control in the inspector. Saved as `wrapBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-animation, data-repeat, data-split, data-stagger, data-threshold.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- Scroll-triggered per-word or per-character text reveal animation. Each word or character animates in sequentially as the block enters the viewport — that is the job of Split Text, not a generic content block.
- Use it when you need the editor control labeled “Text content”, which exists on this block’s inspector.
- It matches pages about split, 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 Split Text block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Split Text”. It sits under Effects. After insert, open Text and set “Text content”, “HTML tag”, “Highlight words (comma-separated)”, “Split by”.
What makes Split Text different from other Blockenberg blocks?
Scroll-triggered per-word or per-character text reveal animation. Each word or character animates in sequentially as the block enters the viewport. Inspector labels on this block include “Text content”, “HTML tag”, “Highlight words (comma-separated)”, “Split by”.
Is the Split Text Gutenberg block free?
Yes. Split Text ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Split 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: Text, Animation, Layout).
Related effects blocks
Image Reveal
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption.
Scroll Reveal
Wrap any blocks in a scroll-triggered reveal animation. Children animate into view when they enter the viewport.
Word Flip
Headline with a vertically flipping word that cycles through alternatives — like a slot machine or departure board embedded in text.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Split Text from the Gutenberg inserter.