WIP

src/blocks/Listing/templates/CardsCarousel.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, Icon } from 'semantic-ui-react';
 import loadable from '@loadable/component';
 
-import { UniversalCard } from '@eeacms/volto-listing-block';
+import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
 import ResponsiveContainer from '@eeacms/volto-listing-block/components/ResponsiveContainer';
 
 const Slider = loadable(() => import('react-slick'));

src/blocks/Listing/templates/CardsGallery.jsx

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { UniversalCard } from '@eeacms/volto-listing-block';
+import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
 import config from '@plone/volto/registry';
 
 const CardsGallery = ({

src/blocks/Listing/templates/Summary.jsx

@@ -1,5 +1,5 @@
 import { ConditionalLink } from '@plone/volto/components';
-import { UniversalItem } from '@eeacms/volto-listing-block';
+import UniversalItem from '@eeacms/volto-listing-block/components/UniversalItem/UniversalItem';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
@@ -41,13 +41,10 @@ const SummaryListing = (props) => {
   );
 };
 
-SummaryListing.schemaEnhancer = (args) => {
-  const schema = UniversalItem.schemaEnhancer(args);
-  return schema;
-};
+SummaryListing.schemaEnhancer = UniversalItem.schemaEnhancer;
 
 SummaryListing.styleSchemaEnhancer = ({ schema }) => {
-  // console.log('style', schema);
+  console.log('style', schema);
   return schema;
 };
 

src/blocks/Teaser/Card.jsx

@@ -4,7 +4,7 @@ import { omit } from 'lodash';
 import { Message } from 'semantic-ui-react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { UniversalCard } from '@eeacms/volto-listing-block';
+import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
 
 import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
 

src/blocks/Teaser/index.js

@@ -2,7 +2,7 @@ import { compose } from 'redux';
 import TeaserCardTemplate from './Card';
 import { ListingStylingSchemaEnhancer } from '../Listing/schema';
 import { adjustTeaserSchema } from './schema';
-import { UniversalCard } from '@eeacms/volto-listing-block';
+import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
 
 export default (config) => {
   // Teaser

src/components/UniversalCard/UniversalCard.jsx

@@ -7,7 +7,7 @@ import { Item } from './model';
 import { getVoltoStyles } from '@eeacms/volto-listing-block/schema-utils';
 import schemaEnhancer from './schema';
 
-const UniversalCard = (props) => {
+function UniversalCard(props) {
   const { itemModel = {}, styles, item, ...rest } = props;
   const extension = resolveExtension(
     '@type',
@@ -27,7 +27,7 @@ const UniversalCard = (props) => {
       {...rest}
     />
   );
-};
+}
 
 UniversalCard.schemaEnhancer = schemaEnhancer;
 

src/components/UniversalItem/UniversalItem.jsx

@@ -4,7 +4,7 @@ import { Item } from './model';
 
 import universalItemSchemaEnhancer from './schema';
 
-const UniversalItem = (props) => {
+function UniversalItem(props) {
   const { itemModel = {}, item, ...rest } = props;
   const extension = resolveExtension(
     '@type',
@@ -14,7 +14,7 @@ const UniversalItem = (props) => {
   const ItemTemplate = extension.view;
 
   return <ItemTemplate item={new Item(item)} itemModel={itemModel} {...rest} />;
-};
+}
 
 UniversalItem.schemaEnhancer = universalItemSchemaEnhancer;
 

src/schema-utils.js

@@ -90,30 +90,36 @@ export const enhanceStylingSchema = ({
   formData,
   schema,
   blockType = 'listing',
-  extensionName = 'itemModel',
+  extensionName = 'itemTemplates',
   intl,
 }) => {
   // Adds (to the limited styles schema) the new styling schema enhancements
   schema = addStylesField({ formData, schema, intl });
 
-  const extensionType = '@type'; // the attribute name that's stored in the block data
-  const activeItemName = formData?.[extensionType];
+  // first, enhance styling schema based on the variation
+  // then, enhance it based on the `${extensionName}`
+  // TODO: use resolveExtensions() from Volto
+
   const blockConfig = config.blocks.blocksConfig[blockType];
   const activeVariation =
     formData['variation'] ||
     blockConfig.variations?.find(({ isDefault }) => isDefault) ||
     {};
-  const extensions = blockConfig.extensions;
-  const variations = extensions[extensionName];
-  let activeItem = variations?.find((item) => item.id === activeItemName);
 
-  // TODO: not needed after bug fix in Volto
+  // TODO: not needed when we will use latest Volto
   const variationStyleSchema = activeVariation?.stylesSchema;
   schema = variationStyleSchema
     ? variationStyleSchema({ schema: cloneDeep(schema), formData, intl })
     : schema;
   // end TODO
 
+  const extensionType = '@type'; // the attribute name that's stored in the block data
+  const extensionTemplates = blockConfig.extensions?.[extensionName];
+  const activeItemName = formData?.itemModel?.[extensionType];
+  let activeItem = extensionTemplates?.find(
+    (item) => item.id === activeItemName,
+  );
+
   const stylingSchema = activeItem?.['stylesSchema'];
   schema = stylingSchema
     ? stylingSchema({ schema: cloneDeep(schema), formData, intl })