Effects · Gutenberg
Word Flip block for WordPress
Headline with a vertically flipping word that cycles through alternatives — like a slot machine or departure board embedded in text.
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 with a vertically flipping word that cycles through alternatives — like a slot machine or departure board embedded in text.
Inspector panels on this block: Words List, Static Text, Animation, Flip Word Style, Background. Those titles come from index.js, not from a shared template.
Behavior controls: “Flip Mode” options: Roll — slides up continuously, Flip 3D — rotateX perspective, Fade + Slide Up, Zoom In; “Text Align” options: Left, Center, Right; “Underline / Decoration” options: None, Solid Line, Wavy, Dashed, Highlight Block.
Where to find it
Gutenberg inserter → Effects → search “Word Flip” (block name `blockenberg/word-flip` in block.json). Style it in the sidebar after insert.
How to use Word Flip block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Word Flip”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Words List. Set “Before”, “After”, “Flip Mode”, “Interval (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 |
|---|---|
| Before | Text field in the inspector. block.json default: We are. Saved as `staticBefore`. |
| After | Text field in the inspector. Saved as `staticAfter`. |
| Flip Mode | Select control; the chosen value is saved on the block. Options: Roll — slides up continuously; Flip 3D — rotateX perspective; Fade + Slide Up; Zoom In. block.json default: roll. Saved as `flipMode`. |
| Interval (ms) | Numeric range control in the inspector. Range 500–8000. block.json default: 2200. Saved as `interval`. |
| Flip Speed (ms) | Numeric range control in the inspector. Range 100–1200. block.json default: 420. Saved as `flipSpeed`. |
| 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`. |
| Underline / Decoration | Select control; the chosen value is saved on the block. Options: None; Solid Line; Wavy; Dashed; Highlight Block. block.json default: none. Saved as `underlineStyle`. |
| Padding Horizontal (px) | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `flipPaddingH`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 4. Saved as `flipBorderRadius`. |
| Show Background | On/off toggle in the inspector. Off by default. Saved as `showBg`. |
| Padding V (px) | Numeric range control in the inspector. Range 0–120. block.json default: 32. Saved as `paddingV`. |
| Padding H (px) | Numeric range control in the inspector. Range 0–120. block.json default: 24. Saved as `paddingH`. |
| Block Radius (px) | Numeric range control in the inspector. Range 0–60. block.json default: 0. Saved as `borderRadius`. |
| Static Text | Color control in the inspector. block.json default: #0f172a. Saved as `staticColor`. |
| Flip Word Color | Color control in the inspector. block.json default: #7c3aed. Saved as `flipColor`. |
| Flip Word Background | Color control in the inspector. Saved as `flipBg`. |
| Decoration Color | Color control in the inspector. block.json default: #7c3aed. Saved as `underlineColor`. |
| Block Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Headline with a vertically flipping word that cycles through alternatives — like a slot machine or departure board embedded in text — that is the job of Word Flip, not a generic content block.
- Use it when you need the editor control labeled “Before”, which exists on this block’s inspector.
- It matches pages about flip, word, text.
- 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 Word Flip block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Word Flip”. It sits under Effects. After insert, open Words List and set “Before”, “After”, “Flip Mode”, “Interval (ms)”.
What makes Word Flip different from other Blockenberg blocks?
Headline with a vertically flipping word that cycles through alternatives — like a slot machine or departure board embedded in text. Inspector labels on this block include “Before”, “After”, “Flip Mode”, “Interval (ms)”.
Is the Word Flip Gutenberg block free?
Yes. Word Flip ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Word Flip 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 List, Static Text, Animation, Flip Word Style).
Related effects blocks
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Morphing Text
Headline that smoothly morphs between multiple words with blur, crossfade, slide, or typewriter transitions.
Split Text
Scroll-triggered per-word or per-character text reveal animation. Each word or character animates in sequentially as the block enters the viewport.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Word Flip from the Gutenberg inserter.