why qubica block

RedTurtle · Sep 4, 2024 · 5cf5286 · 5cf5286
1 parent da5d77d
commit 5cf5286
Show file tree

Hide file tree

Showing 10 changed files with 220 additions and 56 deletions.
diff --git 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
@@ -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
@@ -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 <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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',