npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gebruederheitz/wp-block-collapsible

v1.0.1

Published

A collapsible / accordion block for gutenberg

Downloads

16

Readme

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.