Effects · Gutenberg
Content Flip Box block for WordPress
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
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
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
Inspector panels on this block: Items, ✏, Front Colors, Back Colors, Grid & Layout, Flip Settings, Button Style. Those titles come from index.js, not from a shared template.
Behavior controls: “Text Align” options: Left, Center, Right; “Flip Direction” options: Horizontal (Y-axis), Vertical (X-axis), Fade; “Flip Trigger” options: On Hover, On Click.
Where to find it
Gutenberg inserter → Effects → search “Content Flip Box” (block name `blockenberg/content-flip-box` in block.json). Style it in the sidebar after insert.
How to use Content Flip Box block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Content Flip Box”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Items. Set “✏ — Title”, “✏ — Text”, “Front Colors — Background”, “Text Color”.
- Check the published page. The view script reads HTML data attributes: data-trigger. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| ✏ — Title | Text field in the inspector. |
| ✏ — Text | Text field in the inspector. |
| Front Colors — Background | Color control in the inspector. |
| Text Color | Color control in the inspector. |
| Front Colors — Title | Text field in the inspector. |
| Front Colors — Text | Text field in the inspector. |
| Button Text | Text field in the inspector. |
| Button URL | Text field in the inspector. |
| Back Colors — Background | Color control in the inspector. |
| Button Background | Color control in the inspector. |
| Columns | Numeric range control in the inspector. Range 1–6. block.json default: 3. Saved as `columns`. |
| Grid & Layout — Gap | Numeric range control in the inspector. Range 0–60. block.json default: 24. Saved as `gap`. |
| Card Height (px) | Numeric range control in the inspector. Range 160–600. block.json default: 280. Saved as `cardHeight`. |
| Border Radius | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `borderRadius`. |
| Text Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `textAlign`. |
| Flip Direction | Select control; the chosen value is saved on the block. Options: Horizontal (Y-axis); Vertical (X-axis); Fade. block.json default: horizontal. Saved as `flipDirection`. |
| Flip Trigger | Select control; the chosen value is saved on the block. Options: On Hover; On Click. block.json default: hover. Saved as `flipTrigger`. |
| Flip Speed (ms) | Numeric range control in the inspector. Range 200–1200. block.json default: 600. Saved as `flipSpeed`. |
| Icon Size | Numeric range control in the inspector. Range 20–80. block.json default: 48. Saved as `iconSize`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Typography — Text | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoText`. |
| Show Front Text | On/off toggle in the inspector. On by default. Saved as `showFrontText`. |
| Show Back Button | On/off toggle in the inspector. On by default. Saved as `showBackBtn`. |
| Button Font Size | Numeric range control in the inspector. Range 11–20. block.json default: 14. Saved as `btnFontSize`. |
| Button Border Radius | Numeric range control in the inspector. Range 0–50. block.json default: 50. Saved as `btnRadius`. |
| Button Padding H | Numeric range control in the inspector. Range 6–40. block.json default: 12. Saved as `btnPadding`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-trigger.
When this is the right block
- A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more — that is the job of Content Flip Box, not a generic content block.
- Use it when you need the editor control labeled “✏ — Title”, which exists on this block’s inspector.
- It matches pages about flip, card, hover.
- 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 Content Flip Box block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Content Flip Box”. It sits under Effects. After insert, open Items and set “✏ — Title”, “✏ — Text”, “Front Colors — Background”, “Text Color”.
What makes Content Flip Box different from other Blockenberg blocks?
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more. Inspector labels on this block include “✏ — Title”, “✏ — Text”, “Front Colors — Background”, “Text Color”.
Is the Content Flip Box Gutenberg block free?
Yes. Content Flip Box ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Content Flip Box 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: Items, ✏, Front Colors, Back Colors).
Related effects blocks
Flip Card
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
Tilt Card
Card with 3D perspective tilt effect on mouse hover. Rich content with image, heading, text, icon, and link.
Holographic Card
A card with an iridescent holographic foil surface effect that reacts to mouse movement with rainbow shimmer and 3D tilt.
Hover Card
Card that reveals hidden content (overlay) when hovered with customizable direction and animation.
Spotlight Card
Card with a radial gradient spotlight that follows the mouse cursor on hover.
Cursor Spotlight
A dark section with a radial spotlight that follows the cursor, dramatically revealing the content beneath.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Content Flip Box from the Gutenberg inserter.