feature(schema): added customization of styling schema in schema exte…

…nder #23

Add styling schema demo

Jenkinsfile

@@ -6,7 +6,7 @@ pipeline {
         NAMESPACE = "@eeacms"
         SONARQUBE_TAGS = "volto.eea.europa.eu,www.eea.europa.eu-ims,climate-energy.eea.europa.eu,sustainability.eionet.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu,circularity.eea.europa.eu,prod-www.eea.europa.eu"
         DEPENDENCIES = ""
-        VOLTO = "16.0.0-alpha.14"
+        VOLTO = "16.0.0-alpha.36"
     }
 
   stages {

src/blocks/Listing/ItemTemplates.jsx

@@ -47,11 +47,11 @@ const BasicItem = (props) => {
                     hasDescription={hasDescription}
                     hasDate={hasDate}
                   />
-                  <PreviewImage item={item} style={{ marginLeft: 'auto' }} />
+                  <PreviewImage item={item} className={'right'} />
                 </>
               ) : (
                 <>
-                  <PreviewImage item={item} />
+                  <PreviewImage item={item} className={'left'} />
                   <BodyText
                     item={item}
                     hasDescription={hasDescription}

src/blocks/Listing/SearchItemTemplate.jsx

@@ -1,4 +1,5 @@
 import cx from 'classnames';
+import messages from '@eeacms/volto-listing-block/messages';
 import PreviewImage from '@eeacms/volto-listing-block/PreviewImage';
 
 const BodyText = ({ item, hasDescription }) => {
@@ -59,3 +60,16 @@ const BasicItem = (props) => {
 export const SearchItemLayout = (props) => {
   return <BasicItem {...props} />;
 };
+SearchItemLayout.styleSchemaEnhancer = ({ schema, intl }) => {
+  const styleSchema = schema.properties.styles.schema;
+  styleSchema.fieldsets[0].fields.push('rounded');
+  styleSchema.properties = {
+    ...styleSchema.properties,
+    rounded: {
+      title: intl.formatMessage(messages.Rounded),
+      description: intl.formatMessage(messages.RoundedHelp),
+      type: 'boolean',
+    },
+  };
+  return schema;
+};

src/blocks/Listing/index.js

@@ -1,17 +1,21 @@
 import CardsCarousel from './templates/CardsCarousel';
-import CustomCardsGalleryTemplate from './templates/CardsGallery';
-import CustomNewsListTemplate from './templates/NewsList';
-import CustomSummaryListingBlockTemplate from './templates/Summary';
+import CardsGallery from './templates/CardsGallery';
+import NewsList from './templates/NewsList';
+import Summary from './templates/Summary';
+
 import {
   DefaultCardLayout,
   ImageCardLayout,
   LeftImageCardLayout,
   RightImageCardLayout,
 } from './CardTemplates';
+
 import { DefaultItemLayout } from './ItemTemplates';
 import { SearchItemLayout } from './SearchItemTemplate';
 
-import { ListingStylingSchema } from './schema';
+import { BasicListingBlockStylesSchema } from './schema';
+
+// import { ListingStylingSchemaEnhancer } from './schema';
 
 const applyConfig = (config) => {
   // moment date locale. See https://momentjs.com/ - Multiple Locale Support
@@ -22,9 +26,12 @@ const applyConfig = (config) => {
 
   const { schemaEnhancer } = listing;
 
+  listing.stylesSchema = BasicListingBlockStylesSchema;
+
   listing.schemaEnhancer = (props) => {
+    // NOTE: this is a schema finalizer
     const schema = schemaEnhancer ? schemaEnhancer(props) : props.schema;
-    //
+
     // move querystring to its own fieldset;
     schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter(
       (f) => f !== 'querystring',
@@ -44,29 +51,31 @@ const applyConfig = (config) => {
       id: 'summary',
       isDefault: false,
       title: 'Item listing',
-      template: CustomSummaryListingBlockTemplate,
-      schemaEnhancer: CustomSummaryListingBlockTemplate.schemaEnhancer,
+      template: Summary,
+      schemaEnhancer: Summary.schemaEnhancer,
+      stylesSchema: Summary.styleSchemaEnhancer,
     },
     {
       id: 'cardsCarousel',
       isDefault: false,
       title: 'Cards carousel',
       template: CardsCarousel,
       schemaEnhancer: CardsCarousel.schemaEnhancer,
+      stylesSchema: CardsCarousel.styleSchemaEnhancer,
     },
     {
       id: 'customCardsGalleryVariationId',
       isDefault: false,
       title: 'Cards gallery',
-      template: CustomCardsGalleryTemplate,
-      schemaEnhancer: CustomCardsGalleryTemplate.schemaEnhancer,
+      template: CardsGallery,
+      schemaEnhancer: CardsGallery.schemaEnhancer,
     },
     {
       id: 'customNewsListVariationId',
       isDefault: false,
       title: 'News List',
-      template: CustomNewsListTemplate,
-      schemaEnhancer: CustomNewsListTemplate.schemaEnhancer,
+      template: NewsList,
+      schemaEnhancer: NewsList.schemaEnhancer,
     },
   ];
 
@@ -84,6 +93,7 @@ const applyConfig = (config) => {
         isDefault: false,
         title: 'Search Item',
         view: SearchItemLayout,
+        stylesSchema: SearchItemLayout.styleSchemaEnhancer,
       },
     ],
     cardTemplates: [
@@ -112,10 +122,8 @@ const applyConfig = (config) => {
   };
 
   // Theming
-  if (!listing.enableStyling) {
-    listing.enableStyling = true;
-    listing.stylesSchema = ListingStylingSchema;
-  }
+  // This bug needs to be fixed first: https://github.com/plone/volto/issues/3675
+  // listing.enableStyling = true;
 
   return config;
 };

src/blocks/Listing/schema.js

@@ -1,4 +1,5 @@
-import { defineMessages } from 'react-intl';
+import { defaultStyleSchema } from '@plone/volto/components/manage/Blocks/Block/StylesSchema';
+import messages from '@eeacms/volto-listing-block/messages';
 
 import alignLeftSVG from '@plone/volto/icons/align-left.svg';
 import alignCenterSVG from '@plone/volto/icons/align-center.svg';
@@ -10,64 +11,20 @@ const ALIGN_VALUE_MAP = [
   ['', clearSVG],
 ];
 
-const messages = defineMessages({
-  Type: {
-    id: 'Listing',
-    defaultMessage: 'Listing',
-  },
-  Theme: {
-    id: 'Theme',
-    defaultMessage: 'Theme',
-  },
-  ThemeHelp: {
-    id: 'Theme',
-    defaultMessage: 'Theme',
-  },
-  ThemeDefault: {
-    id: 'Default',
-    defaultMessage: 'Default',
-  },
-  ThemePrimary: {
-    id: 'Primary',
-    defaultMessage: 'Primary',
-  },
-  ThemeSecondary: {
-    id: 'Secondary',
-    defaultMessage: 'Secondary',
-  },
-  ThemeTertiary: {
-    id: 'Tertiary',
-    defaultMessage: 'Tertiary',
-  },
-  Rounded: {
-    id: 'Rounded',
-    defaultMessage: 'Rounded',
-  },
-  RoundedHelp: {
-    id: 'Rounded Image',
-    defaultMessage: 'Rounded Image',
-  },
-  Inverted: {
-    id: 'Inverted',
-    defaultMessage: 'Inverted',
-  },
-  InvertedHelp: {
-    id: 'InvertedHelp',
-    defaultMessage: 'Inverted theme',
-  },
-});
+export const ListingStylingSchemaEnhancer = ({ schema }) => {
+  return schema;
+};
 
-export const ListingStylingSchema = ({ intl }) => ({
-  title: intl.formatMessage(messages.Type),
-  block: 'listing',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['theme', 'text_align', 'rounded', 'inverted'],
-    },
-  ],
-  properties: {
+export const BasicListingBlockStylesSchema = ({ intl, formData }) => {
+  const styleSchema = defaultStyleSchema({ intl, formData });
+  styleSchema.fieldsets[0].fields.push('theme', 'text_align');
+
+  styleSchema.fieldsets[0].fields = styleSchema.fieldsets[0].fields.filter(
+    (val) => val !== 'align',
+  );
+
+  styleSchema.properties = {
+    ...styleSchema.properties,
     theme: {
       title: intl.formatMessage(messages.Theme),
       description: intl.formatMessage(messages.ThemeHelp),
@@ -83,16 +40,7 @@ export const ListingStylingSchema = ({ intl }) => ({
       widget: 'style_text_align',
       actions: ALIGN_VALUE_MAP,
     },
-    inverted: {
-      title: intl.formatMessage(messages.Inverted),
-      description: intl.formatMessage(messages.InvertedHelp),
-      type: 'boolean',
-    },
-    rounded: {
-      title: intl.formatMessage(messages.Rounded),
-      description: intl.formatMessage(messages.RoundedHelp),
-      type: 'boolean',
-    },
-  },
-  required: [],
-});
+  };
+
+  return styleSchema;
+};

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'));
@@ -145,4 +145,18 @@ CardsCarousel.schemaEnhancer = (args) => {
   };
 };
 
+CardsCarousel.styleSchemaEnhancer = ({ schema, intl }) => {
+  const styleSchema = schema.properties.styles.schema;
+  styleSchema.fieldsets[0].fields.push('oblique');
+  styleSchema.properties = {
+    ...styleSchema.properties,
+    oblique: {
+      title: 'Oblique',
+      type: 'boolean',
+    },
+  };
+
+  return schema;
+};
+
 export default CardsCarousel;

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,11 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment'; // TODO: this needs to be lazyloaded!!!
+
 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';
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React from 'react';
+import messages from '@eeacms/volto-listing-block/messages';
 
 const SummaryListing = (props) => {
   const { block, items, linkTitle, linkHref, isEditMode } = props;
@@ -41,8 +43,20 @@ const SummaryListing = (props) => {
   );
 };
 
-SummaryListing.schemaEnhancer = (args) => {
-  const schema = UniversalItem.schemaEnhancer(args);
+SummaryListing.schemaEnhancer = UniversalItem.schemaEnhancer;
+
+SummaryListing.styleSchemaEnhancer = ({ schema, intl }) => {
+  const styleSchema = schema.properties.styles.schema;
+  styleSchema.fieldsets[0].fields.push('inverted');
+  styleSchema.properties = {
+    ...styleSchema.properties,
+    inverted: {
+      title: intl.formatMessage(messages.Inverted),
+      description: intl.formatMessage(messages.InvertedHelp),
+      type: 'boolean',
+    },
+  };
+
   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

@@ -1,8 +1,8 @@
 import { compose } from 'redux';
 import TeaserCardTemplate from './Card';
-import { ListingStylingSchema } from '../Listing/schema';
+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
@@ -21,7 +21,7 @@ export default (config) => {
       },
     ];
     config.blocks.blocksConfig.teaser.enableStyling = true;
-    config.blocks.blocksConfig.teaser.stylesSchema = ListingStylingSchema;
+    config.blocks.blocksConfig.teaser.stylesSchema = ListingStylingSchemaEnhancer;
   }
 
   // Teaser Grid

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;