Effects · Gutenberg
Unfold block for WordPress
Expandable content section that starts collapsed with a fade gradient and expands smoothly on button click.
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
Expandable content section that starts collapsed with a fade gradient and expands smoothly on button click.
Inspector panels on this block: Content, Button Settings. Those titles come from index.js, not from a shared template.
Behavior controls: “Button alignment” options: Left, Center, Right; “Button style” options: Filled, Outline, Text.
Where to find it
Gutenberg inserter → Effects → search “Unfold” (block name `blockenberg/unfold` in block.json). Style it in the sidebar after insert.
How to use Unfold block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Unfold”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Content. Set “Preview height (px)”, “Fade gradient height (px)”, “Expand animation (ms)”, “Expand button text”.
- 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 |
|---|---|
| Preview height (px) | Numeric range control in the inspector. Range 60–800. block.json default: 200. Saved as `previewHeight`. |
| Fade gradient height (px) | Numeric range control in the inspector. Range 20–200. block.json default: 60. Saved as `gradientHeight`. |
| Expand animation (ms) | Numeric range control in the inspector. Range 100–1200. block.json default: 400. Saved as `animationDuration`. |
| Expand button text | Text field in the inspector. block.json default: Read More ↓. Saved as `expandText`. |
| Collapse button text | Text field in the inspector. block.json default: Show Less ↑. Saved as `collapseText`. |
| Show collapse button | On/off toggle in the inspector. On by default. Saved as `showCollapseBtn`. |
| Button alignment | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `buttonAlign`. |
| Button style | Select control; the chosen value is saved on the block. Options: Filled; Outline; Text. block.json default: filled. Saved as `buttonStyle`. |
| Border radius | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `borderRadius`. |
| Section background | Color control in the inspector. block.json default: #ffffff. Saved as `sectionBg`. |
| Content text | Color control in the inspector. block.json default: #374151. Saved as `contentColor`. |
| Gradient end color | Color control in the inspector. block.json default: #ffffff. Saved as `gradientTo`. |
| Accent / focus | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Button background | Color control in the inspector. block.json default: #6366f1. Saved as `buttonBg`. |
| Button text | Color control in the inspector. block.json default: #ffffff. Saved as `buttonColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Headers keep aria-expanded in sync so screen readers hear open vs closed.
When this is the right block
- Expandable content section that starts collapsed with a fade gradient and expands smoothly on button click — that is the job of Unfold, not a generic content block.
- Use it when you need the editor control labeled “Preview height (px)”, which exists on this block’s inspector.
- It matches pages about expand, read more, toggle.
- 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 Unfold block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Unfold”. It sits under Effects. After insert, open Content and set “Preview height (px)”, “Fade gradient height (px)”, “Expand animation (ms)”, “Expand button text”.
What makes Unfold different from other Blockenberg blocks?
Expandable content section that starts collapsed with a fade gradient and expands smoothly on button click. Inspector labels on this block include “Preview height (px)”, “Fade gradient height (px)”, “Expand animation (ms)”, “Expand button text”.
Is the Unfold Gutenberg block free?
Yes. Unfold ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Unfold 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: Content, Button Settings).
Related effects blocks
Dark Mode Toggle
A light/dark mode switcher. Adds a toggle button that persists the user's theme preference to localStorage and applies a data attribute to the root element.
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.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Unfold from the Gutenberg inserter.