Review: Export PageContent version of TextImageBlock

Author: Stefanie Kaltenhauser

demo/site/src/common/blocks/TextImageBlock.tsx

@@ -8,24 +8,28 @@ import styled, { css } from "styled-components";
 import { DamImageBlock } from "./DamImageBlock";
 import { RichTextBlock } from "./RichTextBlock";
 
-export const TextImageBlock = withPreview(
+const TextImageBlock = withPreview(
     ({ data: { text, image, imageAspectRatio, imagePosition } }: PropsWithData<TextImageBlockData>) => {
         return (
-            <PageLayout>
-                <Root $imagePosition={imagePosition}>
-                    <ImageContainer $imageAspectRatio={imageAspectRatio.replace("x", "/")}>
-                        <DamImageBlock data={image} aspectRatio={imageAspectRatio} fill sizes={createImageSizes({ md: "100vw" }, "30vw")} />
-                    </ImageContainer>
-                    <TextContainer>
-                        <RichTextBlock data={text} />
-                    </TextContainer>
-                </Root>
-            </PageLayout>
+            <Root $imagePosition={imagePosition}>
+                <ImageContainer $imageAspectRatio={imageAspectRatio.replace("x", "/")}>
+                    <DamImageBlock data={image} aspectRatio={imageAspectRatio} fill sizes={createImageSizes({ md: "100vw" }, "30vw")} />
+                </ImageContainer>
+                <TextContainer>
+                    <RichTextBlock data={text} />
+                </TextContainer>
+            </Root>
         );
     },
     { label: "Text/Image" },
 );
 
+export const PageContentTextImageBlock = (props: PropsWithData<TextImageBlockData>) => (
+    <PageLayout>
+        <TextImageBlock {...props} />
+    </PageLayout>
+);
+
 const Root = styled.div<{ $imagePosition: TextImageBlockData["imagePosition"] }>`
     display: flex;
     flex-direction: column;

demo/site/src/documents/pages/blocks/PageContentBlock.tsx

@@ -11,7 +11,7 @@ import { SpaceBlock } from "@src/common/blocks/SpaceBlock";
 import { PageContentStandaloneCallToActionListBlock } from "@src/common/blocks/StandaloneCallToActionListBlock";
 import { PageContentStandaloneHeadingBlock } from "@src/common/blocks/StandaloneHeadingBlock";
 import { StandaloneMediaBlock } from "@src/common/blocks/StandaloneMediaBlock";
-import { TextImageBlock } from "@src/common/blocks/TextImageBlock";
+import { PageContentTextImageBlock } from "@src/common/blocks/TextImageBlock";
 import { BillboardTeaserBlock } from "@src/documents/pages/blocks/BillboardTeaserBlock";
 import { ColumnsBlock } from "@src/documents/pages/blocks/ColumnsBlock";
 import { ContentGroupBlock } from "@src/documents/pages/blocks/ContentGroupBlock";
@@ -42,7 +42,7 @@ const supportedBlocks: SupportedBlocks = {
     newsDetail: (props) => <NewsDetailBlock data={props} />,
     image: (props) => <DamImageBlock data={props} aspectRatio="inherit" />,
     layout: (props) => <LayoutBlock data={props} />,
-    textImage: (props) => <TextImageBlock data={props} />,
+    textImage: (props) => <PageContentTextImageBlock data={props} />,
     fullWidthImage: (props) => <FullWidthImageBlock data={props} />,
 };
 

demo/site/src/news/blocks/NewsContentBlock.tsx

@@ -3,13 +3,13 @@ import { NewsContentBlockData } from "@src/blocks.generated";
 import { DamImageBlock } from "@src/common/blocks/DamImageBlock";
 import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
 import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
-import { TextImageBlock } from "@src/common/blocks/TextImageBlock";
+import { PageContentTextImageBlock } from "@src/common/blocks/TextImageBlock";
 
 const supportedBlocks: SupportedBlocks = {
     heading: (props) => <HeadingBlock data={props} />,
     richText: (props) => <RichTextBlock data={props} />,
     image: (props) => <DamImageBlock data={props} aspectRatio="inherit" />,
-    textImage: (props) => <TextImageBlock data={props} />,
+    textImage: (props) => <PageContentTextImageBlock data={props} />,
 };
 
 export const NewsContentBlock = ({ data }: PropsWithData<NewsContentBlockData>) => {