https://github.com/eighteen73/pulsar-blocks
A collection of blocks we use at eighteen73.
https://github.com/eighteen73/pulsar-blocks
gutenberg gutenberg-blocks splidejs wordpress
Last synced: about 1 month ago
JSON representation
A collection of blocks we use at eighteen73.
- Host: GitHub
- URL: https://github.com/eighteen73/pulsar-blocks
- Owner: eighteen73
- License: mit
- Created: 2022-08-01T13:29:20.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2026-02-11T11:14:23.000Z (4 months ago)
- Last Synced: 2026-02-11T19:13:34.719Z (4 months ago)
- Topics: gutenberg, gutenberg-blocks, splidejs, wordpress
- Language: JavaScript
- Homepage:
- Size: 5.69 MB
- Stars: 0
- Watchers: 5
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Pulsar Blocks
A collection of blocks we use at eighteen73.
## Block list
### [Accordion](/src/accordion/)
An accessible accordion, supporting multiple open items, initially open first item and FAQs schema support.
### Attributes
- openMultiple
- startOpen
- level
- hasSchema
### [Carousel](/src/carousel/)
A [Splide](https://splidejs.com) powered carousel with innerBlocks support.
By default this uses a `pulsar/carousel-slide` innerBlock. However the block can be extended to be the foundation of any type of carousel block via the use of variations and custom child blocks.
### Attributes
- carouselOptions
- advancedCarouselOptions
- mergeOptions
- ariaLabel
- hasTrack
- template
- templateLock
- allowedBlocks
### Extending the carousel block
The carousel should be powerful and flexible enough to be extended via variations.
Here is a short example of the steps required:
#### 1. Register a variation
Let's assume we want to create a carousel that displays the latest posts. The important parts here are that we set `hasTrack` to `false` (so that we can wrap the posts in the child block), the `template` and `templateLock`.
```
import domReady from '@wordpress/dom-ready';
import { registerBlockVariation } from '@wordpress/blocks';
domReady(() => {
registerBlockVariation('pulsar/carousel', {
name: 'carousel-posts',
title: 'Posts Carousel',
attributes: {
templateLock: 'all',
hasTrack: false,
template: [['pulsar/posts', {}]],
},
isActive: ['template'],
});
});
```
#### 2. Create a child block to be used as the template
```
// Barebones example of the pulsar/posts child block edit function.
// Markup must include `splide__track` and `splide__list`.
import { useBlockProps } from '@wordpress/block-editor';
/**
* The edit function describes the structure of your block in the context of the
* editor. This represents what the editor will render when the block is used.
*
* @return {WPElement} Element to render.
*/
export default function Edit() {
const blockProps = useBlockProps({ className: 'splide__track' });
return (
// Your block content here
);
}
```
## Filters
### Carousel
```php
pulsar_blocks\carousel\force_carousel
```
The carousel contains logic to disable carousel functionality if the total number of slides is equal or less than the number of slides per page.
Use this filter if you would like to enable/disable this behaviour.
Example:
```php
add_filter( 'pulsar_blocks\carousel\force_carousel', '__return_true' );
```