Fix padding of DamVideoBlock and YouTubeVideoBlock (#1335)

Fixes the padding behavior of DamVideoBlock and YouTubeVideoBlock when used inside `AdminComponentPaper`. A generic VideoBlock is added to Demo for testing purposes.
vivid-planet · Nov 6, 2023 · f48a768 · f48a768
1 parent dbdc0f5
commit f48a768
Show file tree

Hide file tree

Showing 8 changed files with 239 additions and 115 deletions.
diff --git a/.changeset/wise-sloths-remember.md b/.changeset/wise-sloths-remember.md
@@ -0,0 +1,5 @@
+---
+"@comet/blocks-admin": patch
+---
+
+Fix padding behavior of `YoutubeVideoBlock` and `DamVideoBlock` when used inside `AdminComponentPaper`
diff --git a/demo/admin/src/pages/PageContentBlock.tsx b/demo/admin/src/pages/PageContentBlock.tsx
@@ -11,6 +11,7 @@ import { ColumnsBlock } from "./blocks/ColumnsBlock";
 import { FullWidthImageBlock } from "./blocks/FullWidthImageBlock";
 import { HeadlineBlock } from "./blocks/HeadlineBlock";
 import { TextImageBlock } from "./blocks/TextImageBlock";
+import { VideoBlock } from "./blocks/VideoBlock";
 
 export const PageContentBlock = createBlocksBlock({
     name: "PageContent",
@@ -22,6 +23,7 @@ export const PageContentBlock = createBlocksBlock({
         textImage: TextImageBlock,
         damVideo: DamVideoBlock,
         youTubeVideo: YouTubeVideoBlock,
+        video: VideoBlock,
         linkList: LinkListBlock,
         fullWidthImage: FullWidthImageBlock,
         columns: ColumnsBlock,

diff --git a/demo/admin/src/pages/blocks/VideoBlock.tsx b/demo/admin/src/pages/blocks/VideoBlock.tsx
@@ -0,0 +1,12 @@
+import { BlockCategory, createOneOfBlock, YouTubeVideoBlock } from "@comet/blocks-admin";
+import { DamVideoBlock } from "@comet/cms-admin";
+import * as React from "react";
+import { FormattedMessage } from "react-intl";
+
+export const VideoBlock = createOneOfBlock({
+    name: "Video",
+    displayName: <FormattedMessage id="pages.blocks.video" defaultMessage="Video" />,
+    category: BlockCategory.Media,
+    supportedBlocks: { youtubeVideo: YouTubeVideoBlock, damVideo: DamVideoBlock },
+    allowEmpty: true,
+});
diff --git a/demo/api/block-meta.json b/demo/api/block-meta.json
@@ -927,6 +927,7 @@
                                 "TextImage",
                                 "DamVideo",
                                 "YouTubeVideo",
+                                "Video",
                                 "LinkList",
                                 "FullWidthImage",
                                 "Columns",
@@ -1587,6 +1588,69 @@
             }
         ]
     },
+    {
+        "name": "Video",
+        "fields": [
+            {
+                "name": "attachedBlocks",
+                "kind": "NestedObjectList",
+                "object": {
+                    "fields": [
+                        {
+                            "name": "type",
+                            "kind": "String",
+                            "nullable": false
+                        },
+                        {
+                            "name": "props",
+                            "kind": "OneOfBlocks",
+                            "blocks": [
+                                "DamVideo",
+                                "YouTubeVideo"
+                            ],
+                            "nullable": false
+                        }
+                    ]
+                },
+                "nullable": false
+            },
+            {
+                "name": "activeType",
+                "kind": "String",
+                "nullable": true
+            },
+            {
+                "name": "block",
+                "kind": "NestedObject",
+                "object": {
+                    "fields": [
+                        {
+                            "name": "type",
+                            "kind": "String",
+                            "nullable": false
+                        },
+                        {
+                            "name": "props",
+                            "kind": "OneOfBlocks",
+                            "blocks": [
+                                "DamVideo",
+                                "YouTubeVideo"
+                            ],
+                            "nullable": false
+                        }
+                    ]
+                },
+                "nullable": true
+            }
+        ],
+        "inputFields": [
+            {
+                "name": "activeType",
+                "kind": "String",
+                "nullable": true
+            }
+        ]
+    },
     {
         "name": "YouTubeVideo",
         "fields": [

diff --git a/demo/api/src/pages/blocks/PageContentBlock.ts b/demo/api/src/pages/blocks/PageContentBlock.ts
@@ -9,6 +9,7 @@ import { ColumnsBlock } from "./columns.block";
 import { FullWidthImageBlock } from "./full-width-image.block";
 import { HeadlineBlock } from "./headline.block";
 import { TextImageBlock } from "./TextImageBlock";
+import { VideoBlock } from "./video.block";
 
 const supportedBlocks = {
     space: SpaceBlock,
@@ -18,6 +19,7 @@ const supportedBlocks = {
     textImage: TextImageBlock,
     damVideo: DamVideoBlock,
     youTubeVideo: YouTubeVideoBlock,
+    video: VideoBlock,
     linkList: LinkListBlock,
     fullWidthImage: FullWidthImageBlock,
     columns: ColumnsBlock,

diff --git a/demo/api/src/pages/blocks/video.block.ts b/demo/api/src/pages/blocks/video.block.ts
@@ -0,0 +1,16 @@
+import { createOneOfBlock } from "@comet/blocks-api/lib/blocks/factories/createOneOfBlock";
+import { YouTubeVideoBlock } from "@comet/blocks-api/lib/blocks/youtube-video.block";
+import { DamVideoBlock } from "@comet/cms-api";
+
+export const VideoBlock = createOneOfBlock(
+    {
+        supportedBlocks: {
+            damVideo: DamVideoBlock,
+            youtubeVideo: YouTubeVideoBlock,
+        },
+        allowEmpty: true,
+    },
+    {
+        name: "Video",
+    },
+);
diff --git a/packages/admin/blocks-admin/src/blocks/YouTubeVideoBlock.tsx b/packages/admin/blocks-admin/src/blocks/YouTubeVideoBlock.tsx
@@ -1,11 +1,12 @@
 import { Field, FieldContainer, FinalFormInput, FinalFormRadio, FinalFormSwitch } from "@comet/admin";
-import { FormControlLabel } from "@mui/material";
+import { Box, FormControlLabel } from "@mui/material";
 import * as React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { YouTubeVideoBlockData, YouTubeVideoBlockInput } from "../blocks.generated";
 import { BlocksFinalForm } from "../form/BlocksFinalForm";
 import { SelectPreviewComponent } from "../iframebridge/SelectPreviewComponent";
+import { useAdminComponentPaper } from "./common/AdminComponentPaper";
 import { createBlockSkeleton } from "./helpers/createBlockSkeleton";
 import { BlockCategory, BlockInterface } from "./types";
 
@@ -42,62 +43,72 @@ export const YouTubeVideoBlock: BlockInterface<YouTubeVideoBlockData, State, You
         return { ...state, autoplay: false, adminMeta: { route: previewCtx.parentUrl } };
     },
 
+    definesOwnPadding: true,
+
     isValid: ({ youtubeIdentifier }) => !youtubeIdentifier || isValidYouTubeIdentifier(youtubeIdentifier),
 
     AdminComponent: ({ state, updateState }) => {
         const intl = useIntl();
+        const isInPaper = useAdminComponentPaper();
 
         return (
-            <SelectPreviewComponent>
-                <BlocksFinalForm onSubmit={(newState) => updateState({ ...newState })} initialValues={state}>
-                    <Field
-                        label={intl.formatMessage({
-                            id: "comet.blocks.youTubeVideo.youtubeIdentifier",
-                            defaultMessage: "YouTube URL or YouTube Video ID",
-                        })}
-                        validate={validateIdentifier}
-                        name="youtubeIdentifier"
-                        component={FinalFormInput}
-                        fullWidth
-                    />
-                    <FieldContainer label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.aspectRatio", defaultMessage: "Aspect Ratio" })}>
-                        <Field name="aspectRatio" type="radio" value="16X9">
-                            {(props) => (
-                                <FormControlLabel
-                                    label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.aspectRatio.16X9", defaultMessage: "16:9" })}
-                                    control={<FinalFormRadio {...props} />}
-                                />
-                            )}
-                        </Field>
-                        <Field name="aspectRatio" type="radio" value="4X3">
-                            {(props) => (
-                                <FormControlLabel
-                                    label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.aspectRatio.4X3", defaultMessage: "4:3" })}
-                                    control={<FinalFormRadio {...props} />}
-                                />
-                            )}
-                        </Field>
-                    </FieldContainer>
-                    <Field
-                        label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.autoplay", defaultMessage: "Autoplay" })}
-                        name="autoplay"
-                        type="checkbox"
-                        component={FinalFormSwitch}
-                    />
-                    <Field
-                        label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.showControls", defaultMessage: "Show controls" })}
-                        name="showControls"
-                        type="checkbox"
-                        component={FinalFormSwitch}
-                    />
-                    <Field
-                        label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.loop", defaultMessage: "Loop" })}
-                        name="loop"
-                        type="checkbox"
-                        component={FinalFormSwitch}
-                    />
-                </BlocksFinalForm>
-            </SelectPreviewComponent>
+            <Box padding={isInPaper ? 3 : 0} pb={0}>
+                <SelectPreviewComponent>
+                    <BlocksFinalForm
+                        onSubmit={(newState) => {
+                            updateState({ ...state, ...newState });
+                        }}
+                        initialValues={state}
+                    >
+                        <Field
+                            label={intl.formatMessage({
+                                id: "comet.blocks.youTubeVideo.youtubeIdentifier",
+                                defaultMessage: "YouTube URL or YouTube Video ID",
+                            })}
+                            validate={validateIdentifier}
+                            name="youtubeIdentifier"
+                            component={FinalFormInput}
+                            fullWidth
+                        />
+                        <FieldContainer label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.aspectRatio", defaultMessage: "Aspect Ratio" })}>
+                            <Field name="aspectRatio" type="radio" value="16X9">
+                                {(props) => (
+                                    <FormControlLabel
+                                        label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.aspectRatio.16X9", defaultMessage: "16:9" })}
+                                        control={<FinalFormRadio {...props} />}
+                                    />
+                                )}
+                            </Field>
+                            <Field name="aspectRatio" type="radio" value="4X3">
+                                {(props) => (
+                                    <FormControlLabel
+                                        label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.aspectRatio.4X3", defaultMessage: "4:3" })}
+                                        control={<FinalFormRadio {...props} />}
+                                    />
+                                )}
+                            </Field>
+                        </FieldContainer>
+                        <Field
+                            label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.autoplay", defaultMessage: "Autoplay" })}
+                            name="autoplay"
+                            type="checkbox"
+                            component={FinalFormSwitch}
+                        />
+                        <Field
+                            label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.showControls", defaultMessage: "Show controls" })}
+                            name="showControls"
+                            type="checkbox"
+                            component={FinalFormSwitch}
+                        />
+                        <Field
+                            label={intl.formatMessage({ id: "comet.blocks.youTubeVideo.loop", defaultMessage: "Loop" })}
+                            name="loop"
+                            type="checkbox"
+                            component={FinalFormSwitch}
+                        />
+                    </BlocksFinalForm>
+                </SelectPreviewComponent>
+            </Box>
         );
     },