Effects · Gutenberg
Reveal Swipe Cards block for WordPress
Before/after swipe reveal cards — drag the divider to uncover the back image.
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
Before/after swipe reveal cards — drag the divider to uncover the back image.
Inspector panels on this block: Cards, Card, Layout, Divider & Handle, Labels. Those titles come from index.js, not from a shared template.
Behavior controls: “Swipe Orientation” options: Horizontal, Vertical.
Where to find it
Gutenberg inserter → Effects → search “Reveal Swipe Cards” (block name `blockenberg/reveal-swipe-cards` in block.json). Style it in the sidebar after insert.
How to use Reveal Swipe Cards block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Reveal Swipe Cards”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Cards. Set “Front Label”, “Back Label”, “Initial Divider Position (%)”, “Columns”.
- 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 |
|---|---|
| Front Label | Text field in the inspector. |
| Back Label | Text field in the inspector. |
| Initial Divider Position (%) | Numeric range control in the inspector. Range 5–95. |
| Columns | Select control; the chosen value is saved on the block. block.json default: 2. Saved as `columns`. |
| Swipe Orientation | Select control; the chosen value is saved on the block. Options: Horizontal; Vertical. block.json default: horizontal. Saved as `orientation`. |
| Card Height (px) | Numeric range control in the inspector. Range 160–700. block.json default: 360. Saved as `cardHeight`. |
| Card Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 16. Saved as `cardRadius`. |
| Gap (px) | Numeric range control in the inspector. Range 0–60. block.json default: 24. Saved as `gap`. |
| Divider Width (px) | Numeric range control in the inspector. Range 1–8. block.json default: 3. Saved as `dividerWidth`. |
| Handle Size (px) | Numeric range control in the inspector. Range 24–80. block.json default: 44. Saved as `handleSize`. |
| Show Labels | On/off toggle in the inspector. On by default. Saved as `showLabels`. |
| Labels | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `labelTypo`. |
| Divider | Color control in the inspector. block.json default: #ffffff. Saved as `dividerColor`. |
| Handle BG | Color control in the inspector. block.json default: #ffffff. Saved as `handleBg`. |
| Handle Icon | Color control in the inspector. block.json default: #0f172a. Saved as `handleColor`. |
| Label Text | Color control in the inspector. block.json default: #ffffff. Saved as `labelColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
When this is the right block
- Before/after swipe reveal cards — drag the divider to uncover the back image — that is the job of Reveal Swipe Cards, not a generic content block.
- Use it when you need the editor control labeled “Front Label”, which exists on this block’s inspector.
- 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 Reveal Swipe Cards block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Reveal Swipe Cards”. It sits under Effects. After insert, open Cards and set “Front Label”, “Back Label”, “Initial Divider Position (%)”, “Columns”.
What makes Reveal Swipe Cards different from other Blockenberg blocks?
Before/after swipe reveal cards — drag the divider to uncover the back image. Inspector labels on this block include “Front Label”, “Back Label”, “Initial Divider Position (%)”, “Columns”.
Is the Reveal Swipe Cards Gutenberg block free?
Yes. Reveal Swipe Cards ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Reveal Swipe Cards 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: Cards, Card, Layout, Divider & Handle).
Related effects blocks
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Confetti Button
A call-to-action button that triggers a burst of canvas confetti particles on click. Supports multiple confetti styles, custom colors, particle physics and link/action settings.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Reveal Swipe Cards from the Gutenberg inserter.