add blockExtension and className extension support

news/2.feature

@@ -0,0 +1 @@
+Add support of block and class extensions @ionlizarazu

src/Edit.jsx

@@ -3,7 +3,7 @@ import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
 import { useIntl } from 'react-intl';
 
 import { CountUpBlockSchema } from './schema';
-import { BlockViewComponent } from './View';
+import CountUpBlockView from './View';
 
 export const CountUpBlockEdit = (props) => {
   const { block, data, selected } = props;
@@ -28,7 +28,7 @@ export const CountUpBlockEdit = (props) => {
           onChangeField={handleChange}
         />
       </SidebarPortal>
-      <BlockViewComponent data={data} />
+      <CountUpBlockView data={data} />
     </>
   );
 };

src/View.jsx

@@ -1,46 +1,23 @@
 import React from 'react';
 import CountUp from 'react-countup';
 import { Segment } from 'semantic-ui-react';
-export const BlockViewComponent = ({ data }) => {
-  // Counter config
-  const {
-    start,
-    end,
-    duration,
-    prefix,
-    suffix,
-    decimal,
-    decimals,
-    separator,
-    delay = 2,
-  } = data;
+import { withBlockExtensions } from '@plone/volto/helpers';
+
+const CountUpBlockView = ({ data, className }) => {
+  const { delay = 2 } = data;
 
   // Title config
   const { title, titleTag, titlePosition = 'above' } = data;
   const TitleTag = titleTag || 'h2';
 
   return (
-    <Segment>
+    <Segment className={className}>
       {title && titlePosition === 'above' && <TitleTag>{title}</TitleTag>}
 
-      <CountUp
-        delay={delay}
-        start={start}
-        end={end}
-        duration={duration}
-        prefix={prefix}
-        suffix={suffix}
-        decimal={decimal}
-        decimals={decimals}
-        separator={separator}
-      />
+      <CountUp {...data} delay={delay} />
       {title && titlePosition === 'below' && <TitleTag>{title}</TitleTag>}
     </Segment>
   );
 };
 
-export const CountUpBlockView = (props) => {
-  const { data } = props;
-
-  return <BlockViewComponent data={data} />;
-};
+export default withBlockExtensions(CountUpBlockView);

src/index.js

@@ -1,13 +1,13 @@
 import { CountUpBlockEdit } from './Edit.jsx';
-import { CountUpBlockView } from './View.jsx';
-import mapSVG from '@plone/volto/icons/map.svg';
+import CountUpBlockView from './View.jsx';
+import iconSVG from '@plone/volto/icons/circle-top.svg';
 
 const applyConfig = (config) => {
   // Own blocks
   config.blocks.blocksConfig['countUpBlock'] = {
     id: 'countUpBlock',
     title: 'Count Up',
-    icon: mapSVG,
+    icon: iconSVG,
     edit: CountUpBlockEdit,
     view: CountUpBlockView,
     restricted: false,

src/schema.js

@@ -3,7 +3,7 @@ import messages from './messages.js';
 
 export const CountUpBlockSchema = (intl, data) => {
   const decimals =
-    data.start % 1 !== 0 || data.end % 1 !== 0 ? [('decimal', 'decimals')] : [];
+    data.start % 1 !== 0 || data.end % 1 !== 0 ? ['decimal', 'decimals'] : [];
   const thousands = data.start >= 1000 || data.end >= 1000 ? ['separator'] : [];
   const separator =
     decimals.length || thousands.length