Content · Gutenberg
Icon Accordion block for WordPress
Visually rich accordion with per-item icons, badges and custom colours — great for FAQs, feature lists and onboarding flows.
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
Visually rich accordion with per-item icons, badges and custom colours — great for FAQs, feature lists and onboarding flows.
Inspector panels on this block: Accordion Settings. Those titles come from index.js, not from a shared template.
Behavior controls: “Accordion Settings — Style” options: Card (bordered), Filled (accent on open), Minimal (underline), Default (flat); “Icon Shape” options: Rounded Square, Circle, Square; “Expand Icon” options: Chevron ▾, Plus / Minus + −, Arrow ↓, Caret ▶.
Where to find it
Gutenberg inserter → Content → search “Icon Accordion” (block name `blockenberg/icon-accordion` in block.json). Style it in the sidebar after insert.
How to use Icon Accordion block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Icon Accordion”, insert it. Category: Content.
- Configure inspector controls that exist on this block. Open Accordion Settings. Set “Accordion Settings — Style”, “Icon Shape”, “Icon Size (px)”, “Expand Icon”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Accordion Settings — Style | Select control; the chosen value is saved on the block. Options: Card (bordered); Filled (accent on open); Minimal (underline); Default (flat). block.json default: card. Saved as `accordionStyle`. |
| Icon Shape | Select control; the chosen value is saved on the block. Options: Rounded Square; Circle; Square. block.json default: rounded. Saved as `iconStyle`. |
| Icon Size (px) | Numeric range control in the inspector. Range 28–72. block.json default: 44. Saved as `iconSize`. |
| Expand Icon | Select control; the chosen value is saved on the block. Options: Chevron ▾; Plus / Minus + −; Arrow ↓; Caret ▶. block.json default: chevron. Saved as `expandIcon`. |
| Allow Multiple Open | On/off toggle in the inspector. Off by default. Saved as `allowMultiple`. |
| Gap Between Items (px) | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `gap`. |
| Border Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 0. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 0. Saved as `paddingBottom`. |
| Section Background | Color control in the inspector. Saved as `bgColor`. |
| Panel Background | Color control in the inspector. block.json default: #ffffff. Saved as `panelBg`. |
| Panel Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `panelBorder`. |
| Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Colors — Content | Color control in the inspector. block.json default: #6b7280. Saved as `contentColor`. |
| Badge Background | Color control in the inspector. block.json default: #f3f4f6. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #374151. Saved as `badgeColor`. |
| Accent / Filled BG | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Expand Icon | Color control in the inspector. block.json default: #9ca3af. Saved as `expandColor`. |
| Badge | Text field in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
- A multiple-open flag on the wrapper decides whether several panels can stay open.
When this is the right block
- Visually rich accordion with per-item icons, badges and custom colours — great for FAQs, feature lists and onboarding flows — that is the job of Icon Accordion, not a generic content block.
- Use it when you need the editor control labeled “Accordion Settings — Style”, which exists on this block’s inspector.
- It matches pages about accordion, icon, faq.
- Inserter grouping: articles, cards, lists, and long-form layouts.
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 Icon Accordion block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Icon Accordion”. It sits under Content. After insert, open Accordion Settings and set “Accordion Settings — Style”, “Icon Shape”, “Icon Size (px)”, “Expand Icon”.
What makes Icon Accordion different from other Blockenberg blocks?
Visually rich accordion with per-item icons, badges and custom colours — great for FAQs, feature lists and onboarding flows. Inspector labels on this block include “Accordion Settings — Style”, “Icon Shape”, “Icon Size (px)”, “Expand Icon”.
Is the Icon Accordion Gutenberg block free?
Yes. Icon Accordion ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Icon 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: Accordion Settings).
Related content blocks
Accordion
Collapsible accordion panels for FAQ, features, and more.
Toggle / Read More
A single expandable panel for 'Read More', spoilers, or collapsible content sections.
Styled List
Fully customizable list with icons, rich text, and flexible layout options.
Accordion Table
A data table where each row expands on click to reveal rich detail content — specs, bullet points, sub-data, or notes. Perfect for pricing tiers, product specs, API docs, and comparison matrices.
Content Switcher
Two-panel toggle block — a pill/tab switch with a label for each state, each panel containing its own headline, body text, bullet list, image, and CTA. Great for Individual/Team, Starter/Pro, Before/After content.
Filterable Cards
A grid of content cards filterable by category, with optional images, labels, descriptions and links.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Icon Accordion from the Gutenberg inserter.