fix: fix columns justify when wrapping is enabled

[Arukuen]

fixes #3680

Summary by CodeRabbit

• New Features

  • Introduced desktop column wrapping option, enabling users to control how columns display and wrap on desktop devices.

• Bug Fixes

  • Implemented automatic class adjustments to maintain backwards compatibility with older saved block versions.

• Improvements

  • Refined responsive styling rules to support the new column layout behavior seamlessly.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 67893a39-f344-4119-9371-f013126444b8

📥 Commits

Reviewing files that changed from the base of the PR and between 2438d9e and 9e73062.

📒 Files selected for processing (4)

• src/block/columns/deprecated.js
• src/block/columns/edit.js
• src/block/columns/save.js
• src/block/columns/style.scss

---

📝 Walkthrough

Walkthrough

The PR fixes column justification alignment in the Columns block when Allow Column Wrapping is enabled. It introduces a conditional stk--column-wrap-desktop CSS class applied during edit and save, restricts flex sizing rules to non-wrapped layouts via CSS, and handles backward compatibility for older saved versions.

Changes

Desktop Column Wrapping

Layer / File(s)	Summary
CSS styling adjustment for column wrapping src/block/columns/style.scss	Flex/width sizing now applies only when .stk--column-wrap-desktop is not present, restricting fit-content layout to non-wrapped configurations.
Conditional class binding in edit and save src/block/columns/edit.js, src/block/columns/save.js	Both edit and save components conditionally apply stk--column-wrap-desktop class based on the columnWrapDesktop attribute.
Deprecation handling and backward compatibility src/block/columns/deprecated.js	A content class filter removes stk--column-wrap-desktop from saved blocks older than 3.19.8, and a new deprecated migration maps version 3.19.7 saved blocks to the updated Save component.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A column wrap fix, so neat and divine,
When wrapping's enabled, justification will shine!
From stylesheets to saves, the class does its dance,
With backward compat wrapped up—no backward glance! 🌿

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main fix: addressing the columns justify issue when column wrapping is enabled, which directly matches the primary objective of the PR.
Linked Issues check	✅ Passed	The PR changes address the core issue by introducing columnWrapDesktop class management to prevent justify conflicts when wrapping is enabled, meeting the expected behavior requirements.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the columns justify issue when wrapping is enabled; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-3680/column-justify-with-wrapping

---

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
pr3703-stackable-3703-merge.zip	9e73062

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