From 5cf5286e3c50b5f58f44eeeb48bbd3d635a30d5a Mon Sep 17 00:00:00 2001
From: Luca Bellenghi <lucabel@gmail.com>
Date: Wed, 4 Sep 2024 15:48:37 +0200
Subject: [PATCH] why qubica block

---
 .../locales/en/LC_MESSAGES/volto.po           |   4 +-
 .../locales/it/LC_MESSAGES/volto.po           |   4 +-
 packages/volto-blocks/locales/volto.pot       |   6 +-
 .../blocks/ImageAndTextBox/Edit.tsx           |  81 +++++++++++++-----
 .../blocks/ImageAndTextBox/EditItem.tsx       |  48 +++++++++--
 .../blocks/ImageAndTextBox/View.tsx           |  67 ++++++++++++---
 .../blocks/ImageAndTextBox/ViewItem.tsx       |  21 ++++-
 .../blocks/ImageAndTextBox/placeholder.png    | Bin 0 -> 2809 bytes
 .../blocks/ImageAndTextBox/schema.ts          |   2 +-
 .../blocks/ImageAndTextBox/styles.module.css  |  43 +++++++---
 10 files changed, 220 insertions(+), 56 deletions(-)
 create mode 100644 packages/volto-blocks/src/components/blocks/ImageAndTextBox/placeholder.png

diff --git a/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po b/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po
index 665bd29..11fccaa 100644
--- a/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po
+++ b/packages/volto-blocks/locales/en/LC_MESSAGES/volto.po
@@ -39,6 +39,7 @@ msgstr ""
 #. Default: "Text"
 #: components/blocks/Accordion/EditItem
 #: components/blocks/ImageAndTextBox/Edit
+#: components/blocks/ImageAndTextBox/EditItem
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Testimonials/Edit
 #: components/blocks/Testimonials/schema
@@ -54,6 +55,7 @@ msgstr ""
 #: components/blocks/Accordion/EditItem
 #: components/blocks/Accordion/schema
 #: components/blocks/ImageAndTextBox/Edit
+#: components/blocks/ImageAndTextBox/EditItem
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Testimonials/Edit
 #: components/blocks/Testimonials/schema
@@ -148,7 +150,7 @@ msgstr ""
 msgid "redturtle__volto-blocks__text7_img_column_width_title"
 msgstr ""
 
-#. Default: "Text 7"
+#. Default: "Image and Text Boxes"
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Text7/schema
 msgid "redturtle__volto-blocks__text7_title"
diff --git a/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po b/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po
index e457596..84a7276 100644
--- a/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po
+++ b/packages/volto-blocks/locales/it/LC_MESSAGES/volto.po
@@ -39,6 +39,7 @@ msgstr ""
 #. Default: "Text"
 #: components/blocks/Accordion/EditItem
 #: components/blocks/ImageAndTextBox/Edit
+#: components/blocks/ImageAndTextBox/EditItem
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Testimonials/Edit
 #: components/blocks/Testimonials/schema
@@ -54,6 +55,7 @@ msgstr "Testo"
 #: components/blocks/Accordion/EditItem
 #: components/blocks/Accordion/schema
 #: components/blocks/ImageAndTextBox/Edit
+#: components/blocks/ImageAndTextBox/EditItem
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Testimonials/Edit
 #: components/blocks/Testimonials/schema
@@ -148,7 +150,7 @@ msgstr ""
 msgid "redturtle__volto-blocks__text7_img_column_width_title"
 msgstr ""
 
-#. Default: "Text 7"
+#. Default: "Image and Text Boxes"
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Text7/schema
 msgid "redturtle__volto-blocks__text7_title"
diff --git a/packages/volto-blocks/locales/volto.pot b/packages/volto-blocks/locales/volto.pot
index 1d4dc1a..1d269da 100644
--- a/packages/volto-blocks/locales/volto.pot
+++ b/packages/volto-blocks/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-09-04T09:08:41.235Z\n"
+"POT-Creation-Date: 2024-09-04T13:48:23.392Z\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"
@@ -41,6 +41,7 @@ msgstr ""
 #. Default: "Text"
 #: components/blocks/Accordion/EditItem
 #: components/blocks/ImageAndTextBox/Edit
+#: components/blocks/ImageAndTextBox/EditItem
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Testimonials/Edit
 #: components/blocks/Testimonials/schema
@@ -56,6 +57,7 @@ msgstr ""
 #: components/blocks/Accordion/EditItem
 #: components/blocks/Accordion/schema
 #: components/blocks/ImageAndTextBox/Edit
