Fix (carousel block): display correct layout and remove frontend console errors

[kaeizen]

fixes #3615, #3616

Summary by CodeRabbit

• Bug Fixes
  • Prevents carousel scroll/drag issues when infinite scrolling is off or clones aren’t available, ensuring smooth interactions.
  • Corrects content alignment within carousel wrappers for center, wide, and full alignments on desktop/tablet.
  • Ensures wide/full alignment max-width is consistently applied in the editor when content is wrapped by a carousel.

[coderabbitai]

Walkthrough

Adds defensive checks in the carousel’s frontend JS to avoid accessing missing clone elements during scrolling/dragging. Updates block and editor SCSS to extend alignment selectors so carousel-wrapped content respects center/wide/full alignment constraints.

Changes

Cohort / File(s)	Summary
Carousel JS safeguards src/block/carousel/frontend-carousel.js	Guarded access to this.clones[0] and clone-offset computations; when clones are absent or infinite scrolling is off, falls back to 0/[] for first clone offsets and arrays within wheel/drag/scroll calculations.
Carousel alignment styles src/styles/block.scss, src/styles/editor-block.scss	Expanded alignment selectors so .stk-block-carousel wrappers receive center/wide/full alignment behavior and max-width rules alongside existing non-carousel selectors.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Carousel
  participant Clones as Clones (if any)

  User->>Carousel: Wheel / Drag / Scroll
  Carousel->>Carousel: Check infinite scrolling enabled?
  alt Infinite on
    Carousel->>Clones: Are clones present?
    alt Clones present
      Carousel->>Carousel: Compute clone offsets
      Carousel->>Carousel: Apply offset-adjusted slide position
    else No clones
      Note over Carousel: Fallback offsets = 0 / []
      Carousel->>Carousel: Slide using fallback offsets
    end
  else Infinite off
    Note over Carousel: Skip clone offset logic
    Carousel->>Carousel: Slide normally
  end
  Carousel-->>User: Updated slide position (no errors)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• fix (carousel): fix overlapping inner columns on infinite scroll #3588 — Also changes frontend-carousel.js clone handling for infinite scrolling, likely adjacent to these guard/fallback adjustments.

Poem

I hop past slides, a jitter-free spree,
No clone in sight? It’s zero for me.
Wheels spin smooth, no console cries,
Styles align wide beneath calm skies.
Thump-thump—carousel glides in tune,
A rabbit approves, by carrot and moon. 🥕🌙

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes Check	⚠️ Warning	The pull request includes CSS selector updates for carousel block alignment that address layout concerns beyond the console error bug fixed by issue #3615, introducing changes unrelated to the linked issue’s scope.	Consider extracting the layout and alignment CSS updates into a separate pull request so that this change remains focused on resolving the console error detailed in issue #3615.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly describes both the main bug fix for console errors in the carousel block and the layout improvements, providing a concise summary of the primary changes.
Linked Issues Check	✅ Passed	The JavaScript modifications add guards around clone access to prevent undefined reads, directly resolving the console error specified in issue #3615 and enabling smooth carousel sliding without errors.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/carousel-layout-and-frontend-errors

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🤖 Pull request artifacts

file	commit
pr3619-stackable-3619-merge.zip	483ab84

[github-actions]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3619-stackable-3619-merge.zip"}}]}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/block/carousel/frontend-carousel.js (1)

329-331: Consider adding defensive guards to other clone accesses for consistency.

While the current fixes resolve the reported issue, there are a few other places where this.clones is accessed without guards:

1. Line 329-331 (swapSlides): this.clones.slice(startIndex, endIndex)
2. Line 338-339 (swapSlides): this.clones[this.clones.length - 1] and this.clones[0]
3. Line 663 (onScroll): [...this.slideEls, ...this.clones]

These are likely safe due to the conditional logic around them (only executed when infiniteScroll is true), but adding similar guards would make the code more robust and consistent with the defensive pattern established in this PR.

Example for line 663:

-const slideEls = this.infiniteScroll ? [ ...this.slideEls, ...this.clones ] : this.slideEls
+const slideEls = this.infiniteScroll && this.clones?.length ? [ ...this.slideEls, ...this.clones ] : this.slideEls

Also applies to: 338-339, 663-663

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 578783c and 483ab84.

📒 Files selected for processing (3)

• src/block/carousel/frontend-carousel.js (2 hunks)
• src/styles/block.scss (1 hunks)
• src/styles/editor-block.scss (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 7.3 and WP latest

🔇 Additional comments (4)

src/styles/block.scss (1)

56-58: LGTM! Carousel alignment handled correctly.

The new selector properly extends the alignment rules to accommodate the carousel's extra wrapper structure (.stk-block-carousel__content-wrapper). The pattern is consistent with the existing selector above it, ensuring carousel content respects the same center/wide/full alignment constraints.

src/block/carousel/frontend-carousel.js (2)

495-496: Excellent defensive guards that fix the reported error.

These checks directly address the "Cannot read properties of undefined (reading '0')" error by ensuring this.clones exists and has elements before accessing this.clones[0] or calling .map(). The fallback values (0 and []) are appropriate and prevent runtime exceptions.

---

552-552: LGTM! Consistent defensive pattern.

This guard follows the same pattern as lines 495-496, protecting against undefined clones during drag operations.

src/styles/editor-block.scss (1)

106-109: LGTM! Editor alignment rules extended correctly.

The new selector (line 109) properly extends the max-width rules to carousel blocks in the editor, mirroring the changes made to block.scss. This ensures consistent alignment behavior between the frontend and editor for carousel-wrapped content.

[wbhoneywill]

This has broken our carousels

It's forcing us to have a default width but we want to stay at 100%