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-video-overlay

v2.2.0

Published

A Gutenberg block creating a video in a lightbox

Downloads

11

Readme

WP Block: Video Overlay

A Gutenberg block creating a video in a lightbox

ES-module for a Gutenberg block allowing you to include videos in lightboxes with the matching frontend initializer using Glide.js.

It's a PHP-rendered "dynamic block", so you'll also need to register the block, provide a template and supply some basic data to the block via script translations (see below). To make this easier, you can use the matching Composer package gebruederheitz/wp-block-video-overlay, which will do most of the heavy lifting for you.

In order to achieve maximum GDPR compliance, the plyr CDN script used by Glide needs to be replaced with your own local instance of the script. You will also need to bundle this module in your own editor script.

Installation

> npm i @gebruederheitz/wp-block-video-overlay

Usage

In the editor

import VideoOverlay from '@gebruederheitz/wp-block-video-overlay';

VideoOverlay.register();

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

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

If you're only adding an attribute, you can simply add controls to the existing Edit component:

import { components } from 'wp';
import {register, attributes, edit as Edit} from '@gebruederheitz/wp-block-video-overlay';
import {MyIconComponent} from 'your/icon/components/path';

const { SelectControl } = components;

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

const edit = (props) => {
    const { attributes: { newAttr }, setAttributes } = props;
    return (
        <Edit {...props}>
            <SelectControl 
                options={myAttributeSelectOptions} 
                value={newAttr}
                label={'My new attribute'}
                onChange={(newAttr) => {
                    setAttributes({ newAttr });
                }}
            />
        </Edit>
    );
};

register({
    attributes: customAttributes,
    edit,
    icon: <MyIconComponent />,
});

On the frontend

import {LightboxFactory} from './lightbox';

const lbf = new LightboxFactory();
// Create lightboxes for all links to image files
lbf.images();
// Initialize only the video overlay blocks provided in this module
lbf.videos();
// Do both of the above
lbf.all();
// Supply an additional selector
lbf.all('#my-lightbox');
lbf.all('[href$=".webp"]');
// Use a custom selector
lbf.create('.lightbox');
// Init from an element – this method respects the "cc_lang_pref" query parameter
// in the link's URL in order to enable caption loading on the video.
const myTrigger = document.querySelector('a[href^="https://youtu"]');
lbf.createFromElement(myTrigger);
// Use a custom configuration object for GLightbox
lbf.custom({
  /* GLightbox configuration object */
});

Avoiding the plyr script from CDN

In order to be on the safe side in terms of data protection you can avoid using the instance of plyr that GLightbox loads from a CDN by default.

Install plyr
> npm i plyr
Provide URLs

Provide the URLs to the plyr script, stylesheet and icon to the LightboxFactory:

const plyrOptions = {
    js: 'http://my.site/node_modules/plyr.js',  
    css: 'http://my.site/node_modules/plyr.css',
    config: {
        iconUrl: 'http://my.site/node_modules/plyr.css',     
    },          
};
const lbf = new LightboxFactory(plyrOptions);I
lbf.all();

You can also skip the customization by passing false to the constructor:

const lbf = new LightboxFactory(false);I

This way, the default assets will be loaded from a CDN.

Rendering the block's output

You will need to register the block on the backend and provide a template to render the output. The composer library gebruederheitz/wp-block-video-overlay will take care of that for you.

Data supplied by the backend

The block expects some data to be present on the global window object, which need to be supplied by the WP backend. Again, the composer library gebruederheitz/wp-block-video-overlay does that out of the box.

window.editorData = {
    restCustomUrl: 'string', // REST API URL for the image Sideloader
    restApiNonce: 'string',  // The API nonce for request validation (CSRF/XSS)
    embedTypes: [], // An array of possible embed types when used with a consent management solution. Pass `null` to skip.
    ccLangPrefs: [], // An array of language codes for the consent management solution. Pass an empty array to skip.
}

Styling

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

// Your frontend SASS file

// Override the default variable values if you need to
$ghwp-vo-icon-class: icon-play-circle;
$ghwp-vo-icon-fg: #fff;
$ghwp-vo-icon-fill: currentColor;
$ghwp-vo-icon-size: 128px;
$ghwp-vo-icon-z-index: 10;
$ghwp-vo-vertical-margin: 1rem;

// Import the stylesheet
@use 'node_modules/@gebruederheitz/wp-block-video-overlay/scss/video-overlay';
// Your editor SASS file

// Override the default variable values if you need to
$ghwp-vo-bg-color: #ccc;
$ghwp-vo-max-width: 50%;
$ghwp-vo-help-font-size: 0.666em;

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

Or use the precompiled CSS files:

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