Swiper

Overview

A responsive content carousel built on Swiper. The parent block holds Swiper Slide child blocks, each a full inner-blocks container, and sizes them by slides per view or by slide width per tier.

• Block name: method/swiper, with the child block method/swiper-slide
• Title: Swiper (Method); the child is Swiper Slide
• Category: method-layout-blocks
• Supports: align (wide, full); html off. The slide has html off and is locked to the parent (parent: ["method/swiper"]).
• Render type: Hybrid dynamic: both blocks’ save store only an inner-blocks wrapper (.swiper-wrapper for the parent, .method-swiper-slide-inner for the slide); the PHP render callbacks build everything else
• Inner blocks: Parent: method/swiper-slide only. Slide: anything (a new slide starts with a Container holding a paragraph).
• Scripts: editorScript for each block and a viewScript on the parent (frontend.js, the shared runtime). Swiper itself is enqueued on every page by the theme (handle swiper).
• Shared with: Swiper Gallery — the same option attributes, the same inspector panels (MethodSwiperControls) and the same render function (method_swiper_render()).
• Source: lib/blocks/method-swiper/method-swiper.php, lib/blocks/method-swiper/src/swiper/edit.js, lib/blocks/method-swiper/src/swiper-slide/edit.js, lib/blocks/components/MethodSwiperControls.js, lib/blocks/utils/swiperRuntime.js, lib/blocks/utils/swiperSlideWidth.js

Usage

Insert a Swiper and add slides with the Add slide button, which sits outside the track so Swiper never sizes or clips it like a slide. Each slide is an ordinary inner-blocks area. The editor runs a live Swiper instance that mirrors the frontend configuration — touch and drag are off and clicks are left to the editor, so slides stay selectable — and selecting a slide, or any block inside one, in the List View or on the canvas brings that slide into view.

Slides are sized one of two ways. By default, Slides per view and Space between are set per tier — Desktop, Tablet, Mobile — mobile-first: the mobile values are Swiper’s base configuration and the tablet and desktop values are Swiper breakpoints at the theme’s own breakpoints. With Set slide widths on instead, each tier gets a width in pixels (or Match container width), Swiper runs with slidesPerView: 'auto' and shows as many slides as fit, and a full-width swiper lines its first slide up with the constrained content while the slides still travel to the edge of the page. The Fade (crossfade) effect stacks the slides and shows one at a time; it takes precedence over both sizing modes.

Hash navigation gives each slide a hash (set per slide in Slide hash) that Swiper keeps in the URL and jumps to on load; any link on the page whose href is a visible slide’s hash gets method-hash-active, so a row of links can act as tabs for the swiper. Scroll to slide start, only offered with hash navigation, scrolls the page to the top of the swiper when the slide changes. Arrows, pagination (inside the track or outside, beside the arrows) and the arrow icons round out the Navigation panel.

Attributes

The parent has no responsiveSettings: its tiers are the three Desktop / Tablet / Mobile attribute sets above, not the base / mobile / tablet / wide object other blocks use, and its only generated CSS is the two colors (and, in width mode, the slide-width custom properties).

Swiper Slide (method/swiper-slide)

The slide’s block.json also declares textColor, linkColor, bgColor, bgGradient, bgShadeColor, bgShadeGradient, bgImg, bgSize, bgImgAlign and a responsiveSettings object, but no control writes them and the render callback does not read them. Style a slide through the blocks inside it — the default Container template is there for that.

Control Sets

Data & Dependencies

