Gutenbricks simpel slider

readme.md

Splide Auto-Wrap for Bricks + Gutenberg (Gutenbricks)

This script fixes structural issues when using Splide sliders with Bricks Builder and Gutenbricks InnerBlocks.

Problem

• Gutenberg may insert multiple <figure> elements (image blocks) inside a single Gutenbricks InnerBlock wrapper.
• Bricks sometimes incorrectly applies .splide__slide classes to the wrapper instead of individual slides.
• Splide requires the following structure:

<div class="splide__track">
  <div class="splide__list">
    <div class="splide__slide">
      <figure><img src="..."></figure>
    </div>
    <div class="splide__slide">
      <figure><img src="..."></figure>
    </div>
  </div>
</div>

If the structure is wrong, Splide will not behave correctly (e.g., multiple images per slide, broken cloning, wrong loop behavior).

Solution

This script automatically wraps each Gutenberg <figure> in its own .splide__slide.

Features

• Removes invalid .splide__slide classes from Bricks wrappers.
• Wraps each Gutenberg image (<figure>) in its own slide.
• Cleans up empty wrappers.
• Fixes stray <figure> elements directly under .splide__list.
• Adds a small CSS fix to remove default WordPress figure margins inside slides.

Installation

1. In Bricks, add a Custom Attribute to your Gutenbricks InnerBlock container:

   • Name: data-splide-autowrap
   • Value: 1

2. Add the JS file to your WordPress site:

   • Recommended: enqueue it in your theme or child theme (in the footer).
   • Alternatively: use a "Code Snippets" plugin.

3. Initialize your Splide sliders as usual.

Example Usage in Bricks

<div class="brxe-gb-inner-blocks" data-splide-autowrap="1">
  <!-- Gutenberg images will be inserted here -->
</div>

After the script runs, your markup will be transformed to valid Splide slides.

Compatibility

• WordPress + Gutenberg (core/image block).
• Bricks Builder + Gutenbricks.
• Splide.js (any version).
• Works with multiple sliders on the same page.
• Only affects wrappers with the data-splide-autowrap attribute.

---

License: MIT
Author: Your Name

script.js

/**
 * Splide Auto-Wrap Script for Bricks + Gutenberg (Gutenbricks)
 *
 * This script ensures that each Gutenberg image block (<figure>) 
 * inside a Bricks InnerBlock container is wrapped inside a proper Splide slide (<div class="splide__slide">).
 *
 * Why?
 * - Splide requires the structure: .splide__list > .splide__slide > <figure>/<img>.
 * - Bricks sometimes applies .splide__slide classes incorrectly to the InnerBlock wrapper.
 * - Gutenberg may place multiple <figure> elements inside the same wrapper.
 *
 * This script:
 * 1. Finds all wrappers with the attribute [data-splide-autowrap].
 * 2. Removes invalid .splide__slide classes from the wrapper.
 * 3. Creates a proper .splide__slide element for each <figure>.
 * 4. Removes the empty wrapper afterwards.
 * 5. Optionally also fixes any <figure> directly placed inside .splide__list.
 *
 * Usage:
 * - Add `data-splide-autowrap="1"` to the Bricks InnerBlock container.
 * - Include this script in your theme or via a code snippet (footer is recommended).
 * - Splide will now work with Gutenberg images as intended.
 */

document.addEventListener('DOMContentLoaded', function () {
  // Process all wrappers that have the custom attribute
  document.querySelectorAll('[data-splide-autowrap]').forEach(function (wrapper) {
    // Find the closest .splide__list inside the current Splide track
    var list = wrapper.closest('.splide__track')?.querySelector('.splide__list');
    if (!list) return;

    // Remove invalid slide classes accidentally applied by Bricks
    wrapper.classList.remove('splide__slide', 'splide__slide--clone');

    // Collect all Gutenberg figures inside the wrapper
    var figures = Array.from(wrapper.querySelectorAll('figure.wp-block-image, figure'));
    if (!figures.length) return;

    // Create one Splide slide for each figure
    figures.forEach(function (fig) {
      // Skip if figure is already in the correct structure
      var parent = fig.parentElement;
      if (parent && parent.classList.contains('splide__slide') && parent.parentElement === list) return;

      var slide = document.createElement('div');
      slide.className = 'splide__slide';

      // Insert new slide before the wrapper to maintain original order
      list.insertBefore(slide, wrapper);
      slide.appendChild(fig);
    });

    // Remove the wrapper if it's empty after processing
    if (!wrapper.querySelector('figure')) {
      var isDirectChild = wrapper.parentElement === list;
      if (isDirectChild) {
        wrapper.remove();
      } else {
        wrapper.innerHTML = '';
      }
    }

    // Safety: wrap any stray figures directly under .splide__list
    Array.from(list.children).forEach(function (child) {
      if (child.matches && child.matches('figure, .wp-block-image')) {
        var s = document.createElement('div');
        s.className = 'splide__slide';
        list.insertBefore(s, child);
        s.appendChild(child);
      }
    });
  });

  // Small style fix: remove default WP figure margins inside Splide
  var style = document.createElement('style');
  style.textContent = '.splide__slide figure{margin:0}';
  document.head.appendChild(style);
});