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

[kaeizen]

fixes #3554

Summary by CodeRabbit

• Bug Fixes
  • Enhanced image styling consistency across different post layout options, including list and horizontal display modes, ensuring proper sizing and display behavior.

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

[coderabbitai]

Walkthrough

Expanded image styling logic in the Posts block to support horizontal and horizontal-2 layouts alongside the existing list layout, addressing formatting issues when custom image widths are applied. Removed an unused callback parameter.

Changes

Cohort / File(s)	Summary
Posts Block Styling src/block/posts/style.js	Extended selectorCallback and widthStyleRuleCallback conditions to include 'horizontal' and 'horizontal-2' layouts when handling image link and width styling. Removed saveEnableWidthCallback from configuration.

Sequence Diagram(s)

Image styling application across layout types:

sequenceDiagram
    participant User
    participant Block as Posts Block
    participant Style as Image Styling

    User->>Block: Set image width (e.g., 300px)
    activate Block
    
    alt List Layout (original)
        Block->>Style: Apply width rules
        activate Style
        Style->>Style: Determine style type (width vs flexBasis)
        Style-->>Block: Style applied correctly
        deactivate Style
    else Horizontal/Horizontal-2 Layouts (new)
        Note over Block,Style: Now supported with same logic
        Block->>Style: Apply width rules
        activate Style
        Style->>Style: Determine style type (width vs flexBasis)
        Style-->>Block: Style applied correctly
        deactivate Style
    end
    
    deactivate Block

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Single file modified with straightforward conditional expansions
• Changes follow existing patterns, reducing cognitive overhead
• Logic is localized to two callback functions without side effects
• Consider verifying that 'horizontal' and 'horizontal-2' layouts produce the same visual results as 'list' when testing custom image widths

Poem

🐰 Hoppy days ahead, no more stretched display!
Horizontal layouts now style the right way,
With flexBasis flowing and widths held tight,
The Posts block now renders just perfectly right! ✨

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 pull request title clearly and specifically describes the main change: fixing image width issues in the Posts block's horizontal block styles.
Linked Issues check	✅ Passed	The code changes directly address issue #3554 by expanding style callbacks to support 'horizontal' and 'horizontal-2' block styles alongside 'list', which fixes image width application in these layouts.
Out of Scope Changes check	✅ Passed	All changes in src/block/posts/style.js are directly related to fixing image width handling for horizontal block styles as specified in 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 7d01e08 and 87e4d84.

📒 Files selected for processing (1)

• src/block/posts/style.js (2 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: PHP 8.2 and WP latest
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP 6.7.2
• 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 latest
• GitHub Check: build

🔇 Additional comments (2)

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

297-306: LGTM! Correct CSS property selection for flex layouts.

The extension of flexBasis usage to 'horizontal' and 'horizontal-2' layouts is appropriate. Using flexBasis instead of width for flex containers ensures proper sizing behavior when images have links in these layout styles.

---

284-296: Review comment is accurate and requires no changes.

Verification confirms:

• Code snippet matches actual file content (lines 284-296 selectorCallback is correct)
• Both selectorCallback (line 290) and widthStyleRuleCallback (line 302) properly extend layout handling to ['list', 'horizontal', 'horizontal-2']
• All referenced variables (itemSelector, blockStyle) are properly defined
• Changes are consistent with existing layout-specific patterns in the file
• No syntax errors or logical issues detected

The review's request for manual verification through testing steps is appropriate, as the fix requires end-user validation.

---

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	87e4d84

[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"}}]}