Add preserve aspect ratio feature

packages/volto-iframe-block/locales/de/LC_MESSAGES/volto.po

@@ -53,6 +53,16 @@ msgstr "Keine Iframe-Quelle angegeben"
 msgid "Open in a new tab"
 msgstr "In neuem Tab öffnen"
 
+#. Default: "Preserve aspect ratio"
+#: components/schema
+msgid "Preserve aspect ratio"
+msgstr "Seitenverhältnis beibehalten"
+
+#. Default: "Preserve aspect ratio based on initial width and height"
+#: components/schema
+msgid "Preserve aspect ratio based on initial width and height"
+msgstr "Seitenverhältnis basierend auf der ursprünglichen Breite und Höhe beibehalten"
+
 #. Default: "Provide an iFrame title for better accessibility for screenreaders (title will not be visible),"
 #: components/schema
 msgid "Provide an iFrame title for better accessibility for screenreaders (title will not be visible),"

packages/volto-iframe-block/locales/en/LC_MESSAGES/volto.po

@@ -53,6 +53,16 @@ msgstr ""
 msgid "Open in a new tab"
 msgstr ""
 
+#. Default: "Preserve aspect ratio"
+#: components/schema
+msgid "Preserve aspect ratio"
+msgstr ""
+
+#. Default: "Preserve aspect ratio based on initial width and height"
+#: components/schema
+msgid "Preserve aspect ratio based on initial width and height"
+msgstr ""
+
 #. Default: "Provide an iFrame title for better accessibility for screenreaders (title will not be visible),"
 #: components/schema
 msgid "Provide an iFrame title for better accessibility for screenreaders (title will not be visible),"

packages/volto-iframe-block/locales/es/LC_MESSAGES/volto.po

@@ -60,6 +60,16 @@ msgstr ""
 msgid "Open in a new tab"
 msgstr ""
 
+#. Default: "Preserve aspect ratio"
+#: components/schema
+msgid "Preserve aspect ratio"
+msgstr ""
+
+#. Default: "Preserve aspect ratio based on initial width and height"
+#: components/schema
+msgid "Preserve aspect ratio based on initial width and height"
+msgstr ""
+
 #. Default: "Provide an iFrame title for better accessibility for screenreaders (title will not be visible),"
 #: components/schema
 msgid "Provide an iFrame title for better accessibility for screenreaders (title will not be visible),"

packages/volto-iframe-block/locales/pt_BR/LC_MESSAGES/volto.po

@@ -58,6 +58,16 @@ msgstr ""
 msgid "Open in a new tab"
 msgstr ""
 
+#. Default: "Preserve aspect ratio"
+#: components/schema
+msgid "Preserve aspect ratio"
+msgstr ""
+
+#. Default: "Preserve aspect ratio based on initial width and height"
+#: components/schema
+msgid "Preserve aspect ratio based on initial width and height"
+msgstr ""
+
 #. Default: "Provide an iFrame title for better accessibility for screenreaders (title will not be visible),"
 #: components/schema
 msgid "Provide an iFrame title for better accessibility for screenreaders (title will not be visible),"

packages/volto-iframe-block/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2025-02-25T10:06:06.493Z\n"
+"POT-Creation-Date: 2025-08-25T20:18:20.822Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -55,6 +55,16 @@ msgstr ""
 msgid "Open in a new tab"
 msgstr ""
 
+#. Default: "Preserve aspect ratio"
+#: components/schema
+msgid "Preserve aspect ratio"
+msgstr ""
+
+#. Default: "Preserve aspect ratio based on initial width and height"
+#: components/schema
+msgid "Preserve aspect ratio based on initial width and height"
+msgstr ""
+
 #. Default: "Provide an iFrame title for better accessibility for screenreaders (title will not be visible),"
 #: components/schema
 msgid "Provide an iFrame title for better accessibility for screenreaders (title will not be visible),"

packages/volto-iframe-block/news/11.feature

@@ -0,0 +1 @@
+Add preserve aspect ratio option to improve responsiveness. @danalvrz

packages/volto-iframe-block/src/components/Data.jsx

@@ -31,6 +31,8 @@ const IframeSidebar = (props) => {
       align: undefined,
       height: undefined,
       credit: undefined,
+      preserveAspectRatio: undefined,
+      calculatedAspectRatio: undefined,
     });
     resetSubmitUrl();
   };

packages/volto-iframe-block/src/components/Edit.jsx

@@ -4,7 +4,7 @@ import Icon from '@plone/volto/components/theme/Icon/Icon';
 import aheadSVG from '@plone/volto/icons/ahead.svg';
 import applicationSVG from '@plone/volto/icons/application.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { defineMessages } from 'react-intl';
 import { toast } from 'react-toastify';
 
@@ -29,6 +29,8 @@ const messages = defineMessages({
 const IframeEdit = (props) => {
   const { data, intl } = props;
   const [url, setUrl] = useState('');
+  const iframeRef = useRef(null);
+  const [aspectRatio, setAspectRatio] = useState(null);
 
   const onChangeUrl = ({ target }) => {
     setUrl(target.value);
@@ -64,10 +66,40 @@ const IframeEdit = (props) => {
     }
   };
 
+  const calculateAspectRatio = (iframe) => {
+    const rect = iframe.getBoundingClientRect();
+    if (rect.width > 0 && rect.height > 0) {
+      const ratio = rect.width / rect.height;
+      setAspectRatio(ratio);
+    }
+  };
+
+  useEffect(() => {
+    if (iframeRef.current) {
+      calculateAspectRatio(iframeRef.current);
+    }
+  }, [data.preserveAspectRatio, data.src, data.height, data.width]);
+
+  useEffect(() => {
+    if (aspectRatio && data.preserveAspectRatio) {
+      props.onChangeBlock(props.block, {
+        ...props.data,
+        calculatedAspectRatio: aspectRatio,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    aspectRatio,
+    data.preserveAspectRatio,
+    data.src,
+    data.height,
+    data.width,
+  ]);
+
   return (
     <div>
       {data.src ? (
-        <IframeView {...props} />
+        <IframeView isEditMode {...props} iframeRef={iframeRef} />
       ) : (
         <div>
           <center>

packages/volto-iframe-block/src/components/View.jsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { isValidUrl } from '@kitconcept/volto-iframe-block/helpers/isValidUrl';
 
 const IframeView = (props) => {
-  const { className, data } = props;
+  const { className, data, iframeRef, isEditMode } = props;
   const width =
     data.width === 'center'
       ? '620px'
@@ -16,8 +16,24 @@ const IframeView = (props) => {
     <div className={cx('block iframe align', data.align, className)}>
       <div className="block-container">
         {data.src && isValidUrl(data.src) && (
-          <figure style={{ width: width }}>
-            <iframe src={data.src} title={data.title} height={data.height} />
+          <figure style={{ width: width, maxWidth: '100%' }}>
+            <iframe
+              ref={iframeRef}
+              src={data.src}
+              title={data.title}
+              height={
+                data.preserveAspectRatio &&
+                data.calculatedAspectRatio &&
+                !isEditMode
+                  ? 'auto'
+                  : data.height
+              }
+              style={
+                data.preserveAspectRatio && data.calculatedAspectRatio
+                  ? { aspectRatio: data.calculatedAspectRatio.toString() }
+                  : {}
+              }
+            />
             <figcaption>
               {data.title && <div className="title">{data.title}</div>}
               {data.description && (

packages/volto-iframe-block/src/components/schema.jsx

@@ -47,6 +47,14 @@ const messages = defineMessages({
     defaultMessage:
       'Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)',
   },
+  PreserveAspectRatio: {
+    id: 'Preserve aspect ratio',
+    defaultMessage: 'Preserve aspect ratio',
+  },
+  PreserveAspectRatioHint: {
+    id: 'Preserve aspect ratio based on initial width and height',
+    defaultMessage: 'Preserve aspect ratio based on initial width and height',
+  },
 });
 
 export const IframeBlockSchema = (props) => ({
@@ -56,7 +64,15 @@ export const IframeBlockSchema = (props) => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['src', 'title', 'description', 'credit', 'width', 'height'],
+      fields: [
+        'src',
+        'title',
+        'description',
+        'credit',
+        'width',
+        'height',
+        'preserveAspectRatio',
+      ],
     },
   ],
 
@@ -101,6 +117,12 @@ export const IframeBlockSchema = (props) => ({
       widget: 'text',
       description: props.intl.formatMessage(messages.TextHintPixels),
     },
+    preserveAspectRatio: {
+      title: props.intl.formatMessage(messages.PreserveAspectRatio),
+      description: props.intl.formatMessage(messages.PreserveAspectRatioHint),
+      type: 'boolean',
+      default: false,
+    },
   },
   required: [],
 });