WP Block: Collapsible
A collapsible / accordion block for gutenberg
Installation
All the JS bits via NPM
> npm i @gebruederheitz/wp-block-collapsible
All the PHP bits via Composer
> composer require gebruederheitz/wp-block-collapsible
Usage
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 (
<p>{newAttr}</p>
);
};
register({
attributes: customAttributes,
edit,
icon: <MyIconComponent />,
});
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
In all cases will need to register the block on the backend.
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 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
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
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:
<link
rel="stylesheet"
href="/path/to/node_modules/@gebruederheitz/wp-block-collapsible/dist/collapsible.css"
/>
<!-- or a theme -->
<link
rel="stylesheet"
href="/path/to/node_modules/@gebruederheitz/wp-block-collapsible/dist/theme-grey-boxes.css"
/>
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
Dependencies
- PHP >= 7.3
- Composer 2.x
- NVM and nodeJS LTS (v16.x) with npm
- Nice to have: GNU Make (or drop-in alternative)
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.