Add quote block files

src/components/Data.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { BlockDataForm } from "@plone/volto/components";
+import { QuoteBlockSchema } from "./schema";
+
+const QuoteBlockData = (props) => {
+  const { data, block, onChangeBlock } = props;
+  const schema = QuoteBlockSchema(props);
+
+  return (
+    <BlockDataForm
+      schema={schema}
+      title={data.title}
+      onChangeField={(id, value) => {
+        onChangeBlock(block, {
+          ...data,
+          [id]: value,
+        });
+      }}
+      formData={data}
+      block={block}
+    />
+  );
+};
+
+export default QuoteBlockData;

src/components/Edit.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import View from "./View";
+import { SidebarPortal } from "@plone/volto/components";
+import QuoteBlockSidebar from "./Data";
+
+const Edit = (props) => {
+  const { data, block, onChangeBlock, selected } = props;
+
+  return (
+    <div className="block quote">
+      <View {...props} isEditMode />
+      <SidebarPortal selected={selected}>
+        <QuoteBlockSidebar
+          {...props}
+          data={data}
+          block={block}
+          onChangeBlock={onChangeBlock}
+        />
+      </SidebarPortal>
+    </div>
+  );
+};
+
+export default Edit;

src/components/View.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import cx from "classnames";
+
+const View = (props) => {
+  const { data } = props;
+  return (
+    <div className={cx("block quote")}>
+      <div className="inner-wrapper">
+        {data?.image?.[0] && (
+          <div className="quote-image-wrapper">
+            <img
+              src={`${flattenToAppURL(
+                data.image[0]["@id"]
+              )}/@@images/image/preview`}
+              alt=""
+              width="150"
+              height="150"
+              loading="lazy"
+              className="quote-image"
+            />
+          </div>
+        )}
+        <figure className="quotation">
+          <blockquote className="quote-text">{data.text}“</blockquote>
+          <figcaption className="author">
+            <span className="person">{data.person}</span>
+            {data.position && ", "}
+            {data.position}
+          </figcaption>
+        </figure>
+      </div>
+    </div>
+  );
+};
+
+export default View;

src/components/schema.js

@@ -0,0 +1,48 @@
+import { defineMessages } from "react-intl";
+
+const messages = defineMessages({
+  quoteBlock: {
+    id: "Quote",
+    defineMessage: "Quote",
+  },
+  image: {
+    id: "Image",
+    defineMessage: "Image",
+  },
+  person: {
+    id: "Person",
+    defineMessage: "Person",
+  },
+  position: {
+    id: "Position",
+    defineMessage: "Position",
+  },
+});
+
+export const QuoteBlockSchema = (props) => {
+  return {
+    title: props.intl.formatMessage(messages.quoteBlock),
+    block: "quote",
+    fieldsets: [
+      {
+        id: "default",
+        title: "Default",
+        fields: ["image", "person", "position"],
+      },
+    ],
+    properties: {
+      image: {
+        title: props.intl.formatMessage(messages.image),
+        widget: "object-browser",
+        mode: "image",
+      },
+      person: {
+        title: props.intl.formatMessage(messages.person),
+      },
+      position: {
+        title: props.intl.formatMessage(messages.position),
+      },
+    },
+    required: [],
+  };
+};

src/index.js

@@ -1,4 +1,25 @@
+import QuoteBlockView from "./components/View";
+import QuoteBlockEdit from "./components/Edit";
+import { QuoteBlockSchema } from "./components/schema";
+
+import quoteSVG from "@plone/volto/icons/quote.svg";
+
+import "./theme/main.less";
+
 const applyConfig = (config) => {
+  config.blocks.blocksConfig.quote = {
+    id: "quote",
+    title: "Quote",
+    group: "text",
+    icon: quoteSVG,
+    view: QuoteBlockView,
+    edit: QuoteBlockEdit,
+    blockSchema: QuoteBlockSchema,
+    restricted: false,
+    mostUsed: true,
+    sidebarTab: 1,
+  };
+
   return config;
 };