Skip to content

[WC-3491] Image widget: fix issue with previews not respecting min/max height settings #2311

Open
r0b1n wants to merge 1 commit into
mainfrom
fix/image-preview-minmax-height
Open

[WC-3491] Image widget: fix issue with previews not respecting min/max height settings #2311
r0b1n wants to merge 1 commit into
mainfrom
fix/image-preview-minmax-height

Conversation

@r0b1n

@r0b1n r0b1n commented Jul 7, 2026

Copy link
Copy Markdown
Collaborator

Pull request type

Bug fix (non-breaking change which fixes an issue)


Description

Unify how the image widget looks in previews regarding min/max height. It uses the same code path as runtime for Design Preview. And Simplified following on Structure preview.

What should be covered while testing?

Image widget reacts to setting max and min height in Design and Structure preview.

@r0b1n r0b1n requested a review from a team as a code owner July 7, 2026 13:03
@github-actions

github-actions Bot commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

AI Code Review

⚠️ Approved with suggestions — low-severity items only, safe to merge


What was reviewed

File Change
packages/pluggableWidgets/image-web/CHANGELOG.md Added Unreleased entry for the preview height fix
packages/pluggableWidgets/image-web/src/Image.editorConfig.ts Structure preview height logic now mirrors runtime min/max height constraints
packages/pluggableWidgets/image-web/src/Image.editorPreview.tsx Applies constructStyleObject in design preview; fixes deprecated classNameclass
packages/pluggableWidgets/image-web/src/utils/helpers.ts constructStyleObject accepts `ImageContainerProps

Skipped (out of scope): dist/, pnpm-lock.yaml


Findings

⚠️ Low — height! in else-branch has no null guard for preview props

File: packages/pluggableWidgets/image-web/src/utils/helpers.ts line 25
Problem: ImagePreviewProps.height is number | null, but the else-branch calls getHeightScale(height!, heightUnit) with no null check. If Studio Pro sends heightUnit = "pixels" and height = null (a theoretically valid state per the typings), getHeightScale receives null and produces "nullpx" — an invalid CSS value applied to the preview element. The minHeight/maxHeight guards are fine because null > 0 already returns false.
Fix:

} else if (height !== null && height !== undefined) {
    imageStyle.height = getHeightScale(height, heightUnit);
}

⚠️ Low — No unit tests for constructStyleObject with ImagePreviewProps inputs

File: packages/pluggableWidgets/image-web/src/utils/helpers.ts
Note: src/utils/__tests__/ does not exist. Now that constructStyleObject handles a union type with nullable fields (the null! assertions being the risk surface), it's worth adding a small spec covering the ImagePreviewProps path — specifically the heightUnit: "auto" + null minHeight/maxHeight combinations, and the heightUnit: "pixels" + height: null edge case above. Not blocking, but would have caught the null-height issue pre-merge.


Positives

  • Correct removal of the deprecated props.className in favour of props.class — the typings mark className as deprecated since 9.18.0 and this was a real divergence from the runtime path.
  • The minHeight/maxHeight null guards (> 0) already function as runtime null checks since null > 0 === false, so the ! assertions there are safe.
  • The boolean short-circuit type === "image" && constructStyleObject(props) spreads safely as a no-op when false — no extra branch needed.
  • CHANGELOG entry is user-facing behaviour only, no implementation details leaked.
  • The approximation comment in editorConfig.ts is justified — using maxHeight/minHeight as the structure preview frame height is non-obvious behaviour that a reader would otherwise have to trace back to constructStyleObject to understand.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant