feat: add Slides per View setting to the Carousel block

[imrraaj]

Summary

Adds a Slides per View setting (1–6) to the Carousel block so users can show several slides at once, for example 3 images side by side.

This was already possible through the "2/3/4 Columns" block styles, but users didn't find it in the Styles panel, it stopped at 4, and it ignored the slide gap. The new setting sits in Carousel Settings, takes the gap into account, and works with static slides, Query Loop and Terms Query carousels.

Type of change

• Bug fix
• New feature
• Enhancement/refactor
• Documentation update
• Test update
• Build/CI/tooling

Related issue(s)

Closes #
Relates to #212 (if applicable)

What changed

• New slidesPerView attribute (number, default 1) with a "Slides per View" slider (1–6) in Carousel Settings, next to Slides to Scroll. It's hidden for the fade transition and in tabs mode, where slides stack on top of each other.
• getSlidesPerView() in embla-options.ts, next to applyTransitionOverrides. It returns the count to use, or nothing when the setting is at the default, in fade or in tabs mode, and it caps the value at 6. save.tsx and edit.tsx both use it.
• Saved markup: when the setting is above 1, the carousel gets one inline CSS variable, --rt-carousel-slides-per-view: N. At the default nothing is added, so existing carousels save exactly as before.
• CSS (_core.scss):
  • Each carousel calculates --rt-carousel-spv-width: (100% + gap) / N - gap, which fits exactly N slides and N − 1 gaps.
  • Slides use var(--rt-carousel-spv-width, var(--rt-carousel-slide-width, 100%)). When the count isn't set, the first value is invalid and slides fall back to the existing column styles, template columns-N classes or 100%.
  • Each carousel resets the count to initial, so a parent carousel's setting doesn't reach a carousel nested inside it.
• Priority: an explicit Slides per View value wins over the "N Columns" block styles and over Post/Terms Template grid columns.
• Docs: added slidesPerView to the attribute table in docs/USAGE.md.

Breaking changes

Does this introduce a breaking change? If yes, describe the impact and migration path below.

• Yes — migration path:
• No

Testing

Describe how this was tested.

• Unit tests
• Manual testing
• Cross-browser testing (if UI changes)

Test details:

Screenshots / recordings

• New tests/embla-options.test.ts covers getSlidesPerView(): the default, a valid count, capping at the max, decimals and negative values, fade, and tabs.
• tests/edit.test.tsx covers the control rendering and updating the attribute, the CSS variable being applied above 1 and left out at 1, the control being hidden for fade, and the setting not applying in tabs mode.
• Results: test:js 203/203, lint:js, lint:js:types, lint:css, build, composer lint and phpstan all pass.
• composer test has 2 failures in PluginTest (register_blocks…). They fail the same way on develop without this change and are unrelated; the test expects 7 blocks and finds 8.

Manual test steps:

1. Add a Carousel with 6 image slides and set Slides per View to 3. Three slides should fit exactly, with gaps, in both the editor and on the front end.
2. Set it to 4 with loop and Scroll Auto turned on. It should page through 4 at a time and wrap around.
3. Apply the "4 Columns" block style and set Slides per View to 2. It should show 2.
4. In a Query Loop carousel with the Post Template grid at 2 columns, set Slides per View to 3. It should show 3.
5. In a Terms Query carousel, set Slides per View to 3. It should show 3 terms.
6. Switch the transition to Fade, or turn on Use as Tabs. The control should disappear and the carousel should show one slide.
7. Open an existing post that already has carousels. There should be no block validation warnings.

Checklist

• I have self-reviewed this PR
• I have added/updated tests where needed
• I have updated docs where needed
• I have checked for breaking changes