WP Block: Video Overlay
A skeleton for a quick gutenberg block module setup.
Installation
> npm i @gebruederheitz/wp-block-skeleton
Usage
Skeleton
The simplest way to use the skeleton is with degit
, which will clone this
repository's contents while uncoupling it from git (so you can initialize a new
one without fuss):
> npx degit @gebruederheitz/wp-block-skeleton ./wp-block-example
> cd wp-block-example
> git init
Don't forget to:
- delete this section and complete the Readme
- change the package name in
package.json
- remove the hash from the script name at
pkg.scripts.#prepublishOnly
- change the repository URLs in
package.json
(repository.url
,bugs
,homepage
) - check the licence
- check whether you need all the dependencies
In the editor
import Block from '@gebruederheitz/wp-block-skeleton';
Block.register();
You may provide custom attributes, methods / components etc.:
import {register, attributes} from '@gebruederheitz/wp-block-skeleton';
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
import { BlockFactory } from '@gebruederheitz/wp-block-skeleton';
new BlockFactory();
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-xxx
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-xxx
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.
}
Styling
You may use and extend the default styles provided by this package in your (S)CSS:
// Your frontend SASS file
// Import the stylesheet
@use 'node_modules/@gebruederheitz/wp-block-skeleton/scss/skeleton' with (
$variable: 'value',
);
// Your editor SASS file
// Import the stylesheet
@use 'node_modules/@gebruederheitz/wp-block-skeleton/scss/skeleton.editor';
Or use the precompiled CSS files:
<link
rel="stylesheet"
href="/path/to/node_modules/@gebruederheitz/wp-block-skeleton/dist/skeleton.css"
/>
<link
rel="stylesheet"
href="/path/to/node_modules/@gebruederheitz/wp-block-skeleton/dist/skeleton.editor.css"
/>