MethodSwiperControls

Overview

The inspector panels shared by the Swiper and Swiper Gallery blocks — Effect, Slide sizing, Space between and Navigation — so the two blocks store the same options under the same attribute names and behave identically.

File: lib/blocks/components/MethodSwiperControls.js
Panels: “Effect”, “Slide sizing”, “Space between”, “Navigation”
Storage: Top-level block attributes, not responsiveSettings — the tiers are the …Tablet / …Mobile attribute suffixes
Companion: MethodSwiperNav.js — the editor’s arrow icons and the icon-picker options; see below

Props

Prop	Type	Default	Description
`attributes`	`object`	(required)	The block’s full `attributes` object. The component reads the swiper option attributes listed under Controls, each with the block.json default as its fallback.
`setAttributes`	`function`	(required)	WordPress `setAttributes`.
`perViewExtra`	`node`	`null`	Extra controls appended to the Slide sizing panel, hidden with the fade effect. Swiper Gallery passes its Mark center slides toggle.
`hashExtra`	`node`	`null`	Extra controls shown directly under the Hash navigation toggle while it is on. Swiper Gallery passes its Hash ID field (its slides have no hash of their own).

Controls

Effect

Attribute: fadeEffect
UI: ToggleControl “Fade (crossfade)”
Effect: While on, the Slide sizing and Space between panels are not rendered: fade shows one slide at a time, so per-view counts, widths and spacing do not apply.

Slide sizing

Attributes: slideWidthMode; per tier slidesPerView / slidesPerViewTablet / slidesPerViewMobile (1–6), slideWidth / slideWidthTablet / slideWidthMobile (100–1200px), containerWidthSlides / containerWidthSlidesTablet / containerWidthSlidesMobile
UI: A “Set slide widths” ToggleControl heads the panel. Off: one RangeControl per tier (Desktop, Tablet, Mobile) for slides per view. On: one RangeControl per tier for the width in px, each with a “Match container width” ToggleControl that disables the slider for that tier.
Color coding: Each tier’s slider is wrapped in .method-bpc-range.method-bpc-desktop / -tablet / -mobile (.method-bpc-units-px on px sliders), which the editor CSS in lib/blocks.php colors with the theme’s breakpoint colors.
Defaults: SLIDE_WIDTH_DEFAULTS, SLIDE_WIDTH_MIN and SLIDE_WIDTH_MAX come from lib/blocks/utils/swiperSlideWidth.js, which method_swiper_get_slide_width_keys() mirrors in PHP.

Space between

Attributes: spaceBetween / spaceBetweenTablet / spaceBetweenMobile
UI: One RangeControl per tier, 0–120, in px, color-coded like the sizing sliders.

Navigation

Attributes: showNavigation, prevIcon, nextIcon, showPagination, altPagination, hashNavigation, scrollToSlideStart
UI: “Show arrows” ToggleControl; while on, “Previous Arrow” and “Next Arrow” SelectControls whose options come from useSwiperIconOptions() (Default, then every registered theme icon; “None” only when the theme registers no icons). “Show pagination” with “Place pagination outside” beneath it. “Hash navigation” with, beneath it, the block’s hashExtra and “Scroll to slide start”.

MethodSwiperNav

lib/blocks/components/MethodSwiperNav.js holds the editor side of the arrows, kept in step with method_swiper_get_nav_icons() in lib/blocks/method-swiper/method-swiper.php:

DEFAULT_PREV_ICON / DEFAULT_NEXT_ICON — the chevron SVGs, the same markup PHP prints when no theme icon is chosen.
useSwiperIconOptions() — the Previous / Next arrow options, built once from methodGlobalData.icons (the theme icons localised for the editor).
<SwiperArrow direction iconKey /> — the .method-swiper-icon.method-swiper-icon-prev|next span for the canvas: the chosen theme icon’s SVG when it still exists, otherwise the default chevron.

CSS Output

None from the component itself. The attributes it writes are read by method_swiper_render() on the page (Swiper configuration, arrows and pagination markup, and in width mode the --method-swiper-slide-width / --method-swiper-slide-fill custom properties) and by each block’s editor preview, which re-initialises its Swiper when any of them changes.

Usage by Blocks

Block	Notes
Swiper	All four panels, no extras.
Swiper Gallery	All four panels; `perViewExtra` = Mark center slides, `hashExtra` = Hash ID.

Changelog

Version	Description
2.0.0-beta23	Introduced, with `MethodSwiperNav`, by lifting the Swiper block’s inline panels into a shared component for the rebuilt Swiper Gallery (eacd345), carrying over the tier color-coding and px units added to the Swiper block’s sliders earlier in the release (2a5e8d3).
2.0.0-beta29	“Slides per view” became “Slide sizing”: the “Set slide widths” mode with a width and “Match container width” per tier (4c64716).