Gutenberg Accordion Block Tutorial


If you’re working on making your WordPress site a bit easier to navigate, consider using Gutenberg Accordion Block. It’s part of Gutenberg blocks collection in the WordPress editor, designed to help you neatly hide away content until it’s needed. This feature is super handy for FAQs or any section where you want to keep things streamlined. First off, you’ll need to install Premium Blocks. This guide is here to walk you through the essentials, getting you set up without a fuss.


To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

  • Premium Blocks for Gutenberg – The Free WordPress Plugin.
  • Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Accordion Block?

Once you’ve enabled Premium Blocks, the beginning is effortless just add Premium Accordion Block to your Gutenberg editor. From there, you can easily use it and customize it to fit your layout.

Gutenberg Accordion Block General Settings
  • General Section:
  • Collapse Others: Enable or disable the automatic collapsing of other accordion items when one is expanded.
  • Expand First Item: Enable to determine whether the first item in the accordion should be expanded by default when the page loads.
  • Title Section:
  • Title Tag: Selection of HTML tag options for the accordion title (H1, H2, H3, H4, H5, H6), allowing you to set the appropriate heading level for SEO and accessibility purposes.
  • Direction: Set the accordion’s opening direction, suggesting a horizontal or vertical layout or the direction in which the accordion unfolds.
  • Content Section:
  • Type: Choose between ‘TEXT’ and ‘BLOCK’ indicating whether the content should be treated as plain text or if it can include other blocks (like images, buttons, etc.).
  • Align Content: Options to align content within the block; likely choices include left, center, and right alignment.
  • Arrow Section:
  • Position: Toggle between ‘IN’ and ‘OUT’, which could determine the placement of an arrow icon within the block – possibly indicating if the arrow should be inside (nested within the content) or outside (next to the content but not nested within).
Gutenberg Accordion Block - General Settings
Gutenberg Accordion Block – General Settings

Gutenberg Pricing Table Block Style Settings
  • Title and Content Style:
  • Typography: Settings for font size and style.
  • Text Color: A color picker to select the text color.
  • Background Color: A color picker for the accordion background, also with transparency options.
  • Text Shadow: Tools to add and customize a shadow effect to the text, likely with settings for color, blur, and position.
  • Border: Options for the accordion border style, such as solid, dotted, or dashed.
  • Border Radius: Settings for rounding the corners of the accordion, with individual adjustments for the top, right, bottom, and left edges.
  • Rows Gap: A slider to adjust the spacing between accordion rows, with units in pixels, ems, or percent. ( This option is for the Title only )
  • Padding: Controls to set the space inside each accordion item, around the content, also adjustable for each side.
Gutenberg Accordion Block - Title Style
Gutenberg Accordion Block – Title Style
  • Arrow Style:
  • Size: A slider (currently set to 15) to adjust the size of the arrow.
  • Arrow Color: A color picker to select the color of the arrow.
  • Background Color: A color picker for the arrow’s background, also with a transparency feature.
  • Padding: A slider to control the padding around the arrow, providing space between the arrow and its container or neighboring content.
Gutenberg Accordion Block - Arrow Style
Gutenberg Accordion Block – Arrow Style


Adding something like Gutenberg Accordion Block to your WordPress site can make a noticeable difference in how visitors interact with your content. It’s all about making information easy to handle and nice to look at, which is where the Gutenberg page builder shines. Following this guide, you’ll be able to organize your site’s content more effectively, making your site not just more appealing, but also more intuitive to navigate. It’s a straightforward upgrade that can make your website feel more thoughtfully put together.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

About Leap13

Leap13 is a WordPress-focused web development firm specializing in building premium WordPress themes and plugins.

Copyright © 2024 | Built With ❤️ Using Kemet WordPress Theme and Premium Blocks