fix (carousel block): display layout correctly for content width wide

[kaeizen]

Summary by CodeRabbit

• Bug Fixes

  • Corrects alignment for carousel blocks on desktop and tablet, ensuring center, wide, and full options render consistently.
  • Ensures wide-aligned content inside carousels respects the expected max-width in the editor.

• Style

  • Harmonizes layout handling for carousel wrappers with non-carousel blocks for a more consistent appearance across views.

[coderabbitai]

Walkthrough

Expands CSS selectors to include carousel-specific wrappers for alignment and max-width handling in desktop/tablet and editor contexts. Adds selectors targeting .stk-block-carousel structures to mirror existing non-carousel rules without changing property values.

Changes

Cohort / File(s)	Summary
Carousel alignment selectors src/styles/block.scss, src/styles/editor-block.scss	Add carousel-aware selector paths to existing alignment rules. In block.scss, introduce a selector for .stk-block-carousel with center/wide/full alignments accounting for an extra content wrapper. In editor-block.scss, split the wide-align rule into a grouped :where selector adding the carousel path to apply the same max-width to .alignwide inside the carousel.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Fix (carousel block): display correct layout and remove frontend console errors #3619 — Also updates CSS selectors in the same style files to add carousel-specific alignment wrappers, indicating a closely related change set.

Poem

I hop through styles with careful cheer,
Nudging carousels to fit just right here.
Wide, full, centered—wrappers inline,
Alignments now glide, neat and fine.
CSS whispers: “Follow the trail,”
And every slide sets sail. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly specifies that it fixes the carousel block’s layout for wide content widths, which directly reflects the addition of selectors handling .stk-block-carousel alignwide in the changeset. It succinctly highlights the main issue and the component affected without extraneous details. This phrasing is specific enough for a reviewer to understand the primary focus at a glance.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/carousel-block-layout-alignment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1e56ba3 and 46c38ad.

📒 Files selected for processing (2)

• 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). (7)

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

🔇 Additional comments (2)

src/styles/block.scss (1)

70-72: Carousel-wide selector mirrors existing logic correctly.

The added selector cleanly extends the alignwide rule to the carousel wrapper without changing specificity. Nice parity fix.

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

115-118: Editor-wide coverage extended appropriately.

Appreciate the added path for carousel content—keeps the editor max-width in sync with the frontend behavior.

---

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
pr3628-stackable-3628-merge.zip	46c38ad

[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/pr3628-stackable-3628-merge.zip"}}]}