PHPackages                             gebruederheitz/wp-block-collapsible - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. gebruederheitz/wp-block-collapsible

ActiveLibrary[Templating & Views](/categories/templating)

gebruederheitz/wp-block-collapsible
===================================

A collapsible / accordion block for gutenberg

1.0.1(3y ago)0828↓50%GPL-3.0-onlySCSSPHP >=7.3

Since Jul 13Pushed 3y ago1 watchersCompare

[ Source](https://github.com/gebruederheitz/wp-block-collapsible)[ Packagist](https://packagist.org/packages/gebruederheitz/wp-block-collapsible)[ RSS](/packages/gebruederheitz-wp-block-collapsible/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (3)Dependencies (4)Versions (4)Used By (0)

WP Block: Collapsible
=====================

[](#wp-block-collapsible)

*A collapsible / accordion block for gutenberg*

---

Installation
------------

[](#installation)

### All the JS bits via NPM

[](#all-the-js-bits-via-npm)

```
> npm i @gebruederheitz/wp-block-collapsible
```

### All the PHP bits via Composer

[](#all-the-php-bits-via-composer)

```
> composer require gebruederheitz/wp-block-collapsible
```

Usage
-----

[](#usage)

### In the editor

[](#in-the-editor)

```
import Block from '@gebruederheitz/wp-block-collapsible';

Block.register();
```

You may provide custom attributes, methods / components etc.:

```
import {register, attributes} from '@gebruederheitz/wp-block-collapsible';
import {MyIconComponent} from 'your/icon/components/path';

const customAttributes = {
    newAttr: {
        type: 'string',
        default: 'default value',
    },
    ...attributes,
};

const edit = ({attributes: {newAttr}}) => {
    return (
        {newAttr}
    );
};

register({
    attributes: customAttributes,
    edit,
    icon: ,
});
```

### On the frontend

[](#on-the-frontend)

You will need to add the initializer scripts to your frontend script bundle in order for the block to work:

```
import { Collapsible } from '@gebruederheitz/wp-block-collapsible';

// Find all collapsible blocks and initialize them
Collapsible.factory();
```

### Rendering the block's output

[](#rendering-the-blocks-output)

In all cases will need to register the block on the backend.

#### Dynamically through PHP

[](#dynamically-through-php)

If you're using the "dynamic" save method (the default), you will also have to provide a template to render the output. The composer parts of this library (`gebruederheitz/wp-block-collapsible`) will take care of that for you:

```
new \Gebruederheitz\GutenbergBlocks\Collapsible\Collapsible();
```

You can override the default template by putting an alternative template file into `wp-content/themes/your-theme/template-parts/blocks/collapsible.php`. Take a look at [the original template](./template/collapsible.php) for some inspiration. Note that you might have to change the frontend scripts if you change the block's markup.

#### "Statically" through Gutenberg's React

[](#statically-through-gutenbergs-react)

This library provides an alternative save method that removes the need for dynamic processing of the block's content for each request by statically rendering the markup at "publish time".

```
import {register, saveStatic} from '@gebruederheitz/wp-block-collapsible';

register({
    save: saveStatic,
});
```

Naturally you can also provide your own static renderer component in place of the pre-packaged one.

### Styling

[](#styling)

You may use and extend the default styles and themes provided by this package in your (S)CSS:

```
// Your frontend SASS file

// Import the stylesheet
@use 'node_modules/@gebruederheitz/wp-block-collapsible/scss/collapsible';
// or one of the preconfigured themes
@use 'node_modules/@gebruederheitz/wp-block-collapsible/scss/theme-colorful';
@use 'node_modules/@gebruederheitz/wp-block-collapsible/scss/theme-grey-boxes';
```

```
// Your editor SASS file

// Import the stylesheet
@use 'node_modules/@gebruederheitz/wp-block-collapsible/scss/collapsible';
```

Or use the precompiled CSS files:

```

```

#### Creating a custom theme

[](#creating-a-custom-theme)

The SCSS stylesheets rely heavily on default SCSS variables to simplify theming. One basic approach would be to modify the parameters for one of the existing themes:

```
$my-theme-text-color: #101510;
$title-color: $my-theme-text-color;
$title-color: #333 !default;

@use 'node_modules/@gebruederheitz/wp-block-collapsible/scss/theme-grey-boxes' with (
    $title-color: $title-color,
    $title-font: null,
    $title-font-size: 1em,
    $title-text-transform: none,
    $subtitle-color: lighten($title-color, 0.3),
    $subtitle-font-size: 0.9em,
    $subtitle-font-weight: 400,
    $border-color: #eee,
    $indicator-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23c0c0c0' viewBox='0 0 27 15'%3E%3Cpath d='M14.313 14.361l12-12c.5-.5.5-1.2 0-1.7s-1.2-.5-1.7 0l-11.1 11.2-11.2-11.2c-.5-.5-1.2-.5-1.7 0-.2.2-.3.5-.3.8 0 .3.1.7.3.9l12 12a1.2 1.2 0 001.7 0z'/%3E%3C/svg%3E"),
    $toggle-hover-background: #eee,
);

@use 'node_modules/@gebruederheitz/wp-block-collapsible/scss/collapsible' with (
    $base-font-size: 1rem,

    $title-color: #4a4d4a,
    $title-hover-color: #0080c8,
    $title-active-color: #73b128,
    $title-font: null,
    $title-active-font: null,
    $title-font-size: 1.125em,
    $title-text-transform: uppercase,

    $subtitle-color: $title-color,
    $subtitle-font-size: null,
    $subtitle-font-weight: null,

    $show-line: true,
    $line-color: #e7e7e7,
    $line-thickness: 2px,
    $line-space: 1em,

    $indicator-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a0a0a0' viewBox='0 0 27 15'%3E%3Cpath d='M14.313 14.361l12-12c.5-.5.5-1.2 0-1.7s-1.2-.5-1.7 0l-11.1 11.2-11.2-11.2c-.5-.5-1.2-.5-1.7 0-.2.2-.3.5-.3.8 0 .3.1.7.3.9l12 12a1.2 1.2 0 001.7 0z'/%3E%3C/svg%3E"),
    $indicator-hover-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230080c8' viewBox='0 0 27 15'%3E%3Cpath d='M14.313 14.361l12-12c.5-.5.5-1.2 0-1.7s-1.2-.5-1.7 0l-11.1 11.2-11.2-11.2c-.5-.5-1.2-.5-1.7 0-.2.2-.3.5-.3.8 0 .3.1.7.3.9l12 12a1.2 1.2 0 001.7 0z'/%3E%3C/svg%3E"),
    $indicator-active-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2373b128' viewBox='0 0 27 15'%3E%3Cpath d='M14.313 14.361l12-12c.5-.5.5-1.2 0-1.7s-1.2-.5-1.7 0l-11.1 11.2-11.2-11.2c-.5-.5-1.2-.5-1.7 0-.2.2-.3.5-.3.8 0 .3.1.7.3.9l12 12a1.2 1.2 0 001.7 0z'/%3E%3C/svg%3E"),
    $indicator-width: 1.5em,
    $indicator-height: 0.8125em,
    $indicator-transform: none,
    $indicator-open-transform: rotate(180deg),

    $toggle-show-border: false,
    $toggle-border-color: $title-color,
    $toggle-border-width: 1px,
    $toggle-background: transparent,
    $toggle-hover-background: $toggle-background,
    $toggle-active-background: $toggle-background,

    $margin: 1em 0,
    $toggle-button-padding: 0.625em 0,

    $panel-border-color: $title-active-color,
    $panel-border-width: 2px,
    $panel-border-show-top: false,
    $panel-border-show-right: false,
    $panel-border-show-bottom: false,
    $panel-border-show-left: true,
    $panel-padding: 0 0 0 2em,
    $panel-open-margin: 2em 0 4em 0,
    $panel-max-height: 1080px,
);
```

Development
-----------

[](#development)

### Dependencies

[](#dependencies)

- PHP >= 7.3
- [Composer 2.x](https://getcomposer.org)
- [NVM](https://github.com/nvm-sh/nvm) and nodeJS LTS (v16.x) with npm
- Nice to have: GNU Make (or drop-in alternative)

### Quickstart

[](#quickstart)

You can use the watch task:

```
$> npm run watch
# or
make
# or, more explicitly
make dev
```

After making your changes to scripts or styles, run

```
$> make
# or
$> make build
# or, more explicitly
$> nvm use            # Once, to make sure you're using the correct node version
$> npm run build
```

to create the stylesheets and ES-module bundles at `dist/`.

Run `make release` to publish a new version. `release-it` will guide you through the process.

`make test` or `make lint` will lint all the source scripts and stylesheets.

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity17

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity44

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

3

Last Release

1396d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d2a201d58341e3ed71321bcb66cb375a8c6efffce7d8fe33244e821afc087c78?d=identicon)[mediocrity](/maintainers/mediocrity)

---

Top Contributors

[![AndreasMaros](https://avatars.githubusercontent.com/u/25008845?v=4)](https://github.com/AndreasMaros "AndreasMaros (7 commits)")

###  Code Quality

Static AnalysisPHPStan

Code StylePHP\_CodeSniffer

Type Coverage Yes

### Embed Badge

![Health badge](/badges/gebruederheitz-wp-block-collapsible/health.svg)

```
[![Health](https://phpackages.com/badges/gebruederheitz-wp-block-collapsible/health.svg)](https://phpackages.com/packages/gebruederheitz-wp-block-collapsible)
```

###  Alternatives

[mustache/mustache

A Mustache implementation in PHP.

3.3k44.6M291](/packages/mustache-mustache)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova.

8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle

Easy integration of twitters bootstrap into symfony2

7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle

Client and Server-side react rendering in a Symfony Bundle

3871.2M](/packages/limenius-react-bundle)[nicmart/string-template

StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions.

2101.7M30](/packages/nicmart-string-template)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)