Allow customizing iframe block width (#1299)

rage · Jul 30, 2024 · 604715d · 604715d
1 parent 8d8e0e9
commit 604715d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/services/cms/src/blocks/Iframe/IframeEditor.tsx b/services/cms/src/blocks/Iframe/IframeEditor.tsx
@@ -48,7 +48,15 @@ const IframeEditor: React.FC<React.PropsWithChildren<BlockEditProps<IframeAttrib
             <TextField
               value={attributes.heightPx?.toString() ?? IFRAME_BLOCK_DEFAULT_HEIGHT_PX}
               onChangeByValue={(newValue) => setAttributes({ heightPx: Number(newValue) })}
-              label="Height"
+              label="Height px"
+            />
+            <TextField
+              value={attributes.widthPx}
+              onChangeByValue={(newValue) =>
+                setAttributes({ widthPx: newValue === "" ? undefined : Number(newValue) })
+              }
+              placeholder="Auto"
+              label="Width px (leave empty for auto)"
             />
           </PanelBody>
         </InspectorControls>

diff --git a/services/cms/src/blocks/Iframe/index.tsx b/services/cms/src/blocks/Iframe/index.tsx
@@ -8,6 +8,7 @@ import IframeSave from "./IframeSave"
 export interface IframeAttributes {
   url: string | undefined
   heightPx: number
+  widthPx: number | undefined
 }
 
 export const IFRAME_BLOCK_DEFAULT_HEIGHT_PX = 630
@@ -25,6 +26,10 @@ const IframeBoxConfiguration: BlockConfiguration<IframeAttributes> = {
       type: "number",
       default: IFRAME_BLOCK_DEFAULT_HEIGHT_PX,
     },
+    widthPx: {
+      type: "number",
+      default: undefined,
+    },
   },
   icon,
   edit: IframeEditor,

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/IframeBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/IframeBlock.tsx
@@ -7,6 +7,7 @@ import BreakFromCentered from "@/shared-module/common/components/Centering/Break
 export interface IframeAttributes {
   url: string | undefined
   heightPx: number | undefined
+  widthPx: number | undefined
 }
 
 const IFRAME = "iframe"
@@ -16,19 +17,21 @@ export const IframeBlock: React.FC<BlockRendererProps<IframeAttributes>> = (prop
     return null
   }
 
+  const { heightPx, widthPx } = props.data.attributes
+
   return (
     <BreakFromCentered sidebar={false}>
       <figure
         className={css`
           width: 100%;
-          max-width: 1000px;
+          max-width: ${widthPx ?? 1000}px;
           margin: 4rem auto;
         `}
       >
         <iframe
           className={css`
             width: 100%;
-            height: ${props.data.attributes.heightPx ?? 630}px;
+            height: ${heightPx ?? 630}px;
             border: none;
             overflow: hidden;
           `}