Revamped InteractiveLayout based on grid module#15891
Draft
frederickobrien wants to merge 15 commits into
Draft
Conversation
frederickobrien
force-pushed
the
new-grid-based-interactive-layout
branch
from
4595911 to
94b78f8
Compare
frederickobrien
commented
May 19, 2026
| // Note, this class MUST be on the *direct parent* of the | ||
| // elements for some legacy interactive styling to work. | ||
| format.design === ArticleDesign.Interactive | ||
| format.design === ArticleDesign.Interactive && |
Contributor
Author
There was a problem hiding this comment.
Why this legacy class was still being applied: #3113
frederickobrien
force-pushed
the
new-grid-based-interactive-layout
branch
from
0c1d6dd to
f7b9ea8
Compare
frederickobrien
force-pushed
the
new-grid-based-interactive-layout
branch
from
f7b9ea8 to
bfb066d
Compare
|
Blocked behind a discussion of how interactives age (Mission: Janitor) |
frederickobrien
force-pushed
the
new-grid-based-interactive-layout
branch
from
9117280 to
ba2aa3a
Compare
frederickobrien
force-pushed
the
new-grid-based-interactive-layout
branch
from
c9dfd48 to
da367a6
Compare
frederickobrien
force-pushed
the
new-grid-based-interactive-layout
branch
from
da367a6 to
34d252e
Compare
Bye bye scrollbar-width
frederickobrien
force-pushed
the
new-grid-based-interactive-layout
branch
from
63eb9b4 to
95a129e
Compare
Contributor
Author
|
@copilot resolve the merge conflicts in this pull request |
…ctive-layout # Conflicts: # dotcom-rendering/src/layouts/InteractiveLayout.tsx
…t' into new-grid-based-interactive-layout
Merge conflicts resolved. The only conflict was |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of the grid module cinematic universe (see #15428 for context), this updates
InteractiveLayoutto use the grid module, and adjusts layout routing to send older pieces to the older setup.This is near identical to the implementation for
StandardLayoutsave for one key difference. Here the article body itself uses the same grid system. This is to allow for Ed Design in particular to create bespoke article layouts easily. I wonder if this is actually preferable even for non-interactive articles? We could snap elements to the grid rather than using hardcoded negative margins.The PR also does away with the legacy
content__main-column--interactiveclass on the article body, which had lingered longer than it probably should.Why
StandardLayout(if there's appetite for that)StandardLayoutthis will make it much easier to add new header/furniture arrangements as first class citizens of the platformsSwitchover
Discussion around how to handle older interactive articles is ongoing. This current working approach is to version the content section of the layout depending on date.
Some open questions:
Screenshots