• Swiper: inc/swiper/swiper-bundle.min.js and .css, enqueued on every page by method_scripts() (lib/theme-setup.php) under the handle swiper. The block does not enqueue it itself.
• method_swiper_render( $attributes, $track_markup, $args ) — builds the wrapper, arrows, pagination and the per-instance inline init script for both swiper blocks; the Swiper block calls it with do_blocks( $content ) as the track. $args: id, class, watch_slides_progress, center_class and loop (a bool, or per tier); the Swiper block passes only its id, so it never loops — loop: false since beta18, which avoids the duplicate-slide quirks loop mode caused with hash navigation.
• Breakpoints: method_swiper_get_breakpoints() derives the tablet and desktop min-widths from method_get_block_breakpoints() (tablet_min, and tablet_max + 1), falling back to 768 and 1200, so the tiers match the editor, which resolves the same tiers from methodGlobalData.breakpoints.
• Width mode: method_swiper_get_slide_width_css() collects, per tier and mobile-first at the same breakpoints, --method-swiper-slide-width (a px width, or 100% of the track’s content box for a container-width tier) and --method-swiper-slide-fill (1 or 0) on the wrapper; assets/scss/global.scss sizes the .swiper-slides from them and, for a full-width block, pads the track so the first slide starts at the content edge (--method-swiper-track-padding, allowing for the arrows through --method-swiper-track-inset: 76px while the wrapper has method-swiper-has-nav, else 0). The editor side is lib/blocks/utils/swiperSlideWidth.js, which the PHP mirrors.
• Arrow icons: method_swiper_get_nav_icons() reads the chosen prevIcon / nextIcon from method_get_theme_icons() and falls back to the default chevrons; the editor’s MethodSwiperNav keeps the same defaults.
• Runtime (lib/blocks/utils/swiperRuntime.js, bundled into the view script): initSwiperRuntime() installs once per page (window.methodSwiperRuntime) and keeps a registry of instances. Each render’s inline script pushes { id, swiper, centerClass } onto window.methodSwiperQueue, which is a plain array until the runtime loads and is then drained and replaced by an object whose push registers immediately, so the order the scripts run in does not matter. On every slide change the runtime puts method-hash-active on links whose hash matches any visible slide in any registered swiper (from activeIndex and the active breakpoint’s slidesPerView).
• Styles (assets/scss/global.scss, .method-swiper) — the prev / track / next row as flexbox with 44×44px arrow targets, inside and outside pagination, and the width-mode rules above.
• Responsive CSS: method_get_block_responsive_styles() and method_collect_css() under #method{id} (note: no hyphen — the id doubles as the prefix of the init script’s JavaScript variable).

Frontend Rendering

<div class="wp-block-method-swiper method-swiper method-swiper-has-nav" id="method68f1b2c3a4d5e">
  <div class="swiper-outer">
    <div class="swiper-outer-wrap">
      <div class="swiper-outer-wrap-inner">
        <div class="swiper swiper-container">
          <div class="wp-block-method-swiper swiper-wrapper">
            <div class="wp-block-method-swiper-slide swiper-slide" id="method-…" data-hash="overview">
              <div class="method-swiper-slide">
                <div class="method-swiper-slide-inner">
                  <div class="wp-block-method-swiper-slide method-swiper-slide-inner">…slide blocks…</div>
                </div>
              </div>
            </div>
            …
          </div>
          <div class="swiper-pagination"> </div>
        </div>
      </div>
    </div>
    <div class="method-swiper-button-prev"><span class="method-swiper-icon method-swiper-icon-prev"><svg …></svg></span><span class="visually-hidden">Previous</span></div>
    <div class="method-swiper-button-next"><span class="method-swiper-icon method-swiper-icon-next"><svg …></svg></span><span class="visually-hidden">Next</span></div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const method68f1b2c3a4d5eSwiper = new Swiper('#method68f1b2c3a4d5e .swiper-container', {
      slidesPerView: 1,
      spaceBetween: 24,
      breakpoints: {
        768: { slidesPerView: 2, spaceBetween: 24 },
        1200: { slidesPerView: 3, spaceBetween: 24 }
      },
      loop: false,
      autoHeight: true,
      pagination: { el: '#method68f1b2c3a4d5e .swiper-pagination', clickable: true },
      navigation: { nextEl: '#method68f1b2c3a4d5e .method-swiper-button-next', prevEl: '#method68f1b2c3a4d5e .method-swiper-button-prev' },
      hashNavigation: { watchState: true, replaceState: true },
    });
    (window.methodSwiperQueue = window.methodSwiperQueue || []).push({ id: 'method68f1b2c3a4d5e', swiper: method68f1b2c3a4d5eSwiper });
  });
</script>

With Place pagination outside the bullets render as .method-swiper-pagination.swiper-pagination after the arrows instead of inside the track. With fade, the config is slidesPerView: 1, spaceBetween: 0, effect: 'fade', fadeEffect: { crossFade: true } with no breakpoints. In width mode the wrapper also carries method-swiper-width-mode, every tier is slidesPerView: 'auto', and the slide widths arrive as the custom properties described above. Scroll-to-slide-start adds a slideChange handler that calls scrollIntoView({ behavior: 'instant', block: 'start' }) on the wrapper when realIndex actually changes.

Generated CSS (per instance): #method{id} .method-swiper-button-prev, … .method-swiper-button-next → textColor; #method{id} .swiper-pagination → linkColor.

Filters

Neither block exposes a PHP filter; the Swiper configuration is assembled in method_swiper_render() from the attributes. On the page, scripts can reach every instance through the runtime: window.methodSwiperQueue.push({ id, swiper }) registers a Swiper created elsewhere for hash-link tracking, and the registered instances are the Swiper objects themselves, so swiper.slideTo(), swiper.on() and the rest are available.

Changelog