fix (posts block): fix image width in horizontal block styles

[kaeizen]

fixes #3554

Summary by CodeRabbit

• Bug Fixes
  • Improved image sizing in horizontal and list post layouts: linked images that use percentage-based widths now preserve their intended display and sizing, avoiding incorrect width reduction and delivering more consistent visuals across layout modes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

For the Posts block, the Image.saveEnableWidthCallback now disables saving width for horizontal layouts only when the image has a link and the image width unit (desktop or tablet) is '%'. A clarifying comment was added. No public API or signature changes.

Changes

Cohort / File(s)	Summary
Posts Block Styling src/block/posts/style.js	Updated saveEnableWidthCallback conditional to return false for horizontal (and horizontal-2) layouts only when imageHasLink is true AND either imageWidthUnit or imageWidthUnitTablet equals %. Added an explanatory comment; no exported signatures changed.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Single-file, localized conditional change.
• Pay attention to:
  • Desktop vs tablet imageWidthUnit checks.
  • Behavior for layouts horizontal and horizontal-2.
  • Confirm no regressions for list layout and images without links.

Poem

🐰
I hopped through code with nimble paws,
Tamed percent widths and mended flaws.
Linked pics now mind the horizontal line,
Posts look tidy — neat and fine. 🌿✨

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 clearly describes the main fix for image width issues in horizontal block styles of the Posts block, directly matching the changeset modifications.
Linked Issues check	✅ Passed	The code changes address the image width configuration issue in horizontal layouts by modifying the saveEnableWidthCallback condition to properly handle width units and links, aligning with issue #3554's expected behavior.
Out of Scope Changes check	✅ Passed	All changes are focused on fixing the image width callback logic in horizontal block styles, with no unrelated modifications detected outside the scope of issue #3554.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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/3554-fix-image-width-in-horizontal-block-styles

---

📜 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 9574ffb and 402c03e.

📒 Files selected for processing (1)

• src/block/posts/style.js (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/block/posts/style.js

⏰ 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: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: PHP 7.3 and WP latest
• GitHub Check: build

---

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
pr3649-stackable-3649-merge.zip	402c03e

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

[bfintal]

Looks like the original behavior is we disallowed the width option for horizontal layouts. Not sure if this is the right fix for this because we disabled it for a reason.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 87e4d84 and 9574ffb.

📒 Files selected for processing (1)

• src/block/posts/style.js (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/block/posts/style.js (2)

src/components/block-css/index.js (1)

• getAttribute (112-112)

src/components/block-css/util.js (1)

• getAttribute (209-230)

⏰ 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: 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 6.5.5
• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 7.3 and WP latest
• GitHub Check: build

🔇 Additional comments (1)

src/block/posts/style.js (1)

289-296: Logic correctly prevents style rule conflicts.

The condition properly disables the default Image width styling when the custom selector (lines 236-258) should handle it. The checks for imageWidthUnit and imageWidthUnitTablet match exactly with the custom rule's enabledCallback, ensuring consistent behavior and preventing both rules from applying simultaneously.