Skip to content

Revamped InteractiveLayout based on grid module#15891

Draft
frederickobrien wants to merge 7 commits into
mainfrom
new-grid-based-interactive-layout
Draft

Revamped InteractiveLayout based on grid module#15891
frederickobrien wants to merge 7 commits into
mainfrom
new-grid-based-interactive-layout

Conversation

@frederickobrien
Copy link
Copy Markdown
Contributor

@frederickobrien frederickobrien commented May 15, 2026

Part of the grid module cinematic universe (see #15428 for context), this updates InteractiveLayout to use the grid module, and adjusts layout routing to send older pieces to the older setup.

This is near identical to the implementation for StandardLayout save 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--interactive class on the article body, which had lingered longer than it probably should.

Why

  • This makes the starting point for interactive articles normality, rather than a layout which more often than not needs to be rearranged by the atom itself. This will directly lead to less hacky boilerplate DOM manipulation code in interactive atoms, which I think everyone is in favour of
  • Aligns interactive articles with the Source design system and even opens the door to being merged with StandardLayout (if there's appetite for that)
  • Like StandardLayout this will make it much easier to add new header/furniture arrangements as first class citizens of the platforms

Switchover

Discussion around how to handle older interactive articles is ongoing. This initial approach creates a InteractiveLayoutDeprecated template for pre-switchover date (TBD) articles to be sent through.

Some open questions:

  • Do we want the most read sidebar to return?
  • Possible to toggle whether ads appear in the article body specifically?
  • Could/should/do we want to make InteractiveLayout and StandardLayout one and the same?
  • How do we set and hold a contract around data attributes, etc.

Screenshots

Before After
image image

@frederickobrien frederickobrien added the feature Departmental tracking: work on a new feature label May 15, 2026
@frederickobrien frederickobrien added this to the Interactives milestone May 15, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 15, 2026

@frederickobrien frederickobrien force-pushed the new-grid-based-interactive-layout branch from 4595911 to 94b78f8 Compare May 15, 2026 22:48
// 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 &&
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this legacy class was still being applied: #3113

@frederickobrien frederickobrien force-pushed the new-grid-based-interactive-layout branch from 0c1d6dd to f7b9ea8 Compare May 20, 2026 14:19
@frederickobrien frederickobrien force-pushed the new-grid-based-interactive-layout branch from f7b9ea8 to bfb066d Compare May 20, 2026 14:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Departmental tracking: work on a new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants