Skip to content

[6.x] Replicator card layout - #15343

Open
jaygeorge wants to merge 33 commits into
6.xfrom
replicator-card-layout
Open

[6.x] Replicator card layout#15343
jaygeorge wants to merge 33 commits into
6.xfrom
replicator-card-layout

Conversation

@jaygeorge

Copy link
Copy Markdown
Contributor

Description of the Problem

“Card” components are a common pattern on the web, used for things like contact information, team bios, and feature highlights with icons.

Replicator sets always render full-width, one per row. That works well for long-form content, but many blueprints repeat the same set type (e.g. feature cards, team members, stats) where an optional compact side-by-side layout would be easier to scan and edit.

2026-09-02 at 10 40 30@2x

When content naturally lends itself to a card-based presentation, it can be useful to display replicator sets as condensed cards.

2026-09-02 at 10 43 16@2x

What this PR Does

  • Adds an optional Card layout toggle when configuring sets on a Replicator field (not Bard, currently, because the insertion method is pretty different, and there's a less horizontal space, so I'm not sure how useful it would be in Bard).
2026-09-02 at 10 44 11@2x

On the publish form, consecutive instances of the same card-enabled set render as cards when the panel is wide enough:

  • 2 columns when the panel is wider than 635px
    • (as soon as multi-columns are hit, all fields within the set default to 100% width)
  • 3 columns when wider than 935px
  • Full width when stacked/narrow

I considered giving editors control over card widths, but opted for automatic sizing instead, because:

  • Single cards should stay full width. When there's only one instance (or no consecutive card sets), the content should use the full replicator width. Single narrow cards with empty space on either side look awkward in the CP.
  • The CP is an editing abstraction. The card layout is there to make repeated sets easier to scan and manage—it doesn't need to mirror how content will actually be presented on the site.

Also includes:

  • Blueprint UI for the toggle, with a “Card” badge and updated instructions. The Team Member set has a card badge here
2026-09-02 at 11 05 25@2x - Card-specific styling and insert-handle behaviour for multi-card rows 2026-09-02 at 11 06 48@2x - Visibility toggle moved into the overflow menu on card sets to save some space 2026-09-02 at 11 08 45@2x - Collapse/expand synced across all cards in a row (when multi-column)
2026-09-02.at.11.09.17.mp4

Some more technical things:

  • Drag reorder fixes, including a DOM fallback when Sortable dedupes items
  • Scoped publish-field columns inside card slots so grid fields don’t overflow
  • Extracted cardLayouts.js helpers with Vitest coverage
  • Bard explicitly excluded: no card toggle in Bard set config, and card is stripped from Bard runtime config

How to Reproduce

  1. Edit a blueprint with a Replicator field.
  2. Open a set’s settings and enable Card layout. Save the blueprint.
  3. Create or edit an entry using that Replicator field.
  4. Add two or more consecutive sets of the same card-enabled type.
  5. At a wide publish panel width (>635px), confirm they appear side by side as cards.
  6. Resize the panel narrower than 635px and confirm they stack full width.
  7. With 3+ consecutive card sets and a panel wider than 935px, confirm a 3-column row.
  8. Collapse one card in a row and confirm siblings in that row collapse too (when multi-column).
  9. Drag cards to reorder and confirm order is preserved.
  10. Edit a Bard field’s sets in the blueprint and confirm Card layout is not shown; card sets in Bard behave as normal sets.

Shopify Draggable’s swap animation doesn’t work well with display: grid.
Handle conflict — The outer (vertical) sortable used the same handle class as the cards. Dragging a card handle started a row drag instead of a card drag.
Fix: Separate handles — sortable-row-handle for full-width sets (vertical moves), sortable-handle for cards (horizontal moves inside a group).
Lone card groups no longer use the inner horizontal sortable, so their
set handle drives the outer row sortable. Multi-card groups get a
dedicated row handle for moving the whole group vertically.
Apply inset picker styling to all sets in a multi-card group, including
the first and last cards. Hide the dashed entry connector for card rows
since the vertical handle replaces it.
(get the first replicator control above the card)
Move the --col-span override from the set list onto each card slot so
nested publish fields are reset without relying on the list wrapper.
Move grouping, connector, and collapse member logic into pure helpers
with Vitest coverage for column counts and row membership.
Observe the panel container width instead of slot offset comparisons so
parallel cards collapse together reliably, recover sort order from the
DOM when sortable emits duplicates, and wire the extracted card layout
helpers.
Show the card layout toggle only when editing Replicator sets, strip the
card flag from Bard blueprint saves, and ignore it in Bard runtime config.
Clarify the blueprint instructions copy.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant