SliderPress

A WordPress Gutenberg block plugin that renders a Swiper-powered slider with slide and fade transition effects.

Features

• Gutenberg block: SliderPress (slider-press/slider)
• Powered by Swiper.js
• Transition effects: Slide and Fade (configurable per block)
• Slides authored as core/group InnerBlocks (each Group = one slide)
• Editor UX: slides displayed side-by-side (horizontal scroll) so you can see and edit each slide without vertical stacking
• Block sidebar settings:
  • Effect: Slide | Fade
  • Loop
  • Speed (ms)
  • Autoplay + Autoplay Delay
  • Pagination (bullets)
  • Navigation (prev/next arrows)

Installation

From ZIP (no build step required)

1. Download sliderpress-<version>.zip from the Releases page.
2. In WordPress admin, go to Plugins → Add New → Upload Plugin.
3. Upload the ZIP and click Install Now, then Activate Plugin.
4. Add the SliderPress block from the block inserter in any post or page.

Manual

1. Upload the sliderpress folder to wp-content/plugins/.
2. Activate the plugin in Plugins → Installed Plugins.

Requirements

• WordPress 6.3 or higher
• PHP 7.4 or higher

Usage

1. In the block editor, insert the SliderPress block.
2. Each slide is a Group block. Add content inside the Group—images, text, or any blocks.
   • In the editor the slides are shown side-by-side with a horizontal scrollbar so you can edit each slide directly.
3. Use the block sidebar (Inspector Controls) to configure:
   • Effect: Choose between Slide (default) or Fade.
   • Loop: Enable continuous looping.
   • Speed: Transition speed in milliseconds.
   • Autoplay: Auto-advance slides with a configurable delay.
   • Pagination: Show clickable bullet dots below the slider.
   • Navigation: Show Previous/Next arrow buttons.
4. Save or publish the post. The slider initialises automatically on the frontend.

Development

Prerequisites

• Node.js v18+
• npm v9+

Setup

# Clone the repository
git clone https://github.com/bradhogan/Slider-Press.git
cd Slider-Press

# Install dependencies
npm install

Build

# Production build (outputs to build/)
npm run build

# Development build with file watcher
npm run start

Project Structure

Slider-Press/
├── .github/
│   └── workflows/
│       └── release.yml     # Automated release ZIP workflow
├── block.json              # Block metadata
├── slider-press.php        # Plugin entry point
├── webpack.config.js       # Custom webpack config (extends @wordpress/scripts)
├── package.json
├── src/
│   ├── index.js            # Block editor (edit + save)
│   ├── frontend.js         # Frontend Swiper initialisation
│   ├── editor.css          # Editor-only styles  → build/index.css
│   └── style.css           # Frontend + editor styles → build/style-index.css
└── build/                  # Compiled assets (committed; no build step needed)
    ├── index.js
    ├── index.css
    ├── index.asset.php
    ├── style-index.css
    ├── frontend.js
    ├── frontend.css
    └── frontend.asset.php

Scripts

Command	Description
npm run build	Production build
npm run start	Development build with watch
npm run lint:js	Lint JavaScript source files

Releasing

GitHub Actions (recommended)

Releases are automated via .github/workflows/release.yml. To publish a new release:

1. Bump the version in slider-press.php, package.json, and block.json.
2. Run npm run build and commit the updated build/ directory.
3. Tag the commit and push the tag:

   git tag v0.1.1
   git push origin v0.1.1

4. The workflow will:
   • Install npm dependencies
   • Run npm run build
   • Package the plugin into sliderpress-<version>.zip with the root folder named sliderpress/
   • Attach the ZIP to a new GitHub Release

The resulting ZIP (sliderpress-0.1.1.zip) can be installed directly via WordPress → Plugins → Add New → Upload Plugin.

Local ZIP (manual)

If you need a ZIP without pushing a tag:

npm run build

VERSION=$(node -p "require('./package.json').version")
SLUG=sliderpress
mkdir -p /tmp/${SLUG}
rsync -a \
  --exclude='.git' --exclude='.github' --exclude='node_modules' \
  --exclude='src' --exclude='webpack.config.js' \
  --exclude='package.json' --exclude='package-lock.json' \
  . /tmp/${SLUG}/
cd /tmp && zip -r "${SLUG}-${VERSION}.zip" "${SLUG}/"

The ZIP will be at /tmp/sliderpress-<version>.zip.

License

GPL-2.0-or-later — see LICENSE.