From 19c2c6ed69732810a44165a5adfe4f36834d7b73 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 15 May 2026 21:59:10 +0100 Subject: [PATCH 1/7] Rough first pass --- dotcom-rendering/src/components/SubMeta.tsx | 9 +- dotcom-rendering/src/layouts/DecideLayout.tsx | 61 +- .../src/layouts/FullPageInteractiveLayout.tsx | 2 +- .../src/layouts/InteractiveLayout.tsx | 910 ++++++++---------- .../layouts/InteractiveLayoutDeprecated.tsx | 836 ++++++++++++++++ .../src/layouts/lib/furnitureArrangements.ts | 106 ++ 6 files changed, 1416 insertions(+), 508 deletions(-) create mode 100644 dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx create mode 100644 dotcom-rendering/src/layouts/lib/furnitureArrangements.ts diff --git a/dotcom-rendering/src/components/SubMeta.tsx b/dotcom-rendering/src/components/SubMeta.tsx index 24d1b24196a..66546b9faa0 100644 --- a/dotcom-rendering/src/components/SubMeta.tsx +++ b/dotcom-rendering/src/components/SubMeta.tsx @@ -16,6 +16,7 @@ import type { BaseLinkType } from '../model/extract-nav'; import { palette } from '../palette'; import { Island } from './Island'; import { ShareButton } from './ShareButton.island'; +import { interactiveLayoutSwitchoverDate } from '../layouts/DecideLayout'; const labelStyles = (design: ArticleDesign): SerializedStyles => css` ${design === ArticleDesign.Gallery ? grid.column.centre : undefined}; @@ -224,13 +225,15 @@ export const SubMeta = ({ format.design !== ArticleDesign.Interactive && format.design !== ArticleDesign.Gallery; + const usesDeprecatedInteractiveLayout = + format.design === ArticleDesign.Interactive && + interactiveLayoutSwitchoverDate > new Date(); + return (
{ const notSupported = 
Not supported
; const format = { @@ -43,6 +46,7 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { }; const serverTime = article.serverTime; + const publicationDate = new Date(article.frontendData.webPublicationDate); switch (article.display) { case ArticleDisplay.Immersive: { @@ -116,15 +120,24 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { default: { switch (article.design) { case ArticleDesign.Interactive: - return ( - - ); - + if (publicationDate < interactiveLayoutSwitchoverDate) { + return ( + + ); + } else { + return ( + + ); + } case ArticleDesign.FullPageInteractive: { return ( { }; const serverTime = article.serverTime; + const publicationDate = new Date(article.frontendData.webPublicationDate); switch (article.display) { case ArticleDisplay.Immersive: { @@ -293,15 +307,26 @@ const DecideLayoutWeb = ({ article, NAV, renderingTarget }: WebProps) => { default: { switch (article.design) { case ArticleDesign.Interactive: - return ( - - ); + if (publicationDate < interactiveLayoutSwitchoverDate) { + return ( + + ); + } else { + return ( + + ); + } case ArticleDesign.FullPageInteractive: { return ( ( -
- {children} -
-); - -const maxWidth = css` - ${from.desktop} { - max-width: 620px; - } -`; +import { RoleType } from '../types/content'; +import { InteractivesScrollbarWidth } from '../components/InteractivesScrollbarWidth.island'; +import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.island'; +import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.island'; const stretchLines = css` ${until.phablet} { @@ -181,38 +75,63 @@ const stretchLines = css` } `; -export const temporaryBodyCopyColourOverride = css` - .content__main-column--interactive p { - /* stylelint-disable-next-line declaration-no-important */ - color: ${themePalette('--article-text')} !important; - } -`; +interface GridItemProps { + area: Area; + layoutType: LayoutType; + element?: 'div' | 'aside'; + customCss?: SerializedStyles; + children: React.ReactNode; +} -interface CommonProps { +const GridItem = ({ + area, + layoutType, + element: Element = 'div', + customCss, + children, +}: GridItemProps) => ( + + {children} + +); + +interface Props { article: ArticleDeprecated; format: ArticleFormat; renderingTarget: RenderingTarget; serverTime?: number; } -interface WebProps extends CommonProps { +interface WebProps extends Props { NAV: NavType; renderingTarget: 'Web'; } -interface AppsProps extends CommonProps { +interface AppProps extends Props { renderingTarget: 'Apps'; } -export const InteractiveLayout = (props: WebProps | AppsProps) => { +export const InteractiveLayout = (props: WebProps | AppProps) => { const { article, format, renderingTarget, serverTime } = props; const { config: { isPaidContent, host, hasSurveyAd }, editionId, } = article; - const isApps = renderingTarget === 'Apps'; const isWeb = renderingTarget === 'Web'; + const isApps = renderingTarget === 'Apps'; + + const showBodyEndSlot = + isWeb && + (parse(article.slotMachineFlags ?? '').showBodyEnd || + article.config.switches.slotBodyEnd); + + // TODO: + // 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render + // 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false. const showComments = article.isCommentable && !isPaidContent; @@ -247,367 +166,381 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { - )} - {article.isLegacyInteractive && ( - - )} {isWeb && ( - <> -
- {renderAds && ( - -
-
- -
-
- - )} - - tag.id)} - sectionId={article.config.section} - contentType={article.contentType} - /> -
- - {format.theme === ArticleSpecial.Labs && ( - +
+ {renderAds && ( +
- +
)} + tag.id)} + sectionId={article.config.section} + contentType={article.contentType} + /> +
+ )} - {renderAds && hasSurveyAd && ( - - )} - + {format.theme === ArticleSpecial.Labs && ( + +
+ +
+ + )} + + {isWeb && renderAds && hasSurveyAd && ( + )} +
+ {isApps && renderAds && ( + + + + )} -
-
+ + + - - -
- -
- - -
- + + + + + + + + +
+ {isWeb && + format.theme === ArticleSpecial.Labs && + format.design !== ArticleDesign.Video ? ( + + ) : ( + + )} +
+ {isApps ? ( + <> + + -
- - - {format.theme === ArticleSpecial.Labs ? ( - <> - ) : ( - - )} - - -
- -
- - - - - -
-
- -
-
- - -
- {isApps ? ( - <> - - - - - - - - ) : ( - - )} -
- - - - + + + - - - -
-
- -
-
- - + )} + + + ) : ( + + )} + + + {/* Only show Listen to Article button on App landscape views */} + {isApps && ( + +
+ + + +
+ + )} + + - -
-
-
- + + + )} + + {showBodyEndSlot && ( + + + + )} + + + + + -
- -
- -
+ > + + + + + + + {isWeb && renderAds && (
{ {article.storyPackage && (
{ webURL={article.webURL} /> - {showComments && (
{ '--article-section-background', )} borderColour={themePalette('--article-border')} - fontColour={themePalette('--article-section-title')} > {
)}
- - {isWeb && props.NAV.subNavSections && ( -
- - - -
- )} - {isWeb && ( <> + {props.NAV.subNavSections && ( +
+ + + +
+ )}
{ editionId={article.editionId} />
- { !!article.config.switches.remoteBanner } tags={article.tags} + host={host} /> @@ -817,19 +752,22 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { /> )} + {isApps && ( -
- - - -
+ <> +
+ + + +
+ )} ); diff --git a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx new file mode 100644 index 00000000000..cef71817073 --- /dev/null +++ b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx @@ -0,0 +1,836 @@ +import { css, Global } from '@emotion/react'; +import { + from, + palette as sourcePalette, + until, +} from '@guardian/source/foundations'; +import { Hide } from '@guardian/source/react-components'; +import { StraightLines } from '@guardian/source-development-kitchen/react-components'; +import type React from 'react'; +import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web'; +import { AppsFooter } from '../components/AppsFooter.island'; +import { ArticleBody } from '../components/ArticleBody'; +import { ArticleContainer } from '../components/ArticleContainer'; +import { ArticleHeadline } from '../components/ArticleHeadline'; +import { ArticleMetaApps } from '../components/ArticleMeta.apps'; +import { ArticleMeta } from '../components/ArticleMeta.web'; +import { ArticleTitle } from '../components/ArticleTitle'; +import { Border } from '../components/Border'; +import { Carousel } from '../components/Carousel.island'; +import { DecideLines } from '../components/DecideLines'; +import { DirectoryPageNav } from '../components/DirectoryPageNav'; +import { DiscussionLayout } from '../components/DiscussionLayout'; +import { Footer } from '../components/Footer'; +import { GridItem } from '../components/GridItem'; +import { HeaderAdSlot } from '../components/HeaderAdSlot'; +import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.island'; +import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.island'; +import { InteractivesScrollbarWidth } from '../components/InteractivesScrollbarWidth.island'; +import { Island } from '../components/Island'; +import { LabsHeader } from '../components/LabsHeader'; +import { MainMedia } from '../components/MainMedia'; +import { Masthead } from '../components/Masthead/Masthead'; +import { MostViewedFooterData } from '../components/MostViewedFooterData.island'; +import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout'; +import { OnwardsUpper } from '../components/OnwardsUpper.island'; +import { Section } from '../components/Section'; +import { SlotBodyEnd } from '../components/SlotBodyEnd.island'; +import { Standfirst } from '../components/Standfirst'; +import { StickyBottomBanner } from '../components/StickyBottomBanner.island'; +import { SubMeta } from '../components/SubMeta'; +import { SubNav } from '../components/SubNav.island'; +import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat'; +import { canRenderAds } from '../lib/canRenderAds'; +import { getContributionsServiceUrl } from '../lib/contributions'; +import { decideStoryPackageTrails } from '../lib/decideTrail'; +import type { NavType } from '../model/extract-nav'; +import { palette as themePalette } from '../palette'; +import type { ArticleDeprecated } from '../types/article'; +import type { RoleType } from '../types/content'; +import type { RenderingTarget } from '../types/renderingTarget'; +import { + interactiveGlobalStyles, + interactiveLegacyClasses, +} from './lib/interactiveLegacyStyling'; +import { BannerWrapper, Stuck } from './lib/stickiness'; + +const InteractiveGrid = ({ children }: { children: React.ReactNode }) => ( +
+ {children} +
+); + +const maxWidth = css` + ${from.desktop} { + max-width: 620px; + } +`; + +const stretchLines = css` + ${until.phablet} { + margin-left: -20px; + margin-right: -20px; + } + ${until.mobileLandscape} { + margin-left: -10px; + margin-right: -10px; + } +`; + +export const temporaryBodyCopyColourOverride = css` + .content__main-column--interactive p { + /* stylelint-disable-next-line declaration-no-important */ + color: ${themePalette('--article-text')} !important; + } +`; + +interface CommonProps { + article: ArticleDeprecated; + format: ArticleFormat; + renderingTarget: RenderingTarget; + serverTime?: number; +} + +interface WebProps extends CommonProps { + NAV: NavType; + renderingTarget: 'Web'; +} + +interface AppsProps extends CommonProps { + renderingTarget: 'Apps'; +} + +export const InteractiveLayoutDeprecated = (props: WebProps | AppsProps) => { + const { article, format, renderingTarget, serverTime } = props; + const { + config: { isPaidContent, host, hasSurveyAd }, + editionId, + } = article; + + const isApps = renderingTarget === 'Apps'; + const isWeb = renderingTarget === 'Web'; + + const showComments = article.isCommentable && !isPaidContent; + + const { branding } = article.commercialProperties[article.editionId]; + + const contributionsServiceUrl = getContributionsServiceUrl(article); + + const renderAds = canRenderAds(article); + + const includesFullWidthElement = article.blocks.some((block) => + block.elements.some((element) => { + const role = + 'role' in element + ? (element.role as RoleType | 'fullWidth' | undefined) + : undefined; + return role === 'fullWidth'; + }), + ); + + return ( + <> + {includesFullWidthElement && ( + + + + )} + {isApps && ( + <> + + + + + + + + + )} + {article.isLegacyInteractive && ( + + )} + {isWeb && ( + <> +
+ {renderAds && ( + +
+
+ +
+
+ + )} + + tag.id)} + sectionId={article.config.section} + contentType={article.contentType} + /> +
+ + {format.theme === ArticleSpecial.Labs && ( + +
+ +
+ + )} + + {renderAds && hasSurveyAd && ( + + )} + + )} +
+ +
+
+ + +
+ +
+ + +
+ +
+ + + {format.theme === ArticleSpecial.Labs ? ( + <> + ) : ( + + )} + + +
+ +
+ + + + + +
+
+ +
+
+ + +
+ {isApps ? ( + <> + + + + + + + + ) : ( + + )} +
+ + + + + + + +
+
+ +
+
+ + + +
+
+ +
+ +
+ +
+ +
+ + {isWeb && renderAds && ( +
+ +
+ )} + + {article.storyPackage && ( +
+ + + +
+ )} + + + + + + {showComments && ( +
+ +
+ )} + + {!isPaidContent && ( +
+ + + + + +
+ )} + + {isWeb && renderAds && ( +
+ +
+ )} +
+ + {isWeb && props.NAV.subNavSections && ( +
+ + + +
+ )} + + {isWeb && ( + <> +
+
+
+ + + + + + + + + )} + {isApps && ( +
+ + + +
+ )} + + ); +}; diff --git a/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts new file mode 100644 index 00000000000..d7e0409bfbf --- /dev/null +++ b/dotcom-rendering/src/layouts/lib/furnitureArrangements.ts @@ -0,0 +1,106 @@ +import { css, type SerializedStyles } from '@emotion/react'; +import { from, until } from '@guardian/source/foundations'; + +export type LayoutType = 'standard'; + +export type Area = + | 'title' + | 'headline' + | 'standfirst' + | 'main-media' + | 'meta' + | 'body' + | 'right-column'; + +type Breakpoint = 'mobile' | 'tablet' | 'desktop' | 'leftCol'; + +const breakpointQueries: Record = { + mobile: until.tablet, + tablet: from.tablet, + desktop: from.desktop, + leftCol: from.leftCol, +}; + +// Raw CSS overrides per area per breakpoint. Entries are only needed when an area +// deviates from the default: centre column, single-column mobile layout with areas +// in DOM order (main-media → title → headline → standfirst → meta → body → right-column). + +type AreaCss = Partial>; +type LayoutCssMap = Partial>; + +const standardCss: LayoutCssMap = { + title: { + tablet: 'grid-row: 1;', + leftCol: + 'grid-row: 1; grid-column: left-column-start / left-column-end;', + }, + headline: { + tablet: 'grid-row: 2;', + leftCol: 'grid-row: 1;', + }, + standfirst: { + tablet: 'grid-row: 3;', + leftCol: 'grid-row: 2;', + }, + 'main-media': { + tablet: 'grid-row: 4;', + leftCol: 'grid-row: 3;', + }, + meta: { + tablet: 'grid-row: 5;', + leftCol: + 'grid-row: 3 / span 2; grid-column: left-column-start / left-column-end;', + }, + body: { + tablet: 'grid-row: 6;', + leftCol: 'grid-row: 4;', + }, + 'right-column': { + desktop: + 'grid-row: 1 / span 6; grid-column: right-column-start / right-column-end;', + leftCol: + 'grid-row: 1 / span 4; grid-column: right-column-start / right-column-end;', + }, +}; + +const layoutCssMaps: Record = { + standard: standardCss, +}; + +/** + * Returns the Emotion CSS needed to position a single grid item — its + * default column, its row at each breakpoint, and any column overrides. + * The grid item _must_ be inside a {@link grid} module container. + * + * All items default to the centre column. Per-breakpoint overrides for + * `grid-row` and `grid-column` are applied on top via media queries, + * looked up from the plain CSS maps defined in this file. + * + * @param area - The named piece of article furniture to position (e.g. `'headline'`, `'body'`). + * @param layoutType - See {@link LayoutType}. Determines which CSS map to use for lookups. + * + * @example + * // In a React component: + *
+ */ +export const gridItemCss = ( + area: Area, + layoutType: LayoutType, +): SerializedStyles => { + const areaOverrides = layoutCssMaps[layoutType][area] ?? {}; + + const breakpointCss = Object.entries(areaOverrides).map( + ([bp, styles]) => css` + ${breakpointQueries[bp as Breakpoint]} { + ${styles} + } + `, + ); + + // All items default to the centre column; breakpoint entries above + // override grid-row and grid-column as needed. + return css` + grid-column: centre-column-start / centre-column-end; + ${breakpointCss} + `; +}; From 3bb9a9712aa010ea4415e1f42d9a21c3919c0655 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 15 May 2026 22:35:55 +0100 Subject: [PATCH 2/7] Combine into one InteractiveLayout --- dotcom-rendering/src/layouts/DecideLayout.tsx | 62 +- .../src/layouts/FullPageInteractiveLayout.tsx | 2 +- .../src/layouts/InteractiveLayout.tsx | 1083 ++++++++++++----- .../layouts/InteractiveLayoutDeprecated.tsx | 836 ------------- dotcom-rendering/src/lib/ArticleRenderer.tsx | 1 + 5 files changed, 786 insertions(+), 1198 deletions(-) delete mode 100644 dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx diff --git a/dotcom-rendering/src/layouts/DecideLayout.tsx b/dotcom-rendering/src/layouts/DecideLayout.tsx index 63cd2351233..eb6bbb6d4c6 100644 --- a/dotcom-rendering/src/layouts/DecideLayout.tsx +++ b/dotcom-rendering/src/layouts/DecideLayout.tsx @@ -12,7 +12,6 @@ import { HostedGalleryLayout } from './HostedGalleryLayout'; import { HostedVideoLayout } from './HostedVideoLayout'; import { ImmersiveLayout } from './ImmersiveLayout'; import { InteractiveLayout } from './InteractiveLayout'; -import { InteractiveLayoutDeprecated } from './InteractiveLayoutDeprecated'; import { LiveLayout } from './LiveLayout'; import { NewsletterSignupLayout } from './NewsletterSignupLayout'; import { PictureLayout } from './PictureLayout'; @@ -120,24 +119,17 @@ const DecideLayoutApps = ({ article, renderingTarget }: AppProps) => { default: { switch (article.design) { case ArticleDesign.Interactive: - if (publicationDate < interactiveLayoutSwitchoverDate) { - return ( - - ); - } else { - return ( - - ); - } + return ( + + ); case ArticleDesign.FullPageInteractive: { return ( { default: { switch (article.design) { case ArticleDesign.Interactive: - if (publicationDate < interactiveLayoutSwitchoverDate) { - return ( - - ); - } else { - return ( - - ); - } + return ( + + ); case ArticleDesign.FullPageInteractive: { return ( ); -interface Props { +interface NewArticleGridProps { + article: ArticleDeprecated; + format: ArticleFormat; + branding: Branding | undefined; + contributionsServiceUrl: string; + isApps: boolean; + isWeb: boolean; + renderAds: boolean; + showBodyEndSlot: boolean; + host: string | undefined; +} + +const ArticleGrid = ({ + article, + format, + branding, + contributionsServiceUrl, + isApps, + isWeb, + renderAds, + showBodyEndSlot, + host, +}: NewArticleGridProps) => ( + /* GridItem order matters — mobile layout relies on DOM order for grid placement. + See furnitureArrangements.ts if reordering. */ +
+ + + + + + + + + + + + + +
+ {isWeb && + format.theme === ArticleSpecial.Labs && + format.design !== ArticleDesign.Video ? ( + + ) : ( + + )} +
+ {isApps ? ( + <> + + + + + + {!!article.affiliateLinksDisclaimer && ( + + )} + + + ) : ( + + )} + + + {/* Only show Listen to Article button on App landscape views */} + {isApps && ( + +
+ + + +
+ + )} + + + + {isApps && ( + + + + )} + + {showBodyEndSlot && ( + + + + )} + + + + + + + + + + + +
+); + +// --------------------------------------------------------------------------- +// Main layout +// --------------------------------------------------------------------------- + +interface CommonProps { article: ArticleDeprecated; format: ArticleFormat; renderingTarget: RenderingTarget; serverTime?: number; + useDeprecatedGrid?: boolean; } -interface WebProps extends Props { +interface WebProps extends CommonProps { NAV: NavType; renderingTarget: 'Web'; } -interface AppProps extends Props { +interface AppsProps extends CommonProps { renderingTarget: 'Apps'; } -export const InteractiveLayout = (props: WebProps | AppProps) => { - const { article, format, renderingTarget, serverTime } = props; +export const InteractiveLayout = (props: WebProps | AppsProps) => { + const { article, format, renderingTarget, serverTime, useDeprecatedGrid } = + props; const { config: { isPaidContent, host, hasSurveyAd }, editionId, } = article; - const isWeb = renderingTarget === 'Web'; const isApps = renderingTarget === 'Apps'; + const isWeb = renderingTarget === 'Web'; const showBodyEndSlot = isWeb && - (parse(article.slotMachineFlags ?? '').showBodyEnd || - article.config.switches.slotBodyEnd); - - // TODO: - // 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render - // 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false. + ((parse(article.slotMachineFlags ?? '').showBodyEnd || + article.config.switches.slotBodyEnd) ?? + false); const showComments = article.isCommentable && !isPaidContent; @@ -166,8 +460,15 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { + {useDeprecatedGrid && ( + + )} )} + {useDeprecatedGrid && article.isLegacyInteractive && ( + + )} + {isWeb && (
{renderAds && ( @@ -191,9 +492,10 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { discussionApiUrl={article.config.discussionApiUrl} idApiUrl={article.config.idApiUrl} contributionsServiceUrl={contributionsServiceUrl} - showSubNav={true} - showSlimNav={false} - hasPageSkinContentSelfConstrain={true} + showSubNav={!useDeprecatedGrid} + showSlimNav={useDeprecatedGrid} + hasPageSkin={useDeprecatedGrid ? false : undefined} + hasPageSkinContentSelfConstrain={!useDeprecatedGrid} pageId={article.pageId} tagIds={article.tags.map((tag) => tag.id)} sectionId={article.config.section} @@ -210,7 +512,7 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { backgroundColour={sourcePalette.labs[400]} borderColour={sourcePalette.neutral[60]} sectionId="labs-header" - element="aside" + element={useDeprecatedGrid ? undefined : 'aside'} > @@ -222,7 +524,7 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { )}
- {isApps && renderAds && ( + {isApps && renderAds && !useDeprecatedGrid && ( @@ -231,265 +533,107 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { pageId={article.pageId} pageTags={article.tags} /> - {/* GridItem order matters — mobile layout relies on DOM order for grid placement. - See furnitureArrangements.ts if reordering. */} -
- - - - + ) : ( + + )} + + {/* SlotBodyEnd is handled inside NewArticleGrid for the new layout. + For the deprecated layout it lives here, matching the original structure. */} + {useDeprecatedGrid && ( +
- - - - - - - - - -
- {isWeb && - format.theme === ArticleSpecial.Labs && - format.design !== ArticleDesign.Video ? ( - - ) : ( - + + - )} +
- {isApps ? ( - <> - - - - - - {!!article.affiliateLinksDisclaimer && ( - - )} - - - ) : ( - - )} - - - {/* Only show Listen to Article button on App landscape views */} - {isApps && ( - -
- - - -
- - )} - - - - {isApps && ( - - - - )} +
+ )} - {showBodyEndSlot && ( - - - + {useDeprecatedGrid && ( + <> +
+
+
{ webUrl={article.webURL} webTitle={article.webTitle} showBottomSocialButtons={ - article.showBottomSocialButtons && - renderingTarget === 'Web' + article.showBottomSocialButtons && isWeb } /> - - - - - - - - - -
+ + + )} {isWeb && renderAds && (
{ {article.storyPackage && (
{ webURL={article.webURL} /> + {showComments && (
{ '--article-section-background', )} borderColour={themePalette('--article-border')} + fontColour={ + useDeprecatedGrid + ? themePalette('--article-section-title') + : undefined + } > {
)}
+ {isWeb && ( <> {props.NAV.subNavSections && ( @@ -741,7 +860,7 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { !!article.config.switches.remoteBanner } tags={article.tags} - host={host} + host={useDeprecatedGrid ? undefined : host} /> @@ -754,21 +873,341 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { )} {isApps && ( - <> -
- - - -
- +
+ + + +
)} ); }; + +// Temporary override until deprecated interactive articles are migrated to the +// new grid. Can be removed once useDeprecatedGrid is no longer needed. +export const temporaryBodyCopyColourOverride = css` + .content__main-column--interactive p { + /* stylelint-disable-next-line declaration-no-important */ + color: ${themePalette('--article-text')} !important; + } +`; + +// --------------------------------------------------------------------------- +// Deprecated grid (pre-switchover articles) +// --------------------------------------------------------------------------- + +const deprecatedMaxWidth = css` + ${from.desktop} { + max-width: 620px; + } +`; + +const DeprecatedInteractiveGridWrapper = ({ + children, +}: { + children: React.ReactNode; +}) => ( +
+ {children} +
+); + +interface DeprecatedArticleGridProps { + article: ArticleDeprecated; + format: ArticleFormat; + branding: Branding | undefined; + contributionsServiceUrl: string; + isApps: boolean; + host: string | undefined; +} + +const DeprecatedArticleGrid = ({ + article, + format, + branding, + contributionsServiceUrl, + isApps, + host, +}: DeprecatedArticleGridProps) => ( +
+
+ + +
+ +
+ + +
+ +
+ + + {format.theme === ArticleSpecial.Labs ? <> : } + + +
+ +
+ + + + + +
+
+ +
+
+ + +
+ {isApps ? ( + <> + + + + + + + + ) : ( + + )} +
+ + + + + + + +
+
+); diff --git a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx deleted file mode 100644 index cef71817073..00000000000 --- a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx +++ /dev/null @@ -1,836 +0,0 @@ -import { css, Global } from '@emotion/react'; -import { - from, - palette as sourcePalette, - until, -} from '@guardian/source/foundations'; -import { Hide } from '@guardian/source/react-components'; -import { StraightLines } from '@guardian/source-development-kitchen/react-components'; -import type React from 'react'; -import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web'; -import { AppsFooter } from '../components/AppsFooter.island'; -import { ArticleBody } from '../components/ArticleBody'; -import { ArticleContainer } from '../components/ArticleContainer'; -import { ArticleHeadline } from '../components/ArticleHeadline'; -import { ArticleMetaApps } from '../components/ArticleMeta.apps'; -import { ArticleMeta } from '../components/ArticleMeta.web'; -import { ArticleTitle } from '../components/ArticleTitle'; -import { Border } from '../components/Border'; -import { Carousel } from '../components/Carousel.island'; -import { DecideLines } from '../components/DecideLines'; -import { DirectoryPageNav } from '../components/DirectoryPageNav'; -import { DiscussionLayout } from '../components/DiscussionLayout'; -import { Footer } from '../components/Footer'; -import { GridItem } from '../components/GridItem'; -import { HeaderAdSlot } from '../components/HeaderAdSlot'; -import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.island'; -import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.island'; -import { InteractivesScrollbarWidth } from '../components/InteractivesScrollbarWidth.island'; -import { Island } from '../components/Island'; -import { LabsHeader } from '../components/LabsHeader'; -import { MainMedia } from '../components/MainMedia'; -import { Masthead } from '../components/Masthead/Masthead'; -import { MostViewedFooterData } from '../components/MostViewedFooterData.island'; -import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout'; -import { OnwardsUpper } from '../components/OnwardsUpper.island'; -import { Section } from '../components/Section'; -import { SlotBodyEnd } from '../components/SlotBodyEnd.island'; -import { Standfirst } from '../components/Standfirst'; -import { StickyBottomBanner } from '../components/StickyBottomBanner.island'; -import { SubMeta } from '../components/SubMeta'; -import { SubNav } from '../components/SubNav.island'; -import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat'; -import { canRenderAds } from '../lib/canRenderAds'; -import { getContributionsServiceUrl } from '../lib/contributions'; -import { decideStoryPackageTrails } from '../lib/decideTrail'; -import type { NavType } from '../model/extract-nav'; -import { palette as themePalette } from '../palette'; -import type { ArticleDeprecated } from '../types/article'; -import type { RoleType } from '../types/content'; -import type { RenderingTarget } from '../types/renderingTarget'; -import { - interactiveGlobalStyles, - interactiveLegacyClasses, -} from './lib/interactiveLegacyStyling'; -import { BannerWrapper, Stuck } from './lib/stickiness'; - -const InteractiveGrid = ({ children }: { children: React.ReactNode }) => ( -
- {children} -
-); - -const maxWidth = css` - ${from.desktop} { - max-width: 620px; - } -`; - -const stretchLines = css` - ${until.phablet} { - margin-left: -20px; - margin-right: -20px; - } - ${until.mobileLandscape} { - margin-left: -10px; - margin-right: -10px; - } -`; - -export const temporaryBodyCopyColourOverride = css` - .content__main-column--interactive p { - /* stylelint-disable-next-line declaration-no-important */ - color: ${themePalette('--article-text')} !important; - } -`; - -interface CommonProps { - article: ArticleDeprecated; - format: ArticleFormat; - renderingTarget: RenderingTarget; - serverTime?: number; -} - -interface WebProps extends CommonProps { - NAV: NavType; - renderingTarget: 'Web'; -} - -interface AppsProps extends CommonProps { - renderingTarget: 'Apps'; -} - -export const InteractiveLayoutDeprecated = (props: WebProps | AppsProps) => { - const { article, format, renderingTarget, serverTime } = props; - const { - config: { isPaidContent, host, hasSurveyAd }, - editionId, - } = article; - - const isApps = renderingTarget === 'Apps'; - const isWeb = renderingTarget === 'Web'; - - const showComments = article.isCommentable && !isPaidContent; - - const { branding } = article.commercialProperties[article.editionId]; - - const contributionsServiceUrl = getContributionsServiceUrl(article); - - const renderAds = canRenderAds(article); - - const includesFullWidthElement = article.blocks.some((block) => - block.elements.some((element) => { - const role = - 'role' in element - ? (element.role as RoleType | 'fullWidth' | undefined) - : undefined; - return role === 'fullWidth'; - }), - ); - - return ( - <> - {includesFullWidthElement && ( - - - - )} - {isApps && ( - <> - - - - - - - - - )} - {article.isLegacyInteractive && ( - - )} - {isWeb && ( - <> -
- {renderAds && ( - -
-
- -
-
- - )} - - tag.id)} - sectionId={article.config.section} - contentType={article.contentType} - /> -
- - {format.theme === ArticleSpecial.Labs && ( - -
- -
- - )} - - {renderAds && hasSurveyAd && ( - - )} - - )} -
- -
-
- - -
- -
- - -
- -
- - - {format.theme === ArticleSpecial.Labs ? ( - <> - ) : ( - - )} - - -
- -
- - - - - -
-
- -
-
- - -
- {isApps ? ( - <> - - - - - - - - ) : ( - - )} -
- - - - - - - -
-
- -
-
- - - -
-
- -
- -
- -
- -
- - {isWeb && renderAds && ( -
- -
- )} - - {article.storyPackage && ( -
- - - -
- )} - - - - - - {showComments && ( -
- -
- )} - - {!isPaidContent && ( -
- - - - - -
- )} - - {isWeb && renderAds && ( -
- -
- )} -
- - {isWeb && props.NAV.subNavSections && ( -
- - - -
- )} - - {isWeb && ( - <> -
-
-
- - - - - - - - - )} - {isApps && ( -
- - - -
- )} - - ); -}; diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index 20cc9d78058..99c259a8f60 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -118,6 +118,7 @@ export const ArticleRenderer = ({ ? interactiveLegacyClasses.contentMainColumn : '', ].join(' ')} + // TODO: Conditionally apply grid for interactives? css={[commercialPosition, spacefinderAdStyles]} > {renderingTarget === 'Apps' From 23883af489b2110d0ee90d2667386fe603b84d19 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 15 May 2026 23:09:22 +0100 Subject: [PATCH 3/7] Gridception --- .../src/components/ArticleBody.tsx | 3 ++ .../src/layouts/InteractiveLayout.tsx | 50 ++++++++++++------- .../src/layouts/lib/furnitureArrangements.ts | 4 +- dotcom-rendering/src/lib/ArticleRenderer.tsx | 17 ++++++- dotcom-rendering/src/lib/renderElement.tsx | 3 ++ 5 files changed, 57 insertions(+), 20 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleBody.tsx b/dotcom-rendering/src/components/ArticleBody.tsx index 380c74b692a..6404dfc7f6c 100644 --- a/dotcom-rendering/src/components/ArticleBody.tsx +++ b/dotcom-rendering/src/components/ArticleBody.tsx @@ -58,6 +58,7 @@ type Props = { serverTime?: number; idApiUrl?: string; accentColor?: string; + isShinyNewInteractiveLayout?: boolean; }; const globalOlStyles = () => css` @@ -165,6 +166,7 @@ export const ArticleBody = ({ serverTime, idApiUrl, accentColor, + isShinyNewInteractiveLayout = false, }: Props) => { const isInteractiveContent = format.design === ArticleDesign.Interactive || @@ -292,6 +294,7 @@ export const ArticleBody = ({ contributionsServiceUrl={contributionsServiceUrl} shouldHideAds={shouldHideAds} idApiUrl={idApiUrl} + isShinyNewInteractiveLayout={isShinyNewInteractiveLayout} />
{hasObserverPublicationTag && } diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index f435947503e..c4e90bdc334 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -307,6 +307,7 @@ const ArticleGrid = ({ editionId={article.editionId} shouldHideAds={article.shouldHideAds} idApiUrl={article.config.idApiUrl} + isShinyNewInteractiveLayout={true} /> {isApps && ( @@ -338,25 +339,38 @@ const ArticleGrid = ({ /> )} - - + > +
+ + +
+
{ const isSectionedMiniProfilesArticle = elements.filter( @@ -90,6 +93,7 @@ export const ArticleRenderer = ({ isSectionedMiniProfilesArticle={isSectionedMiniProfilesArticle} shouldHideAds={shouldHideAds} idApiUrl={idApiUrl} + isShinyNewInteractiveLayout={isShinyNewInteractiveLayout} /> ); }); @@ -106,6 +110,13 @@ export const ArticleRenderer = ({ // ^^ Until we decide where to do the "isomorphism split" in this this code is not safe here. // But should be soon. + const interactiveLayoutCSS = css` + ${grid.container} + > * { + ${grid.column.centre} + } + `; + return (
{renderingTarget === 'Apps' ? renderedElements diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx index cdfc0982545..1ec2f83de76 100644 --- a/dotcom-rendering/src/lib/renderElement.tsx +++ b/dotcom-rendering/src/lib/renderElement.tsx @@ -103,6 +103,7 @@ type Props = { contentType?: string; contentLayout?: string; idApiUrl?: string; + isShinyNewInteractiveLayout?: boolean; }; // updateRole modifies the role of an element in a way appropriate for most @@ -175,6 +176,7 @@ export const renderElement = ({ contentType, contentLayout, idApiUrl, + isShinyNewInteractiveLayout = false, }: Props) => { const isBlog = format.design === ArticleDesign.LiveBlog || @@ -1038,6 +1040,7 @@ export const RenderArticleElement = ({ contentType, contentLayout, idApiUrl, + isShinyNewInteractiveLayout = false, }: Props) => { const withUpdatedRole = updateRole(element, format); From 50d41e7b45b8315dd1ee9066f6f9943a7a7e5ba9 Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Fri, 15 May 2026 23:33:16 +0100 Subject: [PATCH 4/7] Separate out two layouts again --- dotcom-rendering/src/components/SubMeta.tsx | 9 +- dotcom-rendering/src/layouts/DecideLayout.tsx | 62 +- .../src/layouts/FullPageInteractiveLayout.tsx | 2 +- .../src/layouts/InteractiveLayout.tsx | 1134 +++++------------ .../layouts/InteractiveLayoutDeprecated.tsx | 837 ++++++++++++ dotcom-rendering/src/lib/ArticleRenderer.tsx | 3 +- dotcom-rendering/src/lib/renderElement.tsx | 3 - 7 files changed, 1232 insertions(+), 818 deletions(-) create mode 100644 dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx diff --git a/dotcom-rendering/src/components/SubMeta.tsx b/dotcom-rendering/src/components/SubMeta.tsx index 66546b9faa0..8f594eab135 100644 --- a/dotcom-rendering/src/components/SubMeta.tsx +++ b/dotcom-rendering/src/components/SubMeta.tsx @@ -16,7 +16,6 @@ import type { BaseLinkType } from '../model/extract-nav'; import { palette } from '../palette'; import { Island } from './Island'; import { ShareButton } from './ShareButton.island'; -import { interactiveLayoutSwitchoverDate } from '../layouts/DecideLayout'; const labelStyles = (design: ArticleDesign): SerializedStyles => css` ${design === ArticleDesign.Gallery ? grid.column.centre : undefined}; @@ -130,6 +129,7 @@ type Props = { webUrl: string; webTitle: string; showBottomSocialButtons: boolean; + isDeprecatedInteractiveLayout?: boolean; }; const syndicationButtonOverrides = css` @@ -205,6 +205,7 @@ export const SubMeta = ({ webUrl, webTitle, showBottomSocialButtons, + isDeprecatedInteractiveLayout = false, }: Props) => { const createLinks = () => { const links: BaseLinkType[] = []; @@ -225,15 +226,11 @@ export const SubMeta = ({ format.design !== ArticleDesign.Interactive && format.design !== ArticleDesign.Gallery; - const usesDeprecatedInteractiveLayout = - format.design === ArticleDesign.Interactive && - interactiveLayoutSwitchoverDate > new Date(); - return (
{ default: { switch (article.design) { case ArticleDesign.Interactive: - return ( - - ); + if (publicationDate < interactiveLayoutSwitchoverDate) { + return ( + + ); + } else { + return ( + + ); + } case ArticleDesign.FullPageInteractive: { return ( { default: { switch (article.design) { case ArticleDesign.Interactive: - return ( - - ); + if (publicationDate < interactiveLayoutSwitchoverDate) { + return ( + + ); + } else { + return ( + + ); + } case ArticleDesign.FullPageInteractive: { return ( ); -interface NewArticleGridProps { - article: ArticleDeprecated; - format: ArticleFormat; - branding: Branding | undefined; - contributionsServiceUrl: string; - isApps: boolean; - isWeb: boolean; - renderAds: boolean; - showBodyEndSlot: boolean; - host: string | undefined; -} - -const ArticleGrid = ({ - article, - format, - branding, - contributionsServiceUrl, - isApps, - isWeb, - renderAds, - showBodyEndSlot, - host, -}: NewArticleGridProps) => ( - /* GridItem order matters — mobile layout relies on DOM order for grid placement. - See furnitureArrangements.ts if reordering. */ -
- - - - - - - - - - - - - -
- {isWeb && - format.theme === ArticleSpecial.Labs && - format.design !== ArticleDesign.Video ? ( - - ) : ( - - )} -
- {isApps ? ( - <> - - - - - - {!!article.affiliateLinksDisclaimer && ( - - )} - - - ) : ( - - )} - - - {/* Only show Listen to Article button on App landscape views */} - {isApps && ( - -
- - - -
- - )} - - - - {isApps && ( - - - - )} - - {showBodyEndSlot && ( - - - - )} -
-
- - -
-
- - - - - - - - - -
-); - -// --------------------------------------------------------------------------- -// Main layout -// --------------------------------------------------------------------------- - -interface CommonProps { +interface Props { article: ArticleDeprecated; format: ArticleFormat; renderingTarget: RenderingTarget; serverTime?: number; - useDeprecatedGrid?: boolean; } -interface WebProps extends CommonProps { +interface WebProps extends Props { NAV: NavType; renderingTarget: 'Web'; } -interface AppsProps extends CommonProps { +interface AppProps extends Props { renderingTarget: 'Apps'; } -export const InteractiveLayout = (props: WebProps | AppsProps) => { - const { article, format, renderingTarget, serverTime, useDeprecatedGrid } = - props; +export const InteractiveLayout = (props: WebProps | AppProps) => { + const { article, format, renderingTarget, serverTime } = props; const { config: { isPaidContent, host, hasSurveyAd }, editionId, } = article; - const isApps = renderingTarget === 'Apps'; const isWeb = renderingTarget === 'Web'; + const isApps = renderingTarget === 'Apps'; const showBodyEndSlot = isWeb && - ((parse(article.slotMachineFlags ?? '').showBodyEnd || - article.config.switches.slotBodyEnd) ?? - false); + (parse(article.slotMachineFlags ?? '').showBodyEnd || + article.config.switches.slotBodyEnd); + + // TODO: + // 1) Read 'forceEpic' value from URL parameter and use it to force the slot to render + // 2) Otherwise, ensure slot only renders if `article.config.shouldHideReaderRevenue` equals false. const showComments = article.isCommentable && !isPaidContent; @@ -474,15 +166,8 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { - {useDeprecatedGrid && ( - - )} )} - {useDeprecatedGrid && article.isLegacyInteractive && ( - - )} - {isWeb && (
{renderAds && ( @@ -506,10 +191,9 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { discussionApiUrl={article.config.discussionApiUrl} idApiUrl={article.config.idApiUrl} contributionsServiceUrl={contributionsServiceUrl} - showSubNav={!useDeprecatedGrid} - showSlimNav={useDeprecatedGrid} - hasPageSkin={useDeprecatedGrid ? false : undefined} - hasPageSkinContentSelfConstrain={!useDeprecatedGrid} + showSubNav={true} + showSlimNav={false} + hasPageSkinContentSelfConstrain={true} pageId={article.pageId} tagIds={article.tags.map((tag) => tag.id)} sectionId={article.config.section} @@ -526,7 +210,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { backgroundColour={sourcePalette.labs[400]} borderColour={sourcePalette.neutral[60]} sectionId="labs-header" - element={useDeprecatedGrid ? undefined : 'aside'} + element="aside" > @@ -538,7 +222,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { )}
- {isApps && renderAds && !useDeprecatedGrid && ( + {isApps && renderAds && ( @@ -547,125 +231,337 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { pageId={article.pageId} pageTags={article.tags} /> + {/* GridItem order matters — mobile layout relies on DOM order for grid placement. + See furnitureArrangements.ts if reordering. */} +
+ + + + + + + + + + + + + +
+ {isWeb && + format.theme === ArticleSpecial.Labs && + format.design !== ArticleDesign.Video ? ( + + ) : ( + + )} +
+ {isApps ? ( + <> + + + + + + {!!article.affiliateLinksDisclaimer && ( + + )} + + + ) : ( + + )} + + + {/* Only show Listen to Article button on App landscape views */} + {isApps && ( + +
+ + + +
+ + )} + + - {useDeprecatedGrid ? ( - - ) : ( - - )} + {isApps && ( + + + + )} - {/* SlotBodyEnd is handled inside NewArticleGrid for the new layout. - For the deprecated layout it lives here, matching the original structure. */} - {useDeprecatedGrid && ( -
+ + + )} +
+
+ + +
+
+ + + -
+ - -
-
- )} - - {useDeprecatedGrid && ( - <> -
- -
-
- -
- - )} + + +
{isWeb && renderAds && (
{ {article.storyPackage && (
{ webURL={article.webURL} /> - {showComments && (
{ '--article-section-background', )} borderColour={themePalette('--article-border')} - fontColour={ - useDeprecatedGrid - ? themePalette('--article-section-title') - : undefined - } > {
)}
- {isWeb && ( <> {props.NAV.subNavSections && ( @@ -874,7 +762,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { !!article.config.switches.remoteBanner } tags={article.tags} - host={useDeprecatedGrid ? undefined : host} + host={host} /> @@ -887,341 +775,21 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => { )} {isApps && ( -
- - - -
+ <> +
+ + + +
+ )} ); }; - -// Temporary override until deprecated interactive articles are migrated to the -// new grid. Can be removed once useDeprecatedGrid is no longer needed. -export const temporaryBodyCopyColourOverride = css` - .content__main-column--interactive p { - /* stylelint-disable-next-line declaration-no-important */ - color: ${themePalette('--article-text')} !important; - } -`; - -// --------------------------------------------------------------------------- -// Deprecated grid (pre-switchover articles) -// --------------------------------------------------------------------------- - -const deprecatedMaxWidth = css` - ${from.desktop} { - max-width: 620px; - } -`; - -const DeprecatedInteractiveGridWrapper = ({ - children, -}: { - children: React.ReactNode; -}) => ( -
- {children} -
-); - -interface DeprecatedArticleGridProps { - article: ArticleDeprecated; - format: ArticleFormat; - branding: Branding | undefined; - contributionsServiceUrl: string; - isApps: boolean; - host: string | undefined; -} - -const DeprecatedArticleGrid = ({ - article, - format, - branding, - contributionsServiceUrl, - isApps, - host, -}: DeprecatedArticleGridProps) => ( -
-
- - -
- -
- - -
- -
- - - {format.theme === ArticleSpecial.Labs ? <> : } - - -
- -
- - - - - -
-
- -
-
- - -
- {isApps ? ( - <> - - - - - - - - ) : ( - - )} -
- - - - - - - -
-
-); diff --git a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx new file mode 100644 index 00000000000..b75a8b2a2be --- /dev/null +++ b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx @@ -0,0 +1,837 @@ +import { css, Global } from '@emotion/react'; +import { + from, + palette as sourcePalette, + until, +} from '@guardian/source/foundations'; +import { Hide } from '@guardian/source/react-components'; +import { StraightLines } from '@guardian/source-development-kitchen/react-components'; +import type React from 'react'; +import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web'; +import { AppsFooter } from '../components/AppsFooter.island'; +import { ArticleBody } from '../components/ArticleBody'; +import { ArticleContainer } from '../components/ArticleContainer'; +import { ArticleHeadline } from '../components/ArticleHeadline'; +import { ArticleMetaApps } from '../components/ArticleMeta.apps'; +import { ArticleMeta } from '../components/ArticleMeta.web'; +import { ArticleTitle } from '../components/ArticleTitle'; +import { Border } from '../components/Border'; +import { Carousel } from '../components/Carousel.island'; +import { DecideLines } from '../components/DecideLines'; +import { DirectoryPageNav } from '../components/DirectoryPageNav'; +import { DiscussionLayout } from '../components/DiscussionLayout'; +import { Footer } from '../components/Footer'; +import { GridItem } from '../components/GridItem'; +import { HeaderAdSlot } from '../components/HeaderAdSlot'; +import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.island'; +import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.island'; +import { InteractivesScrollbarWidth } from '../components/InteractivesScrollbarWidth.island'; +import { Island } from '../components/Island'; +import { LabsHeader } from '../components/LabsHeader'; +import { MainMedia } from '../components/MainMedia'; +import { Masthead } from '../components/Masthead/Masthead'; +import { MostViewedFooterData } from '../components/MostViewedFooterData.island'; +import { MostViewedFooterLayout } from '../components/MostViewedFooterLayout'; +import { OnwardsUpper } from '../components/OnwardsUpper.island'; +import { Section } from '../components/Section'; +import { SlotBodyEnd } from '../components/SlotBodyEnd.island'; +import { Standfirst } from '../components/Standfirst'; +import { StickyBottomBanner } from '../components/StickyBottomBanner.island'; +import { SubMeta } from '../components/SubMeta'; +import { SubNav } from '../components/SubNav.island'; +import { type ArticleFormat, ArticleSpecial } from '../lib/articleFormat'; +import { canRenderAds } from '../lib/canRenderAds'; +import { getContributionsServiceUrl } from '../lib/contributions'; +import { decideStoryPackageTrails } from '../lib/decideTrail'; +import type { NavType } from '../model/extract-nav'; +import { palette as themePalette } from '../palette'; +import type { ArticleDeprecated } from '../types/article'; +import type { RoleType } from '../types/content'; +import type { RenderingTarget } from '../types/renderingTarget'; +import { + interactiveGlobalStyles, + interactiveLegacyClasses, +} from './lib/interactiveLegacyStyling'; +import { BannerWrapper, Stuck } from './lib/stickiness'; + +const InteractiveGrid = ({ children }: { children: React.ReactNode }) => ( +
+ {children} +
+); + +const maxWidth = css` + ${from.desktop} { + max-width: 620px; + } +`; + +const stretchLines = css` + ${until.phablet} { + margin-left: -20px; + margin-right: -20px; + } + ${until.mobileLandscape} { + margin-left: -10px; + margin-right: -10px; + } +`; + +export const temporaryBodyCopyColourOverride = css` + .content__main-column--interactive p { + /* stylelint-disable-next-line declaration-no-important */ + color: ${themePalette('--article-text')} !important; + } +`; + +interface CommonProps { + article: ArticleDeprecated; + format: ArticleFormat; + renderingTarget: RenderingTarget; + serverTime?: number; +} + +interface WebProps extends CommonProps { + NAV: NavType; + renderingTarget: 'Web'; +} + +interface AppsProps extends CommonProps { + renderingTarget: 'Apps'; +} + +export const InteractiveLayoutDeprecated = (props: WebProps | AppsProps) => { + const { article, format, renderingTarget, serverTime } = props; + const { + config: { isPaidContent, host, hasSurveyAd }, + editionId, + } = article; + + const isApps = renderingTarget === 'Apps'; + const isWeb = renderingTarget === 'Web'; + + const showComments = article.isCommentable && !isPaidContent; + + const { branding } = article.commercialProperties[article.editionId]; + + const contributionsServiceUrl = getContributionsServiceUrl(article); + + const renderAds = canRenderAds(article); + + const includesFullWidthElement = article.blocks.some((block) => + block.elements.some((element) => { + const role = + 'role' in element + ? (element.role as RoleType | 'fullWidth' | undefined) + : undefined; + return role === 'fullWidth'; + }), + ); + + return ( + <> + {includesFullWidthElement && ( + + + + )} + {isApps && ( + <> + + + + + + + + + )} + {article.isLegacyInteractive && ( + + )} + {isWeb && ( + <> +
+ {renderAds && ( + +
+
+ +
+
+ + )} + + tag.id)} + sectionId={article.config.section} + contentType={article.contentType} + /> +
+ + {format.theme === ArticleSpecial.Labs && ( + +
+ +
+ + )} + + {renderAds && hasSurveyAd && ( + + )} + + )} +
+ +
+
+ + +
+ +
+ + +
+ +
+ + + {format.theme === ArticleSpecial.Labs ? ( + <> + ) : ( + + )} + + +
+ +
+ + + + + +
+
+ +
+
+ + +
+ {isApps ? ( + <> + + + + + + + + ) : ( + + )} +
+ + + + + + + +
+
+ +
+
+ + + +
+
+ +
+ +
+ +
+ +
+ + {isWeb && renderAds && ( +
+ +
+ )} + + {article.storyPackage && ( +
+ + + +
+ )} + + + + + + {showComments && ( +
+ +
+ )} + + {!isPaidContent && ( +
+ + + + + +
+ )} + + {isWeb && renderAds && ( +
+ +
+ )} +
+ + {isWeb && props.NAV.subNavSections && ( +
+ + + +
+ )} + + {isWeb && ( + <> +
+
+
+ + + + + + + + + )} + {isApps && ( +
+ + + +
+ )} + + ); +}; diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index 4c0c461dba8..d9f97d42d03 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -1,5 +1,6 @@ import { css } from '@emotion/react'; import { useConfig } from '../components/ConfigContext'; +import { grid } from '../grid'; import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling'; import type { ServerSideTests, Switches } from '../types/config'; import type { FEElement } from '../types/content'; @@ -9,7 +10,6 @@ import { ArticleDesign, type ArticleFormat } from './articleFormat'; import type { EditionId } from './edition'; import { RenderArticleElement } from './renderElement'; import { withSignInGateSlot } from './withSignInGateSlot'; -import { grid } from '../grid'; // This is required for spacefinder to work! const commercialPosition = css` @@ -93,7 +93,6 @@ export const ArticleRenderer = ({ isSectionedMiniProfilesArticle={isSectionedMiniProfilesArticle} shouldHideAds={shouldHideAds} idApiUrl={idApiUrl} - isShinyNewInteractiveLayout={isShinyNewInteractiveLayout} /> ); }); diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx index 1ec2f83de76..cdfc0982545 100644 --- a/dotcom-rendering/src/lib/renderElement.tsx +++ b/dotcom-rendering/src/lib/renderElement.tsx @@ -103,7 +103,6 @@ type Props = { contentType?: string; contentLayout?: string; idApiUrl?: string; - isShinyNewInteractiveLayout?: boolean; }; // updateRole modifies the role of an element in a way appropriate for most @@ -176,7 +175,6 @@ export const renderElement = ({ contentType, contentLayout, idApiUrl, - isShinyNewInteractiveLayout = false, }: Props) => { const isBlog = format.design === ArticleDesign.LiveBlog || @@ -1040,7 +1038,6 @@ export const RenderArticleElement = ({ contentType, contentLayout, idApiUrl, - isShinyNewInteractiveLayout = false, }: Props) => { const withUpdatedRole = updateRole(element, format); From f6cb1c09d262bf672f11db935ea1a7e43b0c51fe Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 19 May 2026 17:54:55 +0100 Subject: [PATCH 5/7] Adjust fullWidth element styling Bye bye scrollbar-width --- dotcom-rendering/src/components/Figure.tsx | 44 +------------------ .../src/layouts/InteractiveLayout.tsx | 19 +------- .../src/layouts/lib/furnitureArrangements.ts | 6 +-- dotcom-rendering/src/lib/ArticleRenderer.tsx | 4 +- 4 files changed, 9 insertions(+), 64 deletions(-) diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx index ccb113fb4b1..d69c3414b1b 100644 --- a/dotcom-rendering/src/components/Figure.tsx +++ b/dotcom-rendering/src/components/Figure.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { breakpoints, from, space, until } from '@guardian/source/foundations'; +import { from, space, until } from '@guardian/source/foundations'; import { ArticleDesign, type ArticleFormat } from '../lib/articleFormat'; import type { FEElement, RoleType } from '../types/content'; @@ -74,47 +74,7 @@ const roleCss = { margin-top: ${space[3]}px; margin-bottom: ${space[3]}px; - ${until.tablet} { - margin-left: -20px; - margin-right: -20px; - } - ${until.mobileLandscape} { - margin-left: -10px; - margin-right: -10px; - } - ${from.tablet} { - --scrollbar-width-fallback: 15px; - --half-scrollbar-width-fallback: 7.5px; - - width: calc( - 100vw - var(--scrollbar-width, var(--scrollbar-width-fallback)) - ); - max-width: calc( - 100vw - var(--scrollbar-width, var(--scrollbar-width-fallback)) - ); - - --grid-container-max-width: 740px; - --grid-container-left-margin: calc( - ((-100vw + (var(--grid-container-max-width) - 42px)) / 2) + - var( - --half-scrollbar-width, - var(--half-scrollbar-width-fallback) - ) - ); - - margin-left: var(--grid-container-left-margin); - } - ${from.desktop} { - --grid-container-max-width: ${breakpoints.desktop}px; - } - ${from.leftCol} { - --grid-container-max-width: ${breakpoints.leftCol}px; - --grid-left-col-width: 140px; - } - ${from.wide} { - --grid-container-max-width: ${breakpoints.wide}px; - --grid-left-col-width: 219px; - } + grid-column: 1 / -1; `, showcase: css` diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index 1a844049a21..e4ca04cfb1e 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -26,7 +26,6 @@ import { GuardianLabsLines } from '../components/GuardianLabsLines'; import { HeaderAdSlot } from '../components/HeaderAdSlot'; import { InteractivesDisableArticleSwipe } from '../components/InteractivesDisableArticleSwipe.island'; import { InteractivesNativePlatformWrapper } from '../components/InteractivesNativePlatformWrapper.island'; -import { InteractivesScrollbarWidth } from '../components/InteractivesScrollbarWidth.island'; import { Island } from '../components/Island'; import { LabsHeader } from '../components/LabsHeader'; import { ListenToArticle } from '../components/ListenToArticle.island'; @@ -55,7 +54,6 @@ import { parse } from '../lib/slot-machine-flags'; import type { NavType } from '../model/extract-nav'; import { palette as themePalette } from '../palette'; import type { ArticleDeprecated } from '../types/article'; -import type { RoleType } from '../types/content'; import type { RenderingTarget } from '../types/renderingTarget'; import { type Area, @@ -141,23 +139,8 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { const renderAds = canRenderAds(article); - const includesFullWidthElement = article.blocks.some((block) => - block.elements.some((element) => { - const role = - 'role' in element - ? (element.role as RoleType | 'fullWidth' | undefined) - : undefined; - return role === 'fullWidth'; - }), - ); - return ( <> - {includesFullWidthElement && ( - - - - )} {isApps && ( <> @@ -246,7 +229,7 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { }), ]} > - + = { // Raw CSS overrides per area per breakpoint. Entries are only needed when an area // deviates from the default: centre column, single-column mobile layout with areas -// in DOM order (main-media → title → headline → standfirst → meta → body → right-column). +// in DOM order (media → title → headline → standfirst → meta → body → right-column). type AreaCss = Partial>; type LayoutCssMap = Partial>; @@ -43,7 +43,7 @@ const standardCss: LayoutCssMap = { tablet: 'grid-row: 3;', leftCol: 'grid-row: 2;', }, - 'main-media': { + media: { tablet: 'grid-row: 4;', leftCol: 'grid-row: 3;', }, diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index d9f97d42d03..731ef59fc34 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -10,6 +10,7 @@ import { ArticleDesign, type ArticleFormat } from './articleFormat'; import type { EditionId } from './edition'; import { RenderArticleElement } from './renderElement'; import { withSignInGateSlot } from './withSignInGateSlot'; +import { interactiveLayoutSwitchoverDate } from '../layouts/DecideLayout'; // This is required for spacefinder to work! const commercialPosition = css` @@ -124,7 +125,8 @@ export const ArticleRenderer = ({ // 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 && + interactiveLayoutSwitchoverDate > new Date() ? interactiveLegacyClasses.contentMainColumn : '', ].join(' ')} From bfb066d220be17ef298d8349783b575bd20094de Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Tue, 19 May 2026 18:18:30 +0100 Subject: [PATCH 6/7] Stop applying legacy class to article element --- dotcom-rendering/src/lib/ArticleRenderer.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index 731ef59fc34..c4bf277f0f8 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -10,7 +10,6 @@ import { ArticleDesign, type ArticleFormat } from './articleFormat'; import type { EditionId } from './edition'; import { RenderArticleElement } from './renderElement'; import { withSignInGateSlot } from './withSignInGateSlot'; -import { interactiveLayoutSwitchoverDate } from '../layouts/DecideLayout'; // This is required for spacefinder to work! const commercialPosition = css` @@ -126,7 +125,7 @@ export const ArticleRenderer = ({ // Note, this class MUST be on the *direct parent* of the // elements for some legacy interactive styling to work. format.design === ArticleDesign.Interactive && - interactiveLayoutSwitchoverDate > new Date() + !isShinyNewInteractiveLayout ? interactiveLegacyClasses.contentMainColumn : '', ].join(' ')} From 9117280555e57a667e59edcf85f5b519b1fc800b Mon Sep 17 00:00:00 2001 From: Frederick O'Brien Date: Wed, 20 May 2026 15:33:37 +0100 Subject: [PATCH 7/7] Invert old/new interactive prop --- dotcom-rendering/src/components/ArticleBody.tsx | 6 +++--- dotcom-rendering/src/layouts/InteractiveLayout.tsx | 1 - .../src/layouts/InteractiveLayoutDeprecated.tsx | 1 + dotcom-rendering/src/lib/ArticleRenderer.tsx | 9 ++++----- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleBody.tsx b/dotcom-rendering/src/components/ArticleBody.tsx index 6404dfc7f6c..7b4af5ed594 100644 --- a/dotcom-rendering/src/components/ArticleBody.tsx +++ b/dotcom-rendering/src/components/ArticleBody.tsx @@ -58,7 +58,7 @@ type Props = { serverTime?: number; idApiUrl?: string; accentColor?: string; - isShinyNewInteractiveLayout?: boolean; + isOldInteractive?: boolean; }; const globalOlStyles = () => css` @@ -166,7 +166,7 @@ export const ArticleBody = ({ serverTime, idApiUrl, accentColor, - isShinyNewInteractiveLayout = false, + isOldInteractive = false, }: Props) => { const isInteractiveContent = format.design === ArticleDesign.Interactive || @@ -294,7 +294,7 @@ export const ArticleBody = ({ contributionsServiceUrl={contributionsServiceUrl} shouldHideAds={shouldHideAds} idApiUrl={idApiUrl} - isShinyNewInteractiveLayout={isShinyNewInteractiveLayout} + isOldInteractive={isOldInteractive} />
{hasObserverPublicationTag && } diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx index e4ca04cfb1e..8fdb9318e5b 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx @@ -428,7 +428,6 @@ export const InteractiveLayout = (props: WebProps | AppProps) => { editionId={article.editionId} shouldHideAds={article.shouldHideAds} idApiUrl={article.config.idApiUrl} - isShinyNewInteractiveLayout={true} /> {isApps && ( diff --git a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx index b75a8b2a2be..6141e64a78a 100644 --- a/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx +++ b/dotcom-rendering/src/layouts/InteractiveLayoutDeprecated.tsx @@ -525,6 +525,7 @@ export const InteractiveLayoutDeprecated = (props: WebProps | AppsProps) => { editionId={article.editionId} shouldHideAds={article.shouldHideAds} idApiUrl={article.config.idApiUrl} + isOldInteractive={true} /> diff --git a/dotcom-rendering/src/lib/ArticleRenderer.tsx b/dotcom-rendering/src/lib/ArticleRenderer.tsx index c4bf277f0f8..b6f36284f39 100644 --- a/dotcom-rendering/src/lib/ArticleRenderer.tsx +++ b/dotcom-rendering/src/lib/ArticleRenderer.tsx @@ -38,7 +38,7 @@ type Props = { contributionsServiceUrl: string; shouldHideAds: boolean; idApiUrl?: string; - isShinyNewInteractiveLayout?: boolean; + isOldInteractive?: boolean; }; export const ArticleRenderer = ({ @@ -63,7 +63,7 @@ export const ArticleRenderer = ({ contributionsServiceUrl, shouldHideAds, idApiUrl, - isShinyNewInteractiveLayout = false, + isOldInteractive = false, }: Props) => { const isSectionedMiniProfilesArticle = elements.filter( @@ -124,8 +124,7 @@ export const ArticleRenderer = ({ // Note, this class MUST be on the *direct parent* of the // elements for some legacy interactive styling to work. - format.design === ArticleDesign.Interactive && - !isShinyNewInteractiveLayout + format.design === ArticleDesign.Interactive && isOldInteractive ? interactiveLegacyClasses.contentMainColumn : '', ].join(' ')} @@ -133,7 +132,7 @@ export const ArticleRenderer = ({ css={[ commercialPosition, spacefinderAdStyles, - isShinyNewInteractiveLayout && interactiveLayoutCSS, + !isOldInteractive && interactiveLayoutCSS, ]} > {renderingTarget === 'Apps'