Media · Gutenberg
Image Accordion block for WordPress
Expandable image panels that stretch open on hover or click — ideal for showcasing portfolios, services, or locations.
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 image panels that stretch open on hover or click — ideal for showcasing portfolios, services, or locations.
Inspector panels on this block: Panels, Behaviour, Text Content. Those titles come from index.js, not from a shared template.
Behavior controls: “Trigger” options: Hover, Click; “Direction” options: Horizontal, Vertical; “Easing” options: ease, ease-in-out, ease-out, linear; “Text Position” options: Bottom Left, Bottom Center, Bottom Right, Top Left, Center.
Where to find it
Gutenberg inserter → Media → search “Image Accordion” (block name `blockenberg/image-accordion` in block.json). Style it in the sidebar after insert.
How to use Image Accordion block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Image Accordion”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Panels. Set “Label”, “Title”, “Subtitle”, “Trigger”.
- Check the published page. The view script reads HTML data attributes: data-col-flex, data-default, data-duration, data-easing, data-exp-flex, data-ov-color, data-ov-hover, data-overlay. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Label | Text field in the inspector. |
| Title | Text field in the inspector. |
| Subtitle | Text field in the inspector. |
| Trigger | Select control; the chosen value is saved on the block. Options: Hover; Click. block.json default: hover. Saved as `trigger`. |
| Direction | Select control; the chosen value is saved on the block. Options: Horizontal; Vertical. block.json default: horizontal. Saved as `direction`. |
| Default Open Panel | Select control; the chosen value is saved on the block. block.json default: 0. Saved as `defaultOpen`. |
| Height (px) | Numeric range control in the inspector. Range 200–900. block.json default: 500. Saved as `height`. |
| Expanded Flex | Numeric range control in the inspector. Range 2–10. block.json default: 4. Saved as `expandedFlex`. |
| Collapsed Flex | Numeric range control in the inspector. Range 1–4. block.json default: 1. Saved as `collapsedFlex`. |
| Transition Duration (ms) | Numeric range control in the inspector. Range 100–1200. block.json default: 500. Saved as `transitionDuration`. |
| Easing | Select control; the chosen value is saved on the block. Options: ease; ease-in-out; ease-out; linear. block.json default: ease. Saved as `transitionEasing`. |
| Scale Image on Expand | On/off toggle in the inspector. On by default. Saved as `scaleOnHover`. |
| Show Label | On/off toggle in the inspector. On by default. Saved as `showLabel`. |
| Show Title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show Subtitle | On/off toggle in the inspector. On by default. Saved as `showSubtitle`. |
| Show Arrow | On/off toggle in the inspector. Off by default. Saved as `showArrow`. |
| Text Position | Select control; the chosen value is saved on the block. Options: Bottom Left; Bottom Center; Bottom Right; Top Left; Center. block.json default: bottom-left. Saved as `textPosition`. |
| Text Visibility | Select control; the chosen value is saved on the block. Options: Always visible; Visible when expanded; Visible when collapsed. block.json default: always. Saved as `textVisibility`. |
| Gap (px) | Numeric range control in the inspector. Range 0–32. block.json default: 8. Saved as `gap`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 12. Saved as `borderRadius`. |
| Overlay Opacity (collapsed, %) | Numeric range control in the inspector. Range 0–100. block.json default: 40. Saved as `overlayOpacity`. |
| Overlay Opacity (expanded, %) | Numeric range control in the inspector. Range 0–100. block.json default: 20. Saved as `overlayHoverOpacity`. |
| Overlay Color | Color control in the inspector. block.json default: #000000. Saved as `overlayColor`. |
| Title Color | Color control in the inspector. block.json default: #ffffff. Saved as `titleColor`. |
| Subtitle Color | Color control in the inspector. block.json default: #e5e7eb. Saved as `subtitleColor`. |
| Label Color | Color control in the inspector. block.json default: #ffffff. Saved as `labelColor`. |
| Background Fallback | Color control in the inspector. block.json default: #374151. Saved as `bgFallbackColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-col-flex, data-default, data-duration, data-easing, data-exp-flex, data-ov-color, data-ov-hover, data-overlay.
When this is the right block
- Expandable image panels that stretch open on hover or click — ideal for showcasing portfolios, services, or locations — that is the job of Image Accordion, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- It matches pages about image, accordion, panel.
- Inserter grouping: video, animation, and rich media sections.
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 Image Accordion block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Image Accordion”. It sits under Media. After insert, open Panels and set “Label”, “Title”, “Subtitle”, “Trigger”.
What makes Image Accordion different from other Blockenberg blocks?
Expandable image panels that stretch open on hover or click — ideal for showcasing portfolios, services, or locations. Inspector labels on this block include “Label”, “Title”, “Subtitle”, “Trigger”.
Is the Image Accordion Gutenberg block free?
Yes. Image Accordion ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Image Accordion 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: Panels, Behaviour, Text Content).
Related media blocks
Image Box
A clickable image card with overlay title, hover effects, and a link.
Image Magnifier
Image with a zoom lens that follows the cursor on hover — perfect for product photography and detail shots.
Lightbox Gallery
Image grid where clicking a thumbnail opens a full-screen lightbox with prev/next navigation.
Before / After Grid
A grid of interactive before/after image comparison sliders — show multiple transformations, makeovers, or design iterations in one layout.
Filter Gallery
Image grid with category filter buttons. Clicking a tag shows/hides matching items with animation.
Gallery Showcase
Featured image with a clickable thumbnail strip — click any thumbnail to swap the main large view. Perfect for portfolio details, product image galleries, and case study illustrations.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Image Accordion from the Gutenberg inserter.