Fix editor slide layout wrappers, harden loop initialization, and add Slides per view (v0.1.2)

README.md

@@ -122,16 +122,16 @@ Releases are automated via `.github/workflows/release.yml`. To publish a new rel
 2. Run `npm run build` and commit the updated `build/` directory.
 3. Tag the commit and push the tag:
    ```bash
-   git tag v0.1.1
-   git push origin v0.1.1
+   git tag v0.1.2
+   git push origin v0.1.2
    ```
 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**.
+The resulting ZIP (`sliderpress-0.1.2.zip`) can be installed directly via **WordPress → Plugins → Add New → Upload Plugin**.
 
 ### Local ZIP (manual)
 

block.json

@@ -20,6 +20,10 @@
       "type": "boolean",
       "default": true
     },
+    "slidesPerView": {
+      "type": "number",
+      "default": 1
+    },
     "speed": {
       "type": "number",
       "default": 500

build/frontend.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'ccbbb16fdfdae6e9a2a3');
+<?php return array('dependencies' => array(), 'version' => '60a01d34a5d925503da6');

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components'), 'version' => '1f273203a94f8d3e84e0');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components'), 'version' => '93428337fcd8b90d7742');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "slider-press",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Gutenberg slider block powered by Swiper with slide and fade effects",
   "license": "GPL-2.0-or-later",
   "scripts": {

readme.txt

@@ -3,7 +3,7 @@ Contributors: bradhogan
 Tags: slider, carousel, swiper, gutenberg, block
 Requires at least: 6.3
 Tested up to: 6.7
-Stable tag: 0.1.1
+Stable tag: 0.1.2
 Requires PHP: 7.4
 License: GPL-2.0-or-later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
@@ -22,6 +22,11 @@ SliderPress adds a Gutenberg block that renders a Swiper-powered slider. Slides
 
 == Changelog ==
 
+= 0.1.2 =
+* Fixed editor slide layout selectors for Gutenberg wrappers so slides display horizontally with scroll.
+* Added Slides per view block setting and frontend data/config wiring.
+* Hardened frontend loop initialization by auto-disabling loop when there are not enough slides.
+
 = 0.1.1 =
 * Renamed branding to SliderPress (no space)
 * Improved editor UX: slides are now displayed side-by-side with horizontal scroll

slider-press.php

@@ -3,7 +3,7 @@
  * Plugin Name:       SliderPress
  * Plugin URI:        https://github.com/bradhogan/Slider-Press
  * Description:       A Gutenberg slider block powered by Swiper with slide and fade transition effects.
- * Version:           0.1.1
+ * Version:           0.1.2
  * Author:            SliderPress
  * Requires at least: 6.3
  * Requires PHP:      7.4

src/editor.css

@@ -5,7 +5,7 @@
 	width: 100%;
 	/* Allow horizontal scroll in the editor */
 	overflow-x: auto;
-	overflow-y: visible;
+	overflow-y: hidden;
 	min-height: 200px;
 	background: #f0f0f0;
 	border: 1px dashed #ccc;
@@ -35,8 +35,18 @@
 	transform: none !important;
 }
 
-/* Each slide (core/group with swiper-slide class) side-by-side */
-.slider-press .swiper-wrapper > .wp-block-group {
+/* Gutenberg wraps InnerBlocks with .block-editor-inner-blocks/.block-editor-block-list__layout */
+.slider-press .swiper-wrapper .block-editor-block-list__layout {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: flex-start;
+	gap: 12px;
+}
+
+/* Each slide side-by-side */
+.slider-press .swiper-wrapper .swiper-slide,
+.slider-press .swiper-wrapper .block-editor-block-list__block.swiper-slide {
 	flex: 0 0 auto;
 	width: 80%;
 	min-width: 260px;

src/frontend.js

@@ -7,12 +7,20 @@ import { Navigation, Pagination, Autoplay, EffectFade } from 'swiper/modules';
 
 function initSlider( el ) {
 	const effect = el.dataset.effect || 'slide';
-	const loop = el.dataset.loop === '1';
+	const loopRequested = el.dataset.loop === '1';
+	const slidesPerView = Math.max(
+		1,
+		parseInt( el.dataset.slidesPerView || '1', 10 ) || 1
+	);
+	const slidesPerGroup = 1;
 	const speed = parseInt( el.dataset.speed || '500', 10 );
 	const autoplayEnabled = el.dataset.autoplay === '1';
 	const autoplayDelay = parseInt( el.dataset.autoplayDelay || '3000', 10 );
 	const paginationEnabled = el.dataset.pagination === '1';
 	const navigationEnabled = el.dataset.navigation === '1';
+	const slideCount = el.querySelectorAll( '.swiper-slide' ).length;
+	const minSlidesForLoop = Math.max( 2, slidesPerView + slidesPerGroup );
+	const loop = loopRequested && slideCount >= minSlidesForLoop;
 
 	const modules = [ Navigation, Pagination, Autoplay ];
 	if ( effect === 'fade' ) {
@@ -24,7 +32,8 @@ function initSlider( el ) {
 		effect,
 		loop,
 		speed,
-		slidesPerView: 1,
+		slidesPerView,
+		slidesPerGroup,
 	};
 
 	if ( effect === 'fade' ) {

src/index.js

@@ -24,6 +24,7 @@ registerBlockType( metadata.name, {
 		const {
 			effect,
 			loop,
+			slidesPerView,
 			speed,
 			autoplay,
 			autoplayDelay,
@@ -50,6 +51,16 @@ registerBlockType( metadata.name, {
 							checked={ loop }
 							onChange={ ( value ) => setAttributes( { loop: !! value } ) }
 						/>
+						<RangeControl
+							label="Slides per view"
+							value={ slidesPerView }
+							min={ 1 }
+							max={ 6 }
+							step={ 1 }
+							onChange={ ( value ) =>
+								setAttributes( { slidesPerView: value || 1 } )
+							}
+						/>
 						<RangeControl
 							label="Speed (ms)"
 							value={ speed }
@@ -114,6 +125,7 @@ registerBlockType( metadata.name, {
 		const {
 			effect,
 			loop,
+			slidesPerView,
 			speed,
 			autoplay,
 			autoplayDelay,
@@ -132,6 +144,7 @@ registerBlockType( metadata.name, {
 					data-slider-press
 					data-effect={ effect }
 					data-loop={ loop ? '1' : '0' }
+					data-slides-per-view={ String( slidesPerView ) }
 					data-speed={ String( speed ) }
 					data-autoplay={ autoplay ? '1' : '0' }
 					data-autoplay-delay={ String( autoplayDelay ) }