Add image alignment options, Rename position field, Remove slate edit…

…or & add textarea field
kitconcept · Jan 8, 2024 · 31924d1 · 31924d1
1 parent a323bb9
commit 31924d1
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 52 deletions.
diff --git a/src/components/Edit.jsx b/src/components/Edit.jsx
@@ -1,42 +1,14 @@
-import { DetachedTextBlockEditor } from "@plone/volto-slate/blocks/Text/DetachedTextBlockEditor";
 import QuoteBlockSidebar from "./Data";
 import React from "react";
 import { SidebarPortal } from "@plone/volto/components";
-import config from "@plone/volto/registry";
-import { flattenToAppURL } from "@plone/volto/helpers";
+import View from "./View";
 
 const Edit = (props) => {
   const { data, block, onChangeBlock, selected } = props;
 
   return (
     <div className="block quote">
-      <div className="inner-wrapper">
-        {config?.blocks?.blocksConfig?.quote.isImageAllowed &&
-          data?.image?.[0] && (
-            <div className="image-wrapper">
-              <img
-                src={`${flattenToAppURL(data?.image[0]["@id"])}/${
-                  data?.image[0]?.image_scales.image[0]?.scales?.preview
-                    ?.download
-                }}`}
-                alt=""
-                className="image"
-                width="150"
-                height="150"
-                loading="lazy"
-              />
-            </div>
-          )}
-        <figure className="quotation">
-          <blockquote className="quote-text">
-            <DetachedTextBlockEditor {...props} />
-          </blockquote>
-          <figcaption className="author">
-            <span className="person">{data.person}</span>
-            {data.position && `, ${data.position}`}
-          </figcaption>
-        </figure>
-      </div>
+      <View {...props} isEditMode />
       <SidebarPortal selected={selected}>
         <QuoteBlockSidebar
           {...props}

diff --git a/src/components/View.jsx b/src/components/View.jsx
@@ -1,20 +1,20 @@
 import React from "react";
-import { TextBlockView } from "@plone/volto-slate/blocks/Text";
 import config from "@plone/volto/registry";
 import { flattenToAppURL } from "@plone/volto/helpers";
+import cx from "classnames";
 
 const View = (props) => {
   const { data } = props;
 
   return (
     <div className="block quote">
       <div className="inner-wrapper">
-        {config?.blocks?.blocksConfig?.quote.isImageAllowed &&
+        {config?.blocks?.blocksConfig?.quote.showImageField &&
           data?.image?.[0] && (
-            <div className="image-wrapper">
+            <div className={cx("image-wrapper", `align-${data.alignment}`)}>
               <img
                 src={`${flattenToAppURL(data?.image[0]["@id"])}/${
-                  data?.image[0]?.image_scales.image[0]?.scales?.preview
+                  data?.image[0]?.image_scales?.image[0]?.scales?.preview
                     ?.download
                 }}`}
                 alt={data.image[0].title}
@@ -24,12 +24,10 @@ const View = (props) => {
             </div>
           )}
         <figure className="quotation">
-          <blockquote className="quote-text">
-            <TextBlockView {...props} />
-          </blockquote>
+          <blockquote className="quote-text">{data.quote}</blockquote>
           <figcaption className="author">
             <span className="person">{data.person}</span>
-            {data.position && `, ${data.position}`}
+            {data.additionalData && `, ${data.additionalData}`}
           </figcaption>
         </figure>
       </div>

diff --git a/src/components/schema.js b/src/components/schema.js
@@ -2,7 +2,7 @@ import config from "@plone/volto/registry";
 import { defineMessages } from "react-intl";
 
 const messages = defineMessages({
-  quoteBlock: {
+  quote: {
     id: "Quote",
     defaultMessage: "Quote",
   },
@@ -14,43 +14,57 @@ const messages = defineMessages({
     id: "Name",
     defaultMessage: "Name",
   },
-  position: {
-    id: "Position",
-    defaultMessage: "Position",
+  additionalData: {
+    id: "Additional data",
+    defaultMessage: "Additional data",
+  },
+  alignment: {
+    id: "Alignment",
+    defineMessage: "Alignment",
   },
 });
 
-export const QuoteBlockSchema = (props) => {
+export const QuoteBlockSchema = ({ intl }) => {
   return {
-    title: props.intl.formatMessage(messages.quoteBlock),
+    title: intl.formatMessage(messages.quote),
     block: "quote",
     fieldsets: [
       {
         id: "default",
         title: "Default",
-        fields: config.blocks?.blocksConfig?.quote.isImageAllowed
-          ? ["image"]
-          : [],
+        fields: config?.blocks?.blocksConfig?.quote.showImageField
+          ? ["quote", "image", "alignment"]
+          : ["quote"],
       },
       {
         id: "person",
         title: "Person",
-        fields: ["person", "position"],
+        fields: ["person", "additionalData"],
       },
     ],
     properties: {
+      quote: {
+        title: intl.formatMessage(messages.quote),
+        widget: "textarea",
+      },
       image: {
-        title: props.intl.formatMessage(messages.image),
+        title: intl.formatMessage(messages.image),
         widget: "object_browser",
         mode: "image",
         allowExternals: true,
         selectedItemAttrs: ["image_field", "image_scales"],
       },
       person: {
-        title: props.intl.formatMessage(messages.name),
+        title: intl.formatMessage(messages.name),
+      },
+      additionalData: {
+        title: intl.formatMessage(messages.additionalData),
       },
-      position: {
-        title: props.intl.formatMessage(messages.position),
+      alignment: {
+        title: intl.formatMessage(messages.alignment),
+        widget: "align",
+        actions: ["left", "center", "right"],
+        default: "center",
       },
     },
     required: [],