diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js index ccc71b60..f9a290cd 100644 --- a/src/blocks/Listing/index.js +++ b/src/blocks/Listing/index.js @@ -15,7 +15,7 @@ import { SearchItemLayout } from './SearchItemTemplate'; import { BasicListingBlockStylesSchema } from './schema'; -// import { ListingStylingSchemaEnhancer } from './schema'; +import { CardStylingSchemaEnhancer } from './schema'; const applyConfig = (config) => { // moment date locale. See https://momentjs.com/ - Multiple Locale Support @@ -69,6 +69,7 @@ const applyConfig = (config) => { title: 'Cards gallery', template: CardsGallery, schemaEnhancer: CardsGallery.schemaEnhancer, + stylesSchema: CardStylingSchemaEnhancer, }, { id: 'customNewsListVariationId', @@ -123,7 +124,7 @@ const applyConfig = (config) => { // Theming // This bug needs to be fixed first: https://github.com/plone/volto/issues/3675 - // listing.enableStyling = true; + listing.enableStyling = true; return config; }; diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js index d2b10155..86f4dbc3 100644 --- a/src/blocks/Listing/schema.js +++ b/src/blocks/Listing/schema.js @@ -5,23 +5,34 @@ import alignLeftSVG from '@plone/volto/icons/align-left.svg'; import alignCenterSVG from '@plone/volto/icons/align-center.svg'; import clearSVG from '@plone/volto/icons/clear.svg'; -const ALIGN_VALUE_MAP = [ +export const ALIGN_VALUE_MAP = [ ['align_left', alignLeftSVG], ['align_center', alignCenterSVG], ['', clearSVG], ]; -export const ListingStylingSchemaEnhancer = ({ schema }) => { +export const CardStylingSchemaEnhancer = ({ schema }) => { + const styleSchema = schema.properties.styles.schema; + styleSchema.fieldsets[0].fields.push('text_align'); + styleSchema.properties = { + ...styleSchema.properties, + text_align: { + title: 'Text align', + widget: 'style_text_align', + actions: ALIGN_VALUE_MAP, + }, + }; + return schema; }; 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.fieldsets[0].fields.push('theme', 'inverted', 'rounded'); styleSchema.properties = { ...styleSchema.properties, @@ -35,10 +46,15 @@ export const BasicListingBlockStylesSchema = ({ intl, formData }) => { ['tertiary', intl.formatMessage(messages.ThemeTertiary)], ], }, - text_align: { - title: 'Text align', - 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', }, }; diff --git a/src/blocks/Listing/templates/CardsCarousel.jsx b/src/blocks/Listing/templates/CardsCarousel.jsx index cc388f80..45598619 100644 --- a/src/blocks/Listing/templates/CardsCarousel.jsx +++ b/src/blocks/Listing/templates/CardsCarousel.jsx @@ -4,6 +4,7 @@ import loadable from '@loadable/component'; import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard'; import ResponsiveContainer from '@eeacms/volto-listing-block/components/ResponsiveContainer'; +import { ALIGN_VALUE_MAP, CardStylingSchemaEnhancer } from '../schema'; const Slider = loadable(() => import('react-slick')); @@ -146,17 +147,8 @@ 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; + console.log('cards carousel schema', schema); + return CardStylingSchemaEnhancer({ schema }); }; export default CardsCarousel; diff --git a/src/blocks/Listing/templates/Summary.jsx b/src/blocks/Listing/templates/Summary.jsx index f95db8d7..f2522cfa 100644 --- a/src/blocks/Listing/templates/Summary.jsx +++ b/src/blocks/Listing/templates/Summary.jsx @@ -46,17 +46,6 @@ const SummaryListing = (props) => { 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; }; diff --git a/src/blocks/Teaser/index.js b/src/blocks/Teaser/index.js index 44e472a5..69c780ba 100644 --- a/src/blocks/Teaser/index.js +++ b/src/blocks/Teaser/index.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; import TeaserCardTemplate from './Card'; -import { ListingStylingSchemaEnhancer } from '../Listing/schema'; +import { CardStylingSchemaEnhancer } from '../Listing/schema'; import { adjustTeaserSchema } from './schema'; import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard'; @@ -21,7 +21,7 @@ export default (config) => { }, ]; config.blocks.blocksConfig.teaser.enableStyling = true; - config.blocks.blocksConfig.teaser.stylesSchema = ListingStylingSchemaEnhancer; + config.blocks.blocksConfig.teaser.stylesSchema = CardStylingSchemaEnhancer; } // Teaser Grid