+#: components/blocks/ImageAndTextBox/EditItem
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Testimonials/Edit
 #: components/blocks/Testimonials/schema
@@ -150,7 +152,7 @@ msgstr ""
 msgid "redturtle__volto-blocks__text7_img_column_width_title"
 msgstr ""
 
-#. Default: "Text 7"
+#. Default: "Image and Text Boxes"
 #: components/blocks/ImageAndTextBox/schema
 #: components/blocks/Text7/schema
 msgid "redturtle__volto-blocks__text7_title"
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/Edit.tsx b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/Edit.tsx
index 866107f..220060e 100644
--- a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/Edit.tsx
+++ b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/Edit.tsx
@@ -1,9 +1,9 @@
-import { Icon, SidebarPortal } from '@plone/volto/components';
+import type { BlockEditProps } from '@plone/types';
+import { Icon, SidebarPortal, UniversalLink } from '@plone/volto/components';
 import { BlockDataForm } from '@plone/volto/components/manage/Form';
 import cx from 'classnames';
 import { defineMessages, useIntl } from 'react-intl';
-
-import type { BlockEditProps } from '@plone/types';
+import placeholder from './placeholder.png';
 
 import type { ImageAndTextBoxData } from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/schema';
 import styles from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/styles.module.css';
@@ -13,7 +13,7 @@ import {
 } from '@redturtle/volto-rt-slate';
 
 import config from '@plone/registry';
-// import EditItem from './EditItem';
+import EditItem from './EditItem';
 
 type ImageAndTextBoxEditProps = Omit<BlockEditProps, 'data'> & {
   data: ImageAndTextBoxData;
@@ -55,23 +55,24 @@ export default function Edit(props: ImageAndTextBoxEditProps) {
         className={cx('block-imageandtextbox', styles.imageandtextbox)}
         aria-label={data.title}
       >
-        <Container
-          className={cx(
-            'block-imageandtextbox-container',
-            styles['block-imageandtextbox-container'],
-          )}
-        >
-          {data.image ? (
-            <Image
-              className={cx('block-imageandtextbox-image', styles.image)}
-              // TODO serialize image brain in the backend
-              src={`${data.image}/@@images/image/large`}
-              loading="lazy"
-              alt=""
-            />
-          ) : (
-            <div className="image-add">Upload image</div>
-          )}
+        {data.image ? (
+          <Image
+            className={cx('block-imageandtextbox-image', styles.image)}
+            // TODO serialize image brain in the backend
+            src={`${data.image}/@@images/image/large`}
+            loading="lazy"
+            alt=""
+          />
+        ) : (
+          <Image
+            className={cx('block-imageandtextbox-image', styles.image)}
+            // TODO serialize image brain in the backend
+            src={placeholder}
+            loading="lazy"
+            alt=""
+          />
+        )}
+        <Container className={cx(styles['block-imageandtextbox-container'])}>
           <div className={cx('box-wrapper', styles['box-wrapper'])}>
             <TextEditorWidget
               {...props}
@@ -86,6 +87,8 @@ export default function Edit(props: ImageAndTextBoxEditProps) {
               }}
               showToolbar={false}
               placeholder={intl.formatMessage(messages.title)}
+              onFocusPreviousBlock={onFocusPreviousBlock}
+              onFocusNextBlock={onFocusNextBlock}
             />
             <TextEditorWidget
               {...props}
@@ -96,8 +99,42 @@ export default function Edit(props: ImageAndTextBoxEditProps) {
                 setSelectedField('title');
               }}
               placeholder={intl.formatMessage(messages.text)}
+              onFocusPreviousBlock={onFocusPreviousBlock}
+              onFocusNextBlock={onFocusNextBlock}
             />
-            {/* {data.boxes ? <EditItem /> : ''} */}
+            <div className={cx('block-imageandtextbox-boxes', styles.boxes)}>
+              {data.boxes?.length > 0 &&
+                data.boxes.map((item) => (
+                  <EditItem
+                    data={item}
+                    focusOn={selectedField}
+                    setFocusOn={setSelectedField}
+                    onChange={(id, field, value) => {
+                      onChangeBlock(block, {
+                        ...data,
+                        boxes: data.boxes.map((i) =>
+                          i['@id'] === id ? { ...i, [field]: value } : i,
+                        ),
+                      });
+                    }}
+                    // @ts-expect-error TODO fix type in @plone/types
+                    selected={selected}
+                  />
+                ))}
+            </div>
+            {data.linkHref?.[0] && (
+              <div className={cx(styles['block-imageandtextbox-cta'])}>
+                <UniversalLink
+                  href={data.linkHref ? data.linkHref[0]['@id'] : undefined}
+                  openLinkInNewTab={false}
+                  onClick={(e: React.SyntheticEvent<HTMLLinkElement>) => {
+                    e.preventDefault();
+                  }}
+                >
+                  {data.linkTitle}
+                </UniversalLink>
+              </div>
+            )}
           </div>
         </Container>
       </section>
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/EditItem.tsx b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/EditItem.tsx
index 261e75a..c5526e9 100644
--- a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/EditItem.tsx
+++ b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/EditItem.tsx
@@ -5,6 +5,7 @@ import type { ArrayElement } from '@plone/types';
 
 import type { ImageAndTextBoxData } from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/schema';
 import styles from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/styles.module.css';
