Merge pull request #3 from eea/develop

Update quote + add testimonial quote variation

CHANGELOG.md

@@ -4,9 +4,24 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.2.0](https://github.com/eea/volto-quote-block/compare/0.1.2...0.2.0)
+
+- refactor(quote): Rename sourceInfo field to extra [`51a9e32`](https://github.com/eea/volto-quote-block/commit/51a9e329e6d0a8b1caaadd42ccad1bd54e862210)
+- Upgrade footnotes registry to work with volto-slate-footnotes 5.x [`3261f27`](https://github.com/eea/volto-quote-block/commit/3261f27d8749a022171ecdf8c854da832c40a2b9)
+- Move reversed option to layout fieldset [`f0a94ac`](https://github.com/eea/volto-quote-block/commit/f0a94ac92820adc661030b095dc91fe048791e26)
+- Fix schema [`f27fc86`](https://github.com/eea/volto-quote-block/commit/f27fc86025a004adc700f4f8ba36a080626a94af)
+- Add volto-slate back [`a518905`](https://github.com/eea/volto-quote-block/commit/a518905f5a7a98213db0fd99396334dd2dbacef2)
+- Use attached image widget [`c6acaa0`](https://github.com/eea/volto-quote-block/commit/c6acaa08ab9d985c963debff78e4d989b90556ac)
+- Add footnotes support [`c63729c`](https://github.com/eea/volto-quote-block/commit/c63729cafce78dfe98d875d70214b3d8fd6c1f11)
+- Prettier fix [`e4dd69a`](https://github.com/eea/volto-quote-block/commit/e4dd69a3051da854435093dc30f8048a650798a2)
+- Remove usememo [`b5880a5`](https://github.com/eea/volto-quote-block/commit/b5880a5a1cf5c9889ec4c211c60f51986fd6255d)
+- Update quote + add testimonial quote variation [`b248fa1`](https://github.com/eea/volto-quote-block/commit/b248fa1ed2adcd59050e907784bac126a74e145f)
+
 #### [0.1.2](https://github.com/eea/volto-quote-block/compare/0.1.1...0.1.2)
 
-- Disable Blockquote template for now and fix reversed pullquote [`c1a665a`](https://github.com/eea/volto-quote-block/commit/c1a665a32218baa39d12e4d987ad12b0249ab571)
+> 17 May 2022
+
+- Disable Blockquote template for now and fix reversed pullquote [`#2`](https://github.com/eea/volto-quote-block/pull/2)
 
 #### [0.1.1](https://github.com/eea/volto-quote-block/compare/0.1.0...0.1.1)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-quote-block",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "@eeacms/volto-quote-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -17,11 +17,13 @@
     "url": "git@github.com:eea/volto-quote-block.git"
   },
   "addons": [
+    "@eeacms/volto-object-widget",
     "volto-slate"
   ],
   "dependencies": {
     "@plone/scripts": "*",
-    "volto-slate": "*"
+    "volto-slate": "*",
+    "@eeacms/volto-object-widget": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

src/Blocks/Quote/Edit.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { SidebarPortal } from '@plone/volto/components';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
 import View from './View';
 import getSchema from './schema';
 
@@ -16,7 +15,8 @@ const Edit = (props) => {
       <View {...props} mode="edit" />
 
       <SidebarPortal selected={selected}>
-        <InlineForm
+        <BlockDataForm
+          block={block}
           schema={schema}
           title={schema.title}
           onChangeField={(id, value) => {

src/Blocks/Quote/View.jsx

@@ -1,26 +1,13 @@
 import React from 'react';
-import config from '@plone/volto/registry';
+import { withBlockExtensions } from '@plone/volto/helpers';
 
 import './styles.less';
 
 const View = (props) => {
-  const { data, mode, block, onChangeBlock } = props;
-  const { template = 'default' } = data;
-
-  const Quote =
-    config.blocks.blocksConfig.quote.templates[template]?.view || (() => '');
-
-  React.useEffect(() => {
-    if (mode === 'edit' && !template) {
-      onChangeBlock(block, {
-        ...data,
-        template: 'default',
-      });
-    }
-    /* eslint-disable-next-line */
-  }, []);
+  const { variation } = props;
 
+  const Quote = variation?.view;
   return <Quote {...props} />;
 };
 
-export default View;
+export default withBlockExtensions(View);

src/Blocks/Quote/index.js

@@ -1,7 +1,7 @@
 import quoteSVG from '@plone/volto/icons/quote.svg';
 import QuoteEdit from './Edit';
 import QuoteView from './View';
-import PullquoteView from './templates/Pullquote/Pullquote';
+import QuoteVariations from './variations';
 
 export default (config) => {
   config.blocks.blocksConfig.quote = {
@@ -11,16 +11,7 @@ export default (config) => {
     group: 'text',
     edit: QuoteEdit,
     view: QuoteView,
-    templates: {
-      default: {
-        title: 'Quote',
-        view: PullquoteView,
-        icons: {
-          openQuote: 'quote left',
-          closeQuote: 'quote right',
-        },
-      },
-    },
+    variations: QuoteVariations,
     blockHasOwnFocusManagement: true,
     restricted: false,
     mostUsed: false,
@@ -30,5 +21,12 @@ export default (config) => {
       view: [],
     },
   };
+
+  // Footnotes
+  config.settings.blocksWithFootnotesSupport = {
+    ...(config.settings.blocksWithFootnotesSupport || {}),
+    quote: ['value', 'source', 'extra', 'title'],
+  };
+
   return config;
 };

src/Blocks/Quote/schema.js

@@ -2,67 +2,43 @@ import config from '@plone/volto/registry';
 
 export default (props) => {
   const { position } = props.data;
-  const templatesConfig = config.blocks.blocksConfig.quote?.templates;
-  const templates = Object.keys(templatesConfig).map((template) => [
-    template,
-    templatesConfig[template].title || template,
-  ]);
-  const schema =
-    templatesConfig[props.data?.template || 'default']?.schema || [];
-  const templateSchema = typeof schema === 'function' ? schema(props) : schema;
-  const defaultFieldset =
-    templateSchema.fieldsets?.filter(
-      (fieldset) => fieldset.id === 'default',
-    )[0] || {};
+  const variations = config.blocks.blocksConfig.quote.variations;
+
   return {
-    title: templateSchema.title || 'Quote',
+    title: 'Quote',
     fieldsets: [
       {
         id: 'default',
         title: 'Default',
         fields: [
-          'template',
+          'variation',
           ...(position && ['left', 'right'].includes(position)
-            ? ['quote']
+            ? ['value']
             : []),
-          'reversed',
-          'position',
           'source',
-          'metadata',
-          ...(defaultFieldset?.fields || []),
+          'extra',
         ],
       },
-      ...(templateSchema.fieldsets?.filter(
-        (fieldset) => fieldset.id !== 'default',
-      ) || []),
     ],
     properties: {
-      template: {
-        title: 'Template',
-        choices: templates,
-      },
-      reversed: {
-        title: 'Reversed',
-        type: 'boolean',
-      },
-      position: {
-        title: 'Alignment',
-        widget: 'align',
+      variation: {
+        title: 'Variation',
+        choices: variations.map((extension) => [extension.id, extension.title]),
+        defaultValue: 'default',
       },
-      quote: {
+      value: {
         title: 'Quote',
-        widget: 'slate_richtext',
+        widget: 'slate',
       },
       source: {
         title: 'Source',
-        widget: 'slate_richtext',
+        widget: 'slate',
       },
-      metadata: {
+      extra: {
         title: 'Extra info',
-        widget: 'slate_richtext',
+        widget: 'slate',
       },
-      ...(templateSchema.properties || {}),
     },
-    required: [...(templateSchema.required || [])],
+    required: [],
   };
 };

src/Blocks/Quote/styles.less

@@ -1,7 +1,7 @@
-.eea.blockquote .quote > *:not(.meta) {
-  margin-bottom: 0;
+.quote {
+  width: 100%;
 }
 
-.eea.pullquote .quotes {
-  flex-flow: column;
+div.quote {
+  margin-bottom: 1em;
 }