Effects · Gutenberg
Flip Card block for WordPress
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
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
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS.
Inspector panels on this block: Card Settings, Icon (Front), Front Face, Back Face, Button (Back). Those titles come from index.js, not from a shared template.
Behavior controls: “Flip Direction” options: Horizontal (left ↔ right), Vertical (top ↕ bottom); “Flip Trigger” options: Hover, Click; “Card Settings — Shadow” options: None, Small, Medium, Large, XL; “Card Alignment” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Effects → search “Flip Card” (block name `blockenberg/flip-card` in block.json). Style it in the sidebar after insert.
How to use Flip Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Flip Card”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Card Settings. Set “Flip Direction”, “Flip Trigger”, “Flip Speed (ms)”, “Card Width (px)”.
- Check the published page. The view script reads HTML data attributes: data-flip-trigger, data-flipped. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Flip Direction | Select control; the chosen value is saved on the block. Options: Horizontal (left ↔ right); Vertical (top ↕ bottom). block.json default: horizontal. Saved as `flipDirection`. |
| Flip Trigger | Select control; the chosen value is saved on the block. Options: Hover; Click. block.json default: hover. Saved as `flipTrigger`. |
| Flip Speed (ms) | Numeric range control in the inspector. Range 100–1200. block.json default: 500. Saved as `flipSpeed`. |
| Card Width (px) | Numeric range control in the inspector. Range 160–600. block.json default: 280. Saved as `cardWidth`. |
| Card Height (px) | Numeric range control in the inspector. Range 120–800. block.json default: 320. Saved as `cardHeight`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–64. block.json default: 16. Saved as `cardRadius`. |
| Card Settings — Shadow | Select control; the chosen value is saved on the block. Options: None; Small; Medium; Large; XL. block.json default: md. Saved as `cardShadow`. |
| Card Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `cardAlign`. |
| Icon Type | Select control; the chosen value is saved on the block. Options: Star ★; Checkmark ✓; Check Circle ✓●; Arrow ›; Arrow Right →; Disc •; Square ▪; Sparkle ❖; Bolt ⚡; Dash —. block.json default: star. Saved as `iconType`. |
| Character / Emoji / Symbol | Text field in the inspector. Paste any character, emoji, or symbol. block.json default: ★. Saved as `iconChar`. |
| Icon Size (px) | Numeric range control in the inspector. Range 14–120. block.json default: 56. Saved as `iconSize`. |
| Background Shape | Select control; the chosen value is saved on the block. Options: Circle (filled); Square (filled); Circle (outline); Square (outline); None. block.json default: circle-filled. Saved as `iconBgShape`. |
| Bg Container Size (px) | Numeric range control in the inspector. Range 30–200. block.json default: 100. Saved as `iconBgSize`. |
| Bg Corner Radius (px) | Numeric range control in the inspector. Range 0–60. block.json default: 50. Saved as `iconBgRadius`. |
| Gap below icon (px) | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `iconGapBottom`. |
| Content Alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `frontAlign`. |
| Pad Top (px) | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `frontPadTop`. |
| Pad Right (px) | Numeric range control in the inspector. Range 0–80. block.json default: 24. Saved as `frontPadRight`. |
| Pad Bottom (px) | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `frontPadBottom`. |
| Pad Left (px) | Numeric range control in the inspector. Range 0–80. block.json default: 24. Saved as `frontPadLeft`. |
| Tag | Select control; the chosen value is saved on the block. Options: h2; h3; h4; h5; p. block.json default: h3. Saved as `frontTitleTag`. |
| Show Subtitle / Tag | On/off toggle in the inspector. On by default. Saved as `showFrontSub`. |
| Position | Select control; the chosen value is saved on the block. Options: Above title; Below title. block.json default: below-title. Saved as `frontSubPosition`. |
| Gap (px) | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `frontSubSpacing`. |
| Show flip hint text | On/off toggle in the inspector. On by default. Saved as `showFlipHint`. |
| Hint Text | Text field in the inspector. Saved as `flipHintText`. |
| Hint Size (px) | Numeric range control in the inspector. Range 9–16. block.json default: 11. Saved as `flipHintSize`. |
| Content Alignment (Back Align) | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `backAlign`. |
| Pad Top (px) (Back Pad Top) | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `backPadTop`. |
| Pad Right (px) (Back Pad Right) | Numeric range control in the inspector. Range 0–80. block.json default: 24. Saved as `backPadRight`. |
| Pad Bottom (px) (Back Pad Bottom) | Numeric range control in the inspector. Range 0–80. block.json default: 32. Saved as `backPadBottom`. |
| Pad Left (px) (Back Pad Left) | Numeric range control in the inspector. Range 0–80. block.json default: 24. Saved as `backPadLeft`. |
| Show Back Title | On/off toggle in the inspector. On by default. Saved as `showBackTitle`. |
| Tag (Back Title Tag) | Select control; the chosen value is saved on the block. Options: h2; h3; h4; h5; p. block.json default: h3. Saved as `backTitleTag`. |
| Bottom Spacing (px) | Numeric range control in the inspector. Range 0–60. block.json default: 12. Saved as `backTitleSpacing`. |
| Bottom Spacing (px) (Back Text Spacing) | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `backTextSpacing`. |
| Show Button | On/off toggle in the inspector. On by default. Saved as `showButton`. |
| Label | Text field in the inspector. block.json default: Learn More. Saved as `btnLabel`. |
| URL | Text field in the inspector. block.json default: #. Saved as `btnUrl`. |
| Open in | Select control; the chosen value is saved on the block. Options: Same tab; New tab. block.json default: _self. Saved as `btnTarget`. |
| Button (Back) — Style | Select control; the chosen value is saved on the block. Options: Solid; Outline; Ghost. block.json default: solid. Saved as `btnStyle`. |
| Button (Back) — Size | Select control; the chosen value is saved on the block. Options: Small; Medium; Large. block.json default: md. Saved as `btnSize`. |
| Border Radius (px) (Btn Radius) | Numeric range control in the inspector. Range 0–50. block.json default: 8. Saved as `btnRadius`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-flip-trigger, data-flipped.
- Keyboard handlers move focus between items.
When this is the right block
- Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS — that is the job of Flip Card, not a generic content block.
- Use it when you need the editor control labeled “Flip Direction”, 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 Flip Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Flip Card”. It sits under Effects. After insert, open Card Settings and set “Flip Direction”, “Flip Trigger”, “Flip Speed (ms)”, “Card Width (px)”.
What makes Flip Card different from other Blockenberg blocks?
Card with front (icon + title) and back (text + button) that flips on hover or click. Mostly CSS, minimal JS. Inspector labels on this block include “Flip Direction”, “Flip Trigger”, “Flip Speed (ms)”, “Card Width (px)”.
Is the Flip Card Gutenberg block free?
Yes. Flip Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Flip Card 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: Card Settings, Icon (Front), Front Face, Back Face).
Related effects blocks
Content Flip Box
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
Spotlight Card
Card with a radial gradient spotlight that follows the mouse cursor on hover.
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.
Magnetic Button
A button that magnetically pulls toward the cursor as it approaches, with customizable pull strength, style, and ripple effect.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Flip Card from the Gutenberg inserter.