Business · Gutenberg
FAQ Accordion block for WordPress
FAQ section with smooth accordion expand/collapse, rich typography, and schema.org markup support.
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
FAQ section with smooth accordion expand/collapse, rich typography, and schema.org markup support.
Inspector panels on this block: Section Header, Style & Behavior, FAQ Items. Those titles come from index.js, not from a shared template.
Behavior controls: “Heading Alignment” options: Left, Center; “Accordion Style” options: Minimal (lines), Bordered, Card, Boxed, Dark; “Icon Style” options: Plus / Minus, Chevron (arrow), Arrow.
Where to find it
Gutenberg inserter → Business → search “FAQ Accordion” (block name `blockenberg/faq-accordion` in block.json). Style it in the sidebar after insert.
How to use FAQ Accordion block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “FAQ Accordion”, insert it. Category: Business.
- Configure inspector controls that exist on this block. Open Section Header. Set “Show Heading”, “Heading”, “Show Subheading”, “Subheading”.
- Check the published page. The view script reads HTML data attributes: data-allow-multiple, data-faq-item. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show Heading | On/off toggle in the inspector. On by default. Saved as `showHeading`. |
| Heading | Text field in the inspector. block.json default: Frequently Asked Questions. Saved as `heading`. |
| Show Subheading | On/off toggle in the inspector. On by default. Saved as `showSubheading`. |
| Subheading | Text field in the inspector. block.json default: Everything you need to know about the product and billing.. Saved as `subheading`. |
| Heading Alignment | Select control; the chosen value is saved on the block. Options: Left; Center. block.json default: center. Saved as `headingAlign`. |
| Accordion Style | Select control; the chosen value is saved on the block. Options: Minimal (lines); Bordered; Card; Boxed; Dark. block.json default: minimal. Saved as `style`. |
| Icon Style | Select control; the chosen value is saved on the block. Options: Plus / Minus; Chevron (arrow); Arrow. block.json default: plus. Saved as `iconStyle`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Show Numbers | On/off toggle in the inspector. Off by default. Saved as `showNumbers`. |
| Allow Multiple Open | On/off toggle in the inspector. Off by default. Saved as `allowMultiple`. |
| Add Schema.org Markup | On/off toggle in the inspector. On by default. Saved as `addSchema`. |
| Max Content Width (px) | Numeric range control in the inspector. Range 400–1100. block.json default: 760. Saved as `maxWidth`. |
| Card Radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `cardRadius`. |
| Item Gap (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `itemGap`. |
| Padding Top (px) | Numeric range control in the inspector. Range 0–180. block.json default: 64. Saved as `paddingTop`. |
| Padding Bottom (px) | Numeric range control in the inspector. Range 0–180. block.json default: 64. Saved as `paddingBottom`. |
| Heading (Typo Heading) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoHeading`. |
| Subheading (Typo Subheading) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSubheading`. |
| Question | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoQuestion`. |
| Answer | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoAnswer`. |
| Icon Size (px) | Numeric range control in the inspector. Range 12–32. block.json default: 20. Saved as `iconSize`. |
| Section-to-FAQ Gap (px) | Numeric range control in the inspector. Range 16–96. block.json default: 48. Saved as `sectionGap`. |
| Question | Text field in the inspector. |
| Answer | Multiline text field in the inspector. |
| Open by default | On/off toggle in the inspector. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Accent Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Heading | Color control in the inspector. block.json default: #0f172a. Saved as `headingColor`. |
| Subheading | Color control in the inspector. block.json default: #64748b. Saved as `subColor`. |
| Question Text | Color control in the inspector. block.json default: #0f172a. Saved as `questionColor`. |
| Answer Text | Color control in the inspector. block.json default: #475569. Saved as `answerColor`. |
| Colors — Icon | Color control in the inspector. block.json default: #6c3fb5. Saved as `iconColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-allow-multiple, data-faq-item.
- Headers keep aria-expanded in sync so screen readers hear open vs closed.
- A multiple-open flag on the wrapper decides whether several panels can stay open.
When this is the right block
- FAQ section with smooth accordion expand/collapse, rich typography, and schema.org markup support — that is the job of FAQ Accordion, not a generic content block.
- Use it when you need the editor control labeled “Show Heading”, which exists on this block’s inspector.
- It matches pages about faq, accordion, collapse.
- Inserter grouping: company, service, and operations pages.
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 FAQ Accordion block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “FAQ Accordion”. It sits under Business. After insert, open Section Header and set “Show Heading”, “Heading”, “Show Subheading”, “Subheading”.
What makes FAQ Accordion different from other Blockenberg blocks?
FAQ section with smooth accordion expand/collapse, rich typography, and schema.org markup support. Inspector labels on this block include “Show Heading”, “Heading”, “Show Subheading”, “Subheading”.
Is the FAQ Accordion Gutenberg block free?
Yes. FAQ Accordion ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style FAQ 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: Section Header, Style & Behavior, FAQ Items).
Related business blocks
FAQ Categories
Categorized FAQ with a sidebar (or top tab bar) category navigator and an accordion for each category. Ideal for comprehensive help centers and support pages.
FAQ Grid
Display frequently asked questions as a scannable card grid — ideal for pricing pages and knowledge bases.
FAQ Schema
FAQ block with automatic FAQPage JSON-LD structured data for SEO rich snippets.
FAQ Section
Complete FAQ landing-page section with styled section header, inline accordion items, multiple layout variants, and a bottom contact CTA. Different from FAQ Schema (SEO) and FAQ Categories (search UI).
FAQ Chat
Chat-bubble style FAQ. Visitors click questions to reveal bot-style answers with a typing indicator — a conversational alternative to accordion FAQ.
Event Card
Event display card with date, time, venue, description, speakers, call-to-action button, and Event JSON-LD structured data.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert FAQ Accordion from the Gutenberg inserter.