+import { TextEditorWidget } from '@redturtle/volto-rt-slate';
 
 type Props = {
   data: ArrayElement<ImageAndTextBoxData['boxes']>;
@@ -23,11 +24,46 @@ export default function EditItem({
 }: Props) {
   const intl = useIntl();
 
-  if (__SERVER__) {
-    return <div />;
-  }
-
-  return <div className={cx('block-imageandtextbox', styles.item)}>BOX</div>;
+  return (
+    <div className={cx(styles['block-imageandtextbox-box'])}>
+      <TextEditorWidget
+        wrapClass={cx('block-imageandtextbox-box-title')}
+        as="h3"
+        block={data['@id']}
+        data={data}
+        fieldName="title"
+        selected={selected && focusOn === 'title' + data['@id']}
+        setSelected={() => setFocusOn('title' + data['@id'])}
+        onChangeBlock={(id: string, value: { title: string }) => {
+          onChange(id, 'title', value.title);
+        }}
+        showToolbar={false}
+        placeholder={intl.formatMessage(messages.title)}
+      />
+      <TextEditorWidget
+        wrapClass={cx('block-accordion-item-text')}
+        as="div"
+        block={data['@id']}
+        data={data}
+        fieldName="text"
+        selected={selected && focusOn === 'text' + data['@id']}
+        setSelected={() => setFocusOn('text' + data['@id'])}
+        onChangeBlock={(id: string, value: { text: string }) => {
+          onChange(id, 'text', value.text);
+        }}
+        placeholder={intl.formatMessage(messages.text)}
+      />
+    </div>
+  );
 }
 
-const messages = defineMessages({});
+const messages = defineMessages({
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  text: {
+    id: 'Text',
+    defaultMessage: 'Text',
+  },
+});
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/View.tsx b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/View.tsx
index 4cbdf73..38397ab 100644
--- a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/View.tsx
+++ b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/View.tsx
@@ -1,9 +1,13 @@
 import type { BlockViewProps } from '@plone/types';
+import { UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
 import cx from 'classnames';
 
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import type { ImageAndTextBoxData } from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/schema';
 import styles from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/styles.module.css';
 import ViewItem from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/ViewItem';
+import placeholder from './placeholder.png';
 
 import config from '@plone/registry';
 
@@ -13,27 +17,68 @@ type Props = Omit<BlockViewProps, 'data'> & {
 
 export default function View({ data, className, style }: Props) {
   const Container = config.getComponent('Container').component || 'div';
+  const Image = config.getComponent('Image').component;
 
   return (
     <section
-      className={cx('block-imageandtextbox', styles.block, className)}
-      style={style}
+      className={cx('block-imageandtextbox', styles.imageandtextbox)}
       aria-label={data.title}
     >
-      <Container
-        className={cx('block-imageandtextbox-container', styles.container)}
-      >
-        {data.title && (
-          <h2 className={cx('block-imageandtextbox-title', styles.title)}>
-            {data.title}
-          </h2>
-        )}
-        <div className={cx('block-qubica-wrapper', styles.wrapper)}>
+      {data.image ? (
+        <Image
+          className={cx('block-imageandtextbox-image', styles.image)}
+          // TODO serialize image brain in the backend
+          src={`${data.image}/@@images/image/large`}
+          loading="lazy"
+          alt=""
+        />
+      ) : (
+        <Image
+          className={cx('block-imageandtextbox-image', styles.image)}
+          // TODO serialize image brain in the backend
+          src={placeholder}
+          loading="lazy"
+          alt=""
+        />
+      )}
+      <Container className={cx(styles['block-imageandtextbox-container'])}>
+        <div className={cx('box-wrapper', styles['box-wrapper'])}>
+          {data.title && (
+            <h2 className={cx('block-imageandtextbox-title', styles.title)}>
+              {data.title}
+            </h2>
+          )}
+          {data.text && (
+            <div className={cx('block-imageandtextbox-text', styles.text)}>
+              <TextBlockView data={{ value: data.text ?? {} }} />
+            </div>
+          )}
+        </div>
+        <div className={cx('block-imageandtextbox-boxes', styles.boxes)}>
           {data.boxes?.length > 0 &&
             data.boxes.map((item) => (
               <ViewItem key={item['@id']} data={item} />
             ))}
         </div>
+        {data.linkHref?.[0] && (
+          <div
+            className={cx(
+              'block-imageandtextbox-cta',
+              styles['block-imageandtextbox-cta'],
+            )}
+          >
+            <UniversalLink
+              href={
+                data.linkHref
+                  ? flattenToAppURL(data.linkHref[0]['@id'])
+                  : undefined
+              }
+              openLinkInNewTab={false}
+            >
+              {data.linkTitle}
+            </UniversalLink>
+          </div>
+        )}
       </Container>
     </section>
   );
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/ViewItem.tsx b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/ViewItem.tsx
index d98d758..70cc768 100644
--- a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/ViewItem.tsx
+++ b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/ViewItem.tsx
@@ -1,7 +1,7 @@
 import cx from 'classnames';
 
 import type { ArrayElement } from '@plone/types';
-
+import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import type { ImageAndTextBoxData } from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/schema';
 import styles from '@redturtle/volto-blocks/components/blocks/ImageAndTextBox/styles.module.css';
 
@@ -10,5 +10,22 @@ type Props = {
 };
 
 export default function ViewItem({ data }: Props) {
-  return <div className={cx('block-imageandtextbox', styles.item)}>BOX</div>;
+  return (
+    <div className={cx(styles['block-imageandtextbox-box'])}>
+      {data.title && (
+        <div className={cx(styles['box-title'])}>
+          {data.title && (
+            <h3 className={cx('block-imageandtextbox-title', styles.title)}>
+              {data.title}
+            </h3>
+          )}
+        </div>
+      )}
+      {data.text && (
+        <div className={cx('block-iconsandtext-text', styles.text)}>
+          <TextBlockView data={{ value: data.text ?? {} }} />
+        </div>
+      )}
+    </div>
+  );
 }
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/placeholder.png b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..d57c4b60dfb693054fd377afc7e94fe83c1e43e0
GIT binary patch
literal 2809
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
ARR910

literal 0
HcmV?d00001

diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/schema.ts b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/schema.ts
index fb85b31..ef14819 100644
--- a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/schema.ts
+++ b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/schema.ts
@@ -15,7 +15,7 @@ export interface ImageAndTextBoxData extends CtaBlockExtender {
 const messages = defineMessages({
   title: {
     id: 'redturtle__volto-blocks__text7_title',
-    defaultMessage: 'Text 7',
+    defaultMessage: 'Image and Text Boxes',
   },
   images_title: {
     id: 'redturtle__volto-blocks__text7_images_title',
diff --git a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/styles.module.css b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/styles.module.css
index 38de9f6..03802d4 100644
--- a/packages/volto-blocks/src/components/blocks/ImageAndTextBox/styles.module.css
+++ b/packages/volto-blocks/src/components/blocks/ImageAndTextBox/styles.module.css
@@ -1,10 +1,12 @@
 .imageandtextbox {
   position: relative;
+  display: flex;
   width: 100%;
-  height: 300px;
-  /* overflow: hidden; */
+  min-height: 300px;
+  align-items: center;
+  justify-content: flex-end;
 }
-.block-imageandtextbox-container img {
+.imageandtextbox img {
   position: absolute;
   z-index: 0;
   top: 0;
@@ -14,14 +16,35 @@
   object-fit: cover;
 }
 
-.box-wrapper {
+.block-imageandtextbox-container {
   position: relative;
   z-index: 1;
-  top: 50%;
-  right: 100px;
-  width: 30%;
-  padding: 20px;
+  width: 40%;
+  height: 80%;
+  padding: 1em;
   border-radius: 5px;
-  background-color: white;
-  float: right;
+  margin-top: 10%;
+  margin-right: 3%;
+  margin-bottom: 10%;
+  background-color: #ffffff;
+}
+
+.boxes {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.block-imageandtextbox-box {
+  box-sizing: border-box; /* Include padding and border in width calculation */
+  flex: 1 1 33%; /* Flex-grow, flex-shrink, and flex-basis */
+  padding: 10px;
+}
+
+.block-imageandtextbox-box h3 {
+  border-bottom: 1px solid #ddd;
+}
+
+.block-imageandtextbox-cta {
+  margin-top: 1em;
+  text-align: center;
 }