WP Block: Slideshow

A Gutenberg block creating a slideshow / carousel.

ES-module for a Gutenberg block allowing you to put various child blocks in a slideshow / carousel block using GlideJS.

The modular makeup a pre-parsing allows to plug in various other slideshow libraries. Historically there has been a module for using tiny-slider, which has been removed because of its jQuery dependency.

It's a PHP-rendered "dynamic block", so you'll also need to register the block, and provide a template. To make this easier, you can use the matching Composer package gebruederheitz/wp-block-slideshow, which will do most of the heavy lifting for you.

Installation

> npm i @gebruederheitz/wp-block-slideshow

Usage

In the editor

import Slideshow from '@gebruederheitz/wp-block-slideshow';

Slideshow.register();

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

import {register, attributes} from '@gebruederheitz/wp-block-slideshow';
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 />,
});

Custom Presets

Use the PresetManager singleton to override existing presets or add new ones:

import { presetManager } from '@gebruederheitz/wp-block-slideshow';

// Create a new preset with the id "mypreset" that will effectively
// deviate from the defaults by the name and autoplay setting: 
presetManager.addPreset('mypreset', {
    prettyName: 'My Preset',
    autoplay: true,    
});

// Completely override the existing default preset:
presetManager.addPreset('defaults', {...});

// Merge your values into the existing default preset (i.e. override certain values):
presetManager.putPreset('defaults', {...});

// The same, but with an object of presets:
presetManager.putPresets({
    defaults: {...},
    mypreset: {...},
})

On the frontend

import { GlideSlideshowFactory } from '@gebruederheitz/wp-block-slideshow';

// Init all elements '.ghwp-slideshow' as slideshows
new GlideSlideshowFactory();

// Optionally pass an instance of ResizeListener to re-init slideshows after 
// resize events
const resizeListener = new ResizeListener();
new GlideSlideshowFactory({
    resizeListener,
});

// Optionally pass a custom selector
new GlideSlideshowFactory({
    selector: '.my-custom-slideshow-selector',
});

// Optionally enable debug output
new GlideSlideshowFactory({
    debugEnabled: true,
})

Usage with "static" elements (non-gutenberg)

You may use data-attributes to configure any element as a compatible slideshow. A mapping of data-attributes to option names can be found in /frontend/ghwp-slideshows.js. How these options are passed to parameters for the Glide.js call is visible in /frontend/glide/get-options.js.

Styling

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

// Your frontend SASS file

// Import the Glide.js default styles as a basis
@use 'node_modules/@glidejs/glide/src/assets/sass/glide.core';

// Override the default variable values if you need to
// Import the stylesheet
@use 'node_modules/@gebruederheitz/wp-block-slideshow/scss/slideshow' with (
    /* General Slideshow style variables */
    $slider-margin: 90px 0,
    $slider-medium-breakpoint: 768px,
    
    /* Arrows style variables */
    $slider-arrows-z-index: 1,
    $slider-arrows-padding: 1rem 2rem,
    $slider-arrows-opacity: 1,
    
    $slider-arrows-caret-width: 12px,
    $slider-arrows-caret-height: 20px,
    
    $slider-arrows-caret-left: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234a4d4a' viewBox='0 0 12 20'%3E%3Cpath d='M12 17.5L9.554 20 0 10 9.554 0 12 2.5 4.8 10z'/%3E%3C/svg%3E"),
    $slider-arrows-caret-right: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%234a4d4a' viewBox='0 0 12 20'%3E%3Cpath d='M0 2.5L2.446 0 12 10 2.446 20 0 17.5 7.2 10z'/%3E%3C/svg%3E"),
    
    $slider-arrows-before: false,
    $slider-arrows-use-inline-svg: true,
    
    $slider-arrows-before-bg: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 10%, rgba(0, 0, 0, 0.1) 50%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 0) 100% ),
);

// Your editor SASS file

// Import the stylesheet
@use 'node_modules/@gebruederheitz/wp-block-slideshow/scss/slideshow.editor';

Or use the precompiled CSS files:

<link 
  rel="stylesheet"
  href="/path/to/node_modules/@gebruederheitz/wp-block-slideshow/dist/slideshow.css"
/>
<link 
  rel="stylesheet"
  href="/path/to/node_modules/@gebruederheitz/wp-block-slideshow/dist/slideshow.editor.css"
/>

Development

(tbd)