From c97bce9739a8178d8f1f94e398a1451374322c38 Mon Sep 17 00:00:00 2001
From: vanessa <32312712+vlbee@users.noreply.github.com>
Date: Mon, 9 Feb 2026 16:48:19 +0000
Subject: [PATCH 1/5] Show L2A button on Apps preview by default
---
dotcom-rendering/src/components/ArticleMeta.apps.tsx | 4 +++-
.../src/components/ListenToArticle.importable.tsx | 9 +++++++--
dotcom-rendering/src/layouts/CommentLayout.tsx | 4 +++-
dotcom-rendering/src/layouts/ImmersiveLayout.tsx | 4 +++-
dotcom-rendering/src/layouts/InteractiveLayout.tsx | 3 ++-
dotcom-rendering/src/layouts/ShowcaseLayout.tsx | 6 ++++--
dotcom-rendering/src/layouts/StandardLayout.tsx | 6 ++++--
7 files changed, 26 insertions(+), 10 deletions(-)
diff --git a/dotcom-rendering/src/components/ArticleMeta.apps.tsx b/dotcom-rendering/src/components/ArticleMeta.apps.tsx
index fe34af72e1e..b19aa2355f6 100644
--- a/dotcom-rendering/src/components/ArticleMeta.apps.tsx
+++ b/dotcom-rendering/src/components/ArticleMeta.apps.tsx
@@ -37,6 +37,7 @@ type Props = {
isCommentable: boolean;
pageId?: string;
headline?: string;
+ isPreview?: boolean;
};
const metaGridContainer = css`
@@ -230,6 +231,7 @@ export const ArticleMetaApps = ({
isCommentable,
pageId,
headline,
+ isPreview,
}: Props) => {
const soleContributor = getSoleContributor(tags, byline);
const authorName = soleContributor?.title ?? 'Author Image';
@@ -373,7 +375,7 @@ export const ArticleMetaApps = ({
{shouldShowListenToArticleButton && (
-
+
)}
diff --git a/dotcom-rendering/src/components/ListenToArticle.importable.tsx b/dotcom-rendering/src/components/ListenToArticle.importable.tsx
index 843dc5e4e06..04345484d64 100644
--- a/dotcom-rendering/src/components/ListenToArticle.importable.tsx
+++ b/dotcom-rendering/src/components/ListenToArticle.importable.tsx
@@ -6,6 +6,7 @@ import { ListenToArticleButton } from './ListenToArticleButton';
type Props = {
articleId: string;
+ isPreview?: boolean;
};
export const formatAudioDuration = (
@@ -24,7 +25,7 @@ export const formatAudioDuration = (
return formattedDuration;
};
-export const ListenToArticle = ({ articleId }: Props) => {
+export const ListenToArticle = ({ articleId, isPreview }: Props) => {
const [showButton, setShowButton] = useState(false);
const [audioDurationSeconds, setAudioDurationSeconds] = useState<
number | undefined
@@ -56,7 +57,11 @@ export const ListenToArticle = ({ articleId }: Props) => {
setShowButton(false);
});
}
- }, [articleId, isBridgetCompatible]);
+
+ if (isPreview) {
+ setShowButton(true);
+ }
+ }, [articleId, isPreview, isBridgetCompatible]);
const listenToArticleHandler = () => {
void getListenToArticleClient()
diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx
index 17341643b98..36861158b2d 100644
--- a/dotcom-rendering/src/layouts/CommentLayout.tsx
+++ b/dotcom-rendering/src/layouts/CommentLayout.tsx
@@ -277,7 +277,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
const isWeb = renderingTarget === 'Web';
const isApps = renderingTarget === 'Apps';
const {
- config: { isPaidContent, host },
+ config: { isPaidContent, host, isPreview },
} = article;
const showBodyEndSlot =
@@ -460,6 +460,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
>
@@ -493,6 +494,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
article.config.shortUrlId
}
pageId={article.config.pageId}
+ isPreview={isPreview}
>
diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
index dd427888131..56ab1c62592 100644
--- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
@@ -233,7 +233,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
const { article, format, renderingTarget, serverTime } = props;
const {
- config: { isPaidContent, host, hasSurveyAd },
+ config: { isPaidContent, host, hasSurveyAd, isPreview },
editionId,
} = article;
const isWeb = renderingTarget === 'Web';
@@ -535,6 +535,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
>
@@ -588,6 +589,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
article.config.shortUrlId
}
pageId={article.config.pageId}
+ isPreview={isPreview}
>
diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
index cc7895af63d..8d01b4f5fe6 100644
--- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
@@ -205,7 +205,7 @@ interface AppsProps extends CommonProps {
export const InteractiveLayout = (props: WebProps | AppsProps) => {
const { article, format, renderingTarget, serverTime } = props;
const {
- config: { isPaidContent, host, hasSurveyAd },
+ config: { isPaidContent, host, hasSurveyAd, isPreview },
editionId,
} = article;
@@ -406,6 +406,7 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
pageId={
article.config.pageId
}
+ isPreview={isPreview}
>
diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
index 8d0d1989dfa..beb42ade71e 100644
--- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
+++ b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
@@ -1,4 +1,5 @@
import { css } from '@emotion/react';
+import { StraightLines } from '@guardian/source-development-kitchen/react-components';
import {
from,
palette as sourcePalette,
@@ -6,7 +7,6 @@ import {
until,
} from '@guardian/source/foundations';
import { Hide } from '@guardian/source/react-components';
-import { StraightLines } from '@guardian/source-development-kitchen/react-components';
import { AdPortals } from '../components/AdPortals.importable';
import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
@@ -224,7 +224,7 @@ interface AppsProps extends CommonProps {
export const ShowcaseLayout = (props: WebProps | AppsProps) => {
const { article, format, renderingTarget, serverTime } = props;
const {
- config: { isPaidContent, host, hasSurveyAd },
+ config: { isPaidContent, host, hasSurveyAd, isPreview },
editionId,
} = article;
const isWeb = renderingTarget === 'Web';
@@ -427,6 +427,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
>
@@ -468,6 +469,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
article.config.shortUrlId
}
pageId={article.config.pageId}
+ isPreview={isPreview}
>
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 1e629b60229..024c767b750 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -1,4 +1,5 @@
import { css } from '@emotion/react';
+import { StraightLines } from '@guardian/source-development-kitchen/react-components';
import {
from,
palette as sourcePalette,
@@ -6,7 +7,6 @@ import {
until,
} from '@guardian/source/foundations';
import { Hide } from '@guardian/source/react-components';
-import { StraightLines } from '@guardian/source-development-kitchen/react-components';
import { AdPortals } from '../components/AdPortals.importable';
import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
@@ -339,7 +339,7 @@ interface AppProps extends Props {
export const StandardLayout = (props: WebProps | AppProps) => {
const { article, format, renderingTarget, serverTime } = props;
const {
- config: { isPaidContent, host, hasSurveyAd },
+ config: { isPaidContent, host, hasSurveyAd, isPreview },
editionId,
} = article;
@@ -587,6 +587,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
article.config.shortUrlId
}
pageId={article.config.pageId}
+ isPreview={isPreview}
>
@@ -673,6 +674,7 @@ export const StandardLayout = (props: WebProps | AppProps) => {
>
From 7de39839f1f0e228f3c6a3090daf7b647962cad8 Mon Sep 17 00:00:00 2001
From: vanessa <32312712+vlbee@users.noreply.github.com>
Date: Tue, 10 Feb 2026 09:52:12 +0000
Subject: [PATCH 2/5] fix imports
---
dotcom-rendering/src/layouts/ShowcaseLayout.tsx | 2 +-
dotcom-rendering/src/layouts/StandardLayout.tsx | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
index beb42ade71e..4d0501b6685 100644
--- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
+++ b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
@@ -1,5 +1,4 @@
import { css } from '@emotion/react';
-import { StraightLines } from '@guardian/source-development-kitchen/react-components';
import {
from,
palette as sourcePalette,
@@ -7,6 +6,7 @@ import {
until,
} from '@guardian/source/foundations';
import { Hide } from '@guardian/source/react-components';
+import { StraightLines } from '@guardian/source-development-kitchen/react-components';
import { AdPortals } from '../components/AdPortals.importable';
import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 024c767b750..b85a922617e 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -1,5 +1,4 @@
import { css } from '@emotion/react';
-import { StraightLines } from '@guardian/source-development-kitchen/react-components';
import {
from,
palette as sourcePalette,
@@ -7,6 +6,7 @@ import {
until,
} from '@guardian/source/foundations';
import { Hide } from '@guardian/source/react-components';
+import { StraightLines } from '@guardian/source-development-kitchen/react-components';
import { AdPortals } from '../components/AdPortals.importable';
import { AdSlot, MobileStickyContainer } from '../components/AdSlot.web';
import { AffiliateDisclaimer } from '../components/AffiliateDisclaimer';
From 261beb4ac8fad31ce14a4361d33ea78f810349a1 Mon Sep 17 00:00:00 2001
From: vanessa <32312712+vlbee@users.noreply.github.com>
Date: Tue, 10 Feb 2026 12:06:43 +0000
Subject: [PATCH 3/5] Render l2a by default in dev mode
---
.../src/components/ListenToArticle.importable.tsx | 13 ++++++++-----
dotcom-rendering/src/server/render.article.apps.tsx | 1 +
dotcom-rendering/src/types/configContext.ts | 2 ++
3 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/dotcom-rendering/src/components/ListenToArticle.importable.tsx b/dotcom-rendering/src/components/ListenToArticle.importable.tsx
index 04345484d64..481298b95d6 100644
--- a/dotcom-rendering/src/components/ListenToArticle.importable.tsx
+++ b/dotcom-rendering/src/components/ListenToArticle.importable.tsx
@@ -2,6 +2,7 @@ import { log } from '@guardian/libs';
import { useEffect, useState } from 'react';
import { getListenToArticleClient } from '../lib/bridgetApi';
import { useIsBridgetCompatible } from '../lib/useIsBridgetCompatible';
+import { useConfig } from './ConfigContext';
import { ListenToArticleButton } from './ListenToArticleButton';
type Props = {
@@ -25,12 +26,14 @@ export const formatAudioDuration = (
return formattedDuration;
};
-export const ListenToArticle = ({ articleId, isPreview }: Props) => {
+export const ListenToArticle = ({ articleId, isPreview = false }: Props) => {
+ const { isDev } = useConfig();
const [showButton, setShowButton] = useState(false);
const [audioDurationSeconds, setAudioDurationSeconds] = useState<
number | undefined
>(undefined);
+ console.log('ListenToArticle isPreview=', isPreview);
const isBridgetCompatible = useIsBridgetCompatible('8.7.0');
useEffect(() => {
if (isBridgetCompatible) {
@@ -56,12 +59,12 @@ export const ListenToArticle = ({ articleId, isPreview }: Props) => {
setShowButton(false);
});
- }
-
- if (isPreview) {
+ } else if (isPreview || isDev) {
+ // To facilitate design and development in non-Bridget compatible environments,
+ // we want to show the button if we're in preview mode or development mode
setShowButton(true);
}
- }, [articleId, isPreview, isBridgetCompatible]);
+ }, [articleId, isPreview, isDev, isBridgetCompatible]);
const listenToArticleHandler = () => {
void getListenToArticleClient()
diff --git a/dotcom-rendering/src/server/render.article.apps.tsx b/dotcom-rendering/src/server/render.article.apps.tsx
index 478bf3ea8dc..0719a472ac9 100644
--- a/dotcom-rendering/src/server/render.article.apps.tsx
+++ b/dotcom-rendering/src/server/render.article.apps.tsx
@@ -35,6 +35,7 @@ export const renderArticle = (
darkModeAvailable: true,
assetOrigin: ASSET_ORIGIN,
editionId: frontendData.editionId,
+ isDev: process.env.NODE_ENV === 'development',
};
const { html, extractedCss } = renderToStringWithEmotion(
diff --git a/dotcom-rendering/src/types/configContext.ts b/dotcom-rendering/src/types/configContext.ts
index bc67281038c..6b580f51495 100644
--- a/dotcom-rendering/src/types/configContext.ts
+++ b/dotcom-rendering/src/types/configContext.ts
@@ -14,10 +14,12 @@ export type Config =
darkModeAvailable: boolean;
assetOrigin: AssetOrigin;
editionId: EditionId;
+ isDev?: boolean;
}>
| Readonly<{
renderingTarget: Extract;
darkModeAvailable: boolean;
assetOrigin: AssetOrigin;
editionId: EditionId;
+ isDev?: boolean;
}>;
From 1748e21f36df6cace0af3dd0290cc532e4ff8ccf Mon Sep 17 00:00:00 2001
From: vanessa <32312712+vlbee@users.noreply.github.com>
Date: Tue, 10 Feb 2026 15:20:42 +0000
Subject: [PATCH 4/5] remove preview code
---
dotcom-rendering/src/components/ArticleMeta.apps.tsx | 4 +---
.../src/components/ListenToArticle.importable.tsx | 10 ++++------
dotcom-rendering/src/layouts/CommentLayout.tsx | 4 +---
dotcom-rendering/src/layouts/ImmersiveLayout.tsx | 4 +---
dotcom-rendering/src/layouts/ShowcaseLayout.tsx | 4 +---
dotcom-rendering/src/layouts/StandardLayout.tsx | 4 +---
6 files changed, 9 insertions(+), 21 deletions(-)
diff --git a/dotcom-rendering/src/components/ArticleMeta.apps.tsx b/dotcom-rendering/src/components/ArticleMeta.apps.tsx
index b19aa2355f6..fe34af72e1e 100644
--- a/dotcom-rendering/src/components/ArticleMeta.apps.tsx
+++ b/dotcom-rendering/src/components/ArticleMeta.apps.tsx
@@ -37,7 +37,6 @@ type Props = {
isCommentable: boolean;
pageId?: string;
headline?: string;
- isPreview?: boolean;
};
const metaGridContainer = css`
@@ -231,7 +230,6 @@ export const ArticleMetaApps = ({
isCommentable,
pageId,
headline,
- isPreview,
}: Props) => {
const soleContributor = getSoleContributor(tags, byline);
const authorName = soleContributor?.title ?? 'Author Image';
@@ -375,7 +373,7 @@ export const ArticleMetaApps = ({
{shouldShowListenToArticleButton && (
-
+
)}
diff --git a/dotcom-rendering/src/components/ListenToArticle.importable.tsx b/dotcom-rendering/src/components/ListenToArticle.importable.tsx
index 481298b95d6..e26c195a8dd 100644
--- a/dotcom-rendering/src/components/ListenToArticle.importable.tsx
+++ b/dotcom-rendering/src/components/ListenToArticle.importable.tsx
@@ -7,7 +7,6 @@ import { ListenToArticleButton } from './ListenToArticleButton';
type Props = {
articleId: string;
- isPreview?: boolean;
};
export const formatAudioDuration = (
@@ -26,14 +25,13 @@ export const formatAudioDuration = (
return formattedDuration;
};
-export const ListenToArticle = ({ articleId, isPreview = false }: Props) => {
+export const ListenToArticle = ({ articleId }: Props) => {
const { isDev } = useConfig();
const [showButton, setShowButton] = useState(false);
const [audioDurationSeconds, setAudioDurationSeconds] = useState<
number | undefined
>(undefined);
- console.log('ListenToArticle isPreview=', isPreview);
const isBridgetCompatible = useIsBridgetCompatible('8.7.0');
useEffect(() => {
if (isBridgetCompatible) {
@@ -59,12 +57,12 @@ export const ListenToArticle = ({ articleId, isPreview = false }: Props) => {
setShowButton(false);
});
- } else if (isPreview || isDev) {
+ } else if (isDev) {
// To facilitate design and development in non-Bridget compatible environments,
- // we want to show the button if we're in preview mode or development mode
+ // we want to show the button if we're in development mode
setShowButton(true);
}
- }, [articleId, isPreview, isDev, isBridgetCompatible]);
+ }, [articleId, isDev, isBridgetCompatible]);
const listenToArticleHandler = () => {
void getListenToArticleClient()
diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx
index 36861158b2d..17341643b98 100644
--- a/dotcom-rendering/src/layouts/CommentLayout.tsx
+++ b/dotcom-rendering/src/layouts/CommentLayout.tsx
@@ -277,7 +277,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
const isWeb = renderingTarget === 'Web';
const isApps = renderingTarget === 'Apps';
const {
- config: { isPaidContent, host, isPreview },
+ config: { isPaidContent, host },
} = article;
const showBodyEndSlot =
@@ -460,7 +460,6 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
>
@@ -494,7 +493,6 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
article.config.shortUrlId
}
pageId={article.config.pageId}
- isPreview={isPreview}
>
diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
index 56ab1c62592..dd427888131 100644
--- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
@@ -233,7 +233,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
const { article, format, renderingTarget, serverTime } = props;
const {
- config: { isPaidContent, host, hasSurveyAd, isPreview },
+ config: { isPaidContent, host, hasSurveyAd },
editionId,
} = article;
const isWeb = renderingTarget === 'Web';
@@ -535,7 +535,6 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
>
@@ -589,7 +588,6 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
article.config.shortUrlId
}
pageId={article.config.pageId}
- isPreview={isPreview}
>
diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
index 4d0501b6685..8d0d1989dfa 100644
--- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
+++ b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx
@@ -224,7 +224,7 @@ interface AppsProps extends CommonProps {
export const ShowcaseLayout = (props: WebProps | AppsProps) => {
const { article, format, renderingTarget, serverTime } = props;
const {
- config: { isPaidContent, host, hasSurveyAd, isPreview },
+ config: { isPaidContent, host, hasSurveyAd },
editionId,
} = article;
const isWeb = renderingTarget === 'Web';
@@ -427,7 +427,6 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
>
@@ -469,7 +468,6 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => {
article.config.shortUrlId
}
pageId={article.config.pageId}
- isPreview={isPreview}
>
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index b85a922617e..1e629b60229 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -339,7 +339,7 @@ interface AppProps extends Props {
export const StandardLayout = (props: WebProps | AppProps) => {
const { article, format, renderingTarget, serverTime } = props;
const {
- config: { isPaidContent, host, hasSurveyAd, isPreview },
+ config: { isPaidContent, host, hasSurveyAd },
editionId,
} = article;
@@ -587,7 +587,6 @@ export const StandardLayout = (props: WebProps | AppProps) => {
article.config.shortUrlId
}
pageId={article.config.pageId}
- isPreview={isPreview}
>
@@ -674,7 +673,6 @@ export const StandardLayout = (props: WebProps | AppProps) => {
>
From 3585687ded1135749e00bdef96ad708ad627bc86 Mon Sep 17 00:00:00 2001
From: vanessa <32312712+vlbee@users.noreply.github.com>
Date: Tue, 10 Feb 2026 15:28:51 +0000
Subject: [PATCH 5/5] Show follow button in dev mode app renders by default
---
.../src/components/FollowWrapper.importable.tsx | 16 +++++++++++++---
.../src/layouts/InteractiveLayout.tsx | 3 +--
2 files changed, 14 insertions(+), 5 deletions(-)
diff --git a/dotcom-rendering/src/components/FollowWrapper.importable.tsx b/dotcom-rendering/src/components/FollowWrapper.importable.tsx
index 7208609214c..b1e4db20c22 100644
--- a/dotcom-rendering/src/components/FollowWrapper.importable.tsx
+++ b/dotcom-rendering/src/components/FollowWrapper.importable.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
import { getNotificationsClient, getTagClient } from '../lib/bridgetApi';
import { useIsBridgetCompatible } from '../lib/useIsBridgetCompatible';
import { useIsMyGuardianEnabled } from '../lib/useIsMyGuardianEnabled';
+import { useConfig } from './ConfigContext';
import { FollowNotificationsButton, FollowTagButton } from './FollowButtons';
type Props = {
@@ -14,6 +15,7 @@ type Props = {
};
export const FollowWrapper = ({ id, displayName }: Props) => {
+ const { isDev } = useConfig();
const [isFollowingNotifications, setIsFollowingNotifications] = useState<
boolean | undefined
>(undefined);
@@ -31,9 +33,17 @@ export const FollowWrapper = ({ id, displayName }: Props) => {
return !blockList.includes(tagId);
};
- if (isBridgetCompatible && isMyGuardianEnabled && isNotInBlockList(id)) {
- setShowFollowTagButton(true);
- }
+ useEffect(() => {
+ if (
+ isBridgetCompatible &&
+ isMyGuardianEnabled &&
+ isNotInBlockList(id)
+ ) {
+ setShowFollowTagButton(true);
+ } else if (isDev) {
+ setShowFollowTagButton(true);
+ }
+ }, [isBridgetCompatible, isMyGuardianEnabled, id, isDev]);
useEffect(() => {
const topic = new Topic({
diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
index 8d01b4f5fe6..cc7895af63d 100644
--- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
@@ -205,7 +205,7 @@ interface AppsProps extends CommonProps {
export const InteractiveLayout = (props: WebProps | AppsProps) => {
const { article, format, renderingTarget, serverTime } = props;
const {
- config: { isPaidContent, host, hasSurveyAd, isPreview },
+ config: { isPaidContent, host, hasSurveyAd },
editionId,
} = article;
@@ -406,7 +406,6 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
pageId={
article.config.pageId
}
- isPreview={isPreview}
>