fix: use margin for the alignment of native image block

[Arukuen]

fixes #3610

Summary by CodeRabbit

• Bug Fixes

  • Corrects image alignment inside Stackable columns in the editor. Left- and right-aligned images now display with appropriate side margins, including within resizable containers, preventing awkward block-level spacing.

• Style

  • Updates editor styling for images within columns to ensure consistent spacing and alignment. Improves visual consistency when placing images inside inner columns without affecting front-end display.

[coderabbitai]

Walkthrough

Adds editor-only CSS to apply left/right margins via variables on native Image blocks inside Stackable inner columns, enabling alignment within resizable containers.

Changes

Cohort / File(s)	Summary of Changes
Editor CSS: Image alignment in inner columns src/block/column/editor.scss	Targets .wp-block-stackable-column .wp-block-image .components-resizable-box__container img to set margin-left and margin-right using --stk-alignment-margin-left and --stk-alignment-margin-right (default auto) to reflect content alignment in the editor.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A nibble of CSS, a hop to the right,
Columns now guide images snug and tight.
I twitch my nose—alignment in sight!
Left or right margins, set just so,
Thump-thump! The editor’s ready to go. 🥕

Pre-merge checks and finishing touches

✅ 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 succinctly describes the core change—using margins to align native image blocks—and matches the edits made to the editor stylesheet without extraneous detail.
Linked Issues Check	✅ Passed	The CSS adjustment adds margin-based alignment rules for native image blocks within inner columns, directly fulfilling the requirement that images align according to the column’s content alignment setting as described in issue #3610.
Out of Scope Changes Check	✅ Passed	All modifications are confined to editor styling for native image alignment within stackable columns, aligning exactly with the linked issue’s scope and introducing no unrelated changes.
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/3610-native-image-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 578783c and 5d22705.

📒 Files selected for processing (1)

• src/block/column/editor.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 latest
• 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 6.7.2
• GitHub Check: PHP 7.3 and WP latest

---

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
pr3612-stackable-3612-merge.zip	5d22705

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