Image Slider Block

Display Multiple Images In Beautiful Slider & Reduce Page Scroll

A Gutenberg block by WPDeveloper that lets you showcase multiple images in a fully customizable, responsive slider — without touching a line of code.

• Completely customizable — content, speed, colors, and layout to match your design
• Responsive controls — per-device typography, spacing, and visibility
• Multiple layouts — image only, image with content, vertical slider, content slider
• Super light-weight — no extra resources, optimized for fast loading and instant live editing
• FSE & reusable block ready — PHP-based style handler works with Full Site Editing
• Dedicated support — an active support team behind the plugin

1. Open the WordPress Block/Gutenberg Editor
2. Search for "Slider Block"
3. Install in one click

1. Upload slider-block to /wp-content/plugins/
2. Activate the plugin through the Plugins menu in WordPress
3. Follow the documentation

This repository depends on two git submodules. Neither is optional — the build fails or produces a stale bundle without them:

git clone --recurse-submodules git@github.com:EssentialBlocks/slider-block.git
cd slider-block
npm install

If you already cloned without --recurse-submodules, npm install repairs it via the postinstall hook. To do it by hand:

npm run submodules      # git submodule update --init --recursive
npm run install:controls

The build has two stages, because controls/ is a separate package with its own webpack.config.js and its own dependency tree.

1. Controls stage — runs inside controls/. Bundles config/entries.js, which re-exports the shared controls and helpers from controls/src/. Output goes to ../dist:
   • dist/modules.js — exposed on the window.EBSliderControls global (name comes from config/controlname.json)
   • dist/modules.css, dist/style-modules.css, dist/frontend.js
2. Plugin stage — runs at the repo root against webpack.config.js. Builds dist/index.js (editor), dist/frontend/index.js (frontend), dist/style.css.

src/index.js consumes stage 1 at runtime:

const { ebConditionalRegisterBlockType } = window.EBSliderControls;

includes/helpers.php enqueues dist/modules.js as the slider-block-controls-util handle, reading its dependency list from dist/modules.asset.php. So an empty controls/ submodule means stage 1 never runs and dist/modules.js goes stale — the editor still boots off the committed bundle, which hides the problem until the controls source changes.

controls/ needs npm install --force, which npm run install:controls already passes. Two things make a plain install fail:

• react-sortable-hoc@2 peers on React 16/17 while its @wordpress/* siblings pull React 18 — a plain npm install aborts with ERESOLVE.
• --legacy-peer-deps is not the right escape hatch here. It makes npm ignore all peer dependencies, including ajv-keywords@5's peer on ajv@^8.8.2. npm then leaves the hoisted ajv@6 in place and the controls build dies with Cannot find module 'ajv/dist/compile/codegen'. --force overrides the React conflict while still resolving peers, so ajv@8 gets nested where it's needed.

dist/modules.css is built from this plugin's own controls submodule pin, so it differs between the Essential Blocks single-block plugins and must be enqueued under a plugin-specific handle (slider-block-editor-css). It previously used the shared name essential-blocks-editor-css, which meant whichever plugin loaded first won the handle outright — WP_Dependencies::add() returns false for an already-registered handle — silently dropping every later plugin's stylesheet and its dependencies. That broke the arrow icon pickers whenever Button Group Block was active.

Genuinely shared vendor assets (essential-blocks-icon-picker-css, essential-blocks-fontawesome, essential-blocks-animation) keep their shared handles on purpose, so only one copy loads however many EB single-block plugins are active.

Contributions are welcome. Open an issue or a pull request against the dev branch.

• Documentation and tutorials
• Report an issue on GitHub
• Plugin support forum
• WPDeveloper

See readme.txt for the full changelog.

GPL-3.0-or-later. See LICENSE.

Note: the Gruntfile.js readme task (wp_readme_to_markdown) regenerates README.md from readme.txt and will overwrite this file. Don't run it unless you intend that.