Accordion Block

  1. Overview
  2. Features
  3. Options
  4. General
  5. Layout
  6. Styling
  7. How to
  8. Technical Details

Overview

The Accordion Block offers users the ability to create an element with collapsible sections on their pages.

Githubhttps://github.com/bigbite/block-accordion
Notionhttps://www.notion.so/bigbite/Accordion-Block-9321d34cb05b411a8016024591f220d9
Product OwnerChris Ferguson
Min. Version5.8> (Not tested in prior versions)

Features

  • The Accordion Items will accept any block within them
  • Keyboard navigation
  • Markup valid to WCAG 2.1 standard

Options

General

  • “Heading Settings”: Sets the HTML element to be used for the Tab Title, to allow editors to achieve semantic markup.
  • “Hide Toggle Icons”: Show/hide the toggle icon

Accordion Item specific options:

  • “Expanded on page load”: Accordion Item should already be expanded when page is loaded (default is for them to be closed).

Layout

  • “Move toggles to left”: Displays the Toggle Icon on Left of the text in the Tab Title

Styling

  • “Choose Toggle Icon”: Allows the Toggle Icon to be set to one of a number of default options.
  • There are also a number of other styling options available including:
    • Set Icon colour
    • Set colours of text and background in:
      • Tab Title (Summary)
      • Tab Panel (Details)
    • Set border colour and width of Tab Title (Summary)

How to

The block is installed via a Plugin which you can include using Composer. To do so, ensure the following is included in your composer.json file:

{
  "repositories": [
    {
      "type": "vcs",
      "url": "git@github.com:bigbite/block-accordion.git"
    }
  ],
  "require": {
    "bigbite/block-accordion": {{RELEASE_NO}}
  },
  "extra": {
    "installer-paths": {
      "plugins/{$name}/": [
        "type:wordpress-plugin"
      ]
    }
  }
}

To report a Bug:

  1. Visit https://github.com/bigbite/block-accordion/issues
  2. Create a new Issue
  3. Add a screenshot/video of the issue you are experiencing
  4. Add a description of the issue you are experiencing
  5. Add the label bug

To suggest a feature, either:

  1. Contact the Product Owner

OR

  1. Visit https://github.com/bigbite/block-accordion/issues
  2. Create a new Issue
  3. Write your suggestion in as much as detail as possible – preferably detailing the problem you are trying to solve.
  4. Add the label enhancement

Technical Details

There are currently no hooks or filters provided by this block.