Skip to content

Add Items Aspect Ratio presets and Original mode CSS #366

@georgeolaru

Description

@georgeolaru

Summary

Add CSS support for the Items Aspect Ratio feature in Cards Collection blocks. Nova Blocks adds a SelectControl with presets (Original, Square 1:1, Landscape 4:3, Portrait 3:4) — Anima provides the CSS that makes each mode render correctly on both frontend and editor.

What this does

Forced aspect ratios (Square, Landscape, Portrait)

  • Uses aspect-ratio: var(--nb-card-media-aspect-ratio, auto) on stacked card items
  • Scoped to 2+ column grids (excludes full-width hero blocks)
  • Editor fix: resets NB's degenerate aspect-ratio formula on the media wrapper (which produces infinity when Minimum Container Height = None)

Original aspect ratio

  • Removes the forced aspect ratio so each card's image dictates its own height
  • Frontend: Reverses NB's stacked layout — makes media position: static so image height flows naturally, content overlays via position: absolute
  • Editor: Overrides NB's deeply nested media chain (blob-mixblob-mix__maskblob-mix__media) to let image height flow up

Editor 3D Grid preview

  • CSS-only checkerboard approximation using nth-child(even) + transform: scale(0.88)

Files

  • src/scss/utility/_items-aspect-ratio.scss (new) — all aspect ratio CSS
  • src/scss/utility.scss — imports the new file
  • dist/css/utility.css, dist/css/utility-rtl.css — compiled output

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions