diff --git a/src/blocks/Item/index.js b/src/blocks/Item/index.js index e42d090a..79f5cf79 100644 --- a/src/blocks/Item/index.js +++ b/src/blocks/Item/index.js @@ -1,7 +1,7 @@ import codeSVG from '@plone/volto/icons/code.svg'; import ItemEdit from './Edit'; import ItemView from './View'; -import { stylingSchema } from './schema'; +import { setItemStyling } from './schema'; export default (config) => { config.blocks.blocksConfig.item = { @@ -12,8 +12,6 @@ export default (config) => { edit: ItemEdit, view: ItemView, blockHasOwnFocusManagement: true, - stylesSchema: stylingSchema, - enableStyling: true, restricted: false, mostUsed: false, sidebarTab: 1, @@ -21,6 +19,7 @@ export default (config) => { addPermission: [], view: [], }, + schemaEnhancer: setItemStyling, }; config.settings.blocksWithFootnotesSupport = { diff --git a/src/blocks/Item/schema.js b/src/blocks/Item/schema.js index 4bcaa688..da8e31f4 100644 --- a/src/blocks/Item/schema.js +++ b/src/blocks/Item/schema.js @@ -78,33 +78,36 @@ export default ({ data }) => { }; }; -export const stylingSchema = ({ intl }) => ({ - title: 'Item style', - block: 'item', - fieldsets: [ - { - id: 'default', - title: 'Default', - fields: ['theme', 'verticalAlign'], - }, - ], - properties: { - theme: { - title: 'Theme', - choices: [ - ['primary', 'Primary'], - ['secondary', 'Secondary'], - ['tertiary', 'Tertiary'], - ], - }, - verticalAlign: { - title: 'Vertical align', - choices: [ - ['top', 'Top'], - ['middle', 'Middle'], - ['bottom', 'Bottom'], - ], +export const setItemStyling = ({ intl, schema }) => { + // TODO: this should be an enhancer, don't overwrite the schema + schema.properties.styles.schema = { + title: 'Item style', + block: 'item', + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: ['theme', 'verticalAlign'], + }, + ], + properties: { + theme: { + title: 'Theme', + choices: [ + ['primary', 'Primary'], + ['secondary', 'Secondary'], + ['tertiary', 'Tertiary'], + ], + }, + verticalAlign: { + title: 'Vertical align', + choices: [ + ['top', 'Top'], + ['middle', 'Middle'], + ['bottom', 'Bottom'], + ], + }, }, - }, - required: [], -}); + required: [], + }; +}; diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js index e7df3907..a8ff5472 100644 --- a/src/blocks/Listing/index.js +++ b/src/blocks/Listing/index.js @@ -19,7 +19,7 @@ import { import { DefaultItemLayout } from './item-templates/ItemTemplates'; import { SearchItemLayout } from './item-templates/SearchItemTemplate'; -import universalCardSchemaEnhancer from '@eeacms/volto-listing-block/components/UniversalCard/schema'; +// import universalCardSchemaEnhancer from '@eeacms/volto-listing-block/components/UniversalCard/schema'; const applyConfig = (config) => { // moment date locale. See https://momentjs.com/ - Multiple Locale Support @@ -44,33 +44,21 @@ const applyConfig = (config) => { isDefault: false, title: 'Listing', template: Listing, - schemaEnhancer: compose( - setBasicStylingSchema, - Listing.schemaEnhancer, // layout schema - universalCardSchemaEnhancer, - ), + schemaEnhancer: compose(setBasicStylingSchema, Listing.schemaEnhancer), }, { id: 'cardsCarousel', isDefault: false, title: 'Carousel', template: Carousel, - schemaEnhancer: compose( - setBasicStylingSchema, - Carousel.schemaEnhancer, - universalCardSchemaEnhancer, - ), + schemaEnhancer: compose(setBasicStylingSchema, Carousel.schemaEnhancer), }, { id: 'cardsGallery', // 'customCardsGalleryVariationId' isDefault: false, title: 'Gallery', template: Gallery, - schemaEnhancer: compose( - setBasicStylingSchema, - Gallery.schemaEnhancer, - universalCardSchemaEnhancer, - ), + schemaEnhancer: compose(setBasicStylingSchema, Gallery.schemaEnhancer), }, ]; diff --git a/src/blocks/Listing/layout-templates/Listing.jsx b/src/blocks/Listing/layout-templates/Listing.jsx index 9b4a74f7..5cb96a07 100644 --- a/src/blocks/Listing/layout-templates/Listing.jsx +++ b/src/blocks/Listing/layout-templates/Listing.jsx @@ -48,6 +48,6 @@ Listing.propTypes = { isEditMode: PropTypes.bool, }; -Listing.schemaEnhancer = ({ schema }) => schema; +Listing.schemaEnhancer = UniversalCard.schemaEnhancer; export default Listing; diff --git a/src/blocks/Teaser/Card.jsx b/src/blocks/Teaser/Card.jsx index 0519c1df..d6abe533 100644 --- a/src/blocks/Teaser/Card.jsx +++ b/src/blocks/Teaser/Card.jsx @@ -7,7 +7,6 @@ import { defineMessages, useIntl } from 'react-intl'; import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard'; import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg'; -import { CardStylingSchemaEnhancer } from '../Listing/schema'; const messages = defineMessages({ PleaseChooseContent: { @@ -45,55 +44,4 @@ TeaserCardTemplate.propTypes = { isEditMode: PropTypes.bool, }; -TeaserCardTemplate.styleSchemaEnhancer = (schema) => { - return CardStylingSchemaEnhancer({ schema }); -}; - export default TeaserCardTemplate; - -// const CardImage = (props) => { -// const { data } = props; -// const href = data.href?.[0]; -// const image = data.preview_image?.[0]; -// return href.hasPreviewImage || href.image_field || image ? ( -//
-// a -//
-// ) : null; -// }; -// -// const CardHeadTitle = ({ data }) => -// data?.head_title ?
{data?.head_title}
: null; -// -// const CardDescription = ({ data }) => -// !data.hide_description ? ( -//

{data?.description}

-// ) : null; -// -// const CardTitle = ({ data }) =>
{data?.title}
; -// -//
-// -//
-// -// -// -//
-//
-//
-// import { flattenToAppURL } from '@plone/volto/helpers'; -// import { getTeaserImageURL } from './utils'; -// import { MaybeWrap } from '@plone/volto/components'; -// import { UniversalLink } from '@plone/volto/components'; -// import cx from 'classnames'; diff --git a/src/blocks/Teaser/index.js b/src/blocks/Teaser/index.js index 0205a0d5..e178f504 100644 --- a/src/blocks/Teaser/index.js +++ b/src/blocks/Teaser/index.js @@ -1,14 +1,12 @@ import { compose } from 'redux'; + import TeaserCardTemplate from './Card'; -import { BasicListingBlockStylesSchema } from '../Listing/schema'; import { adjustTeaserSchema } from './schema'; -import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard'; +import { setCardStylingSchema, setCardModelSchema } from '../Listing/schema'; export default (config) => { - // Teaser if (config.blocks.blocksConfig.teaser) { config.blocks.blocksConfig.teaser.variations = [ - // ...(config.blocks.blocksConfig.teaser.variations || []), { id: 'card', isDefault: true, @@ -16,13 +14,12 @@ export default (config) => { template: TeaserCardTemplate, schemaEnhancer: compose( adjustTeaserSchema, - TeaserCardTemplate.styleSchemaEnhancer, - UniversalCard.schemaEnhancer, + setCardModelSchema, + setCardStylingSchema, ), }, + // ...(config.blocks.blocksConfig.teaser.variations || []), ]; - // config.blocks.blocksConfig.teaser.enableStyling = true; - config.blocks.blocksConfig.teaser.stylesSchema = BasicListingBlockStylesSchema; } // Teaser Grid diff --git a/src/components/UniversalCard/UniversalCard.jsx b/src/components/UniversalCard/UniversalCard.jsx index 3404d94d..19bb1b45 100644 --- a/src/components/UniversalCard/UniversalCard.jsx +++ b/src/components/UniversalCard/UniversalCard.jsx @@ -14,7 +14,6 @@ function UniversalCard(props) { config.blocks.blocksConfig.listing.extensions.cardTemplates, itemModel, ); - // const CardTemplate = BasicCard; const CardTemplate = extension.template; const classNames = getVoltoStyles(styles); diff --git a/src/components/UniversalCard/schema.js b/src/components/UniversalCard/schema.js index fab4ab3e..3d4d9a78 100644 --- a/src/components/UniversalCard/schema.js +++ b/src/components/UniversalCard/schema.js @@ -49,13 +49,3 @@ export default function universalCardSchemaEnhancer(args) { return enhancedSchema; } - -// enhanceStylingSchema, - -// const styledSchema = enhanceStylingSchema({ -// ...props, -// schema: baseSchema, -// // schema: baseSchema.properties.styles.schema, -// formData: props.formData, -// }); -// return styledSchema; diff --git a/src/schema-utils.js b/src/schema-utils.js index ce6217a3..b2e170fe 100644 --- a/src/schema-utils.js +++ b/src/schema-utils.js @@ -1,8 +1,6 @@ import { cloneDeep } from 'lodash'; import config from '@plone/volto/registry'; -// import { defineMessages } from 'react-intl'; - const addTypeSelect = ({ intl, schema, extensionName, messages }) => { const field = '@type'; const extensions = config.blocks.blocksConfig.listing.extensions; @@ -59,92 +57,6 @@ export const DefaultCardModelSchema = { required: [], }; -// const messages = defineMessages({ -// variation: { -// id: 'Variation', -// defaultMessage: 'Variation', -// }, -// styling: { -// id: 'Styling', -// defaultMessage: 'Styling', -// }, -// }); - -// const addStylesField = ({ schema, intl, formData }) => { -// // Add the default style schema as the first step in the "ladder". -// // The order is as follows: -// // -// // - default volto style schema -// // - listing block -> default style schema enhancer -// // - listing block variation -> style schema enhancer -// // - listing block card/item extension -> style schema enhancer -// // -// // We omit the first step in ladder because of bugs in Volto < 16.0.0-alpha.36 -// // In later versions we won't have to redefine the styles field -// -// if (schema.properties.styles) return schema; -// -// const defaultStyleSchema = config.blocks.blocksConfig.listing.stylesSchema; -// -// schema.fieldsets.push({ -// id: 'styling', -// title: intl.formatMessage(messages.styling), -// fields: ['styles'], -// }); -// -// schema.properties.styles = { -// widget: 'object', -// title: intl.formatMessage(messages.styling), -// schema: defaultStyleSchema({ formData, intl, schema }), -// }; -// -// return schema; -// }; - -// export const enhanceStylingSchema = ({ -// formData, -// schema, -// blockType = 'listing', -// extensionName = 'itemTemplates', -// intl, -// }) => { -// // Adds (to the limited styles schema) the new styling schema enhancements -// schema = addStylesField({ formData, schema, intl }); -// -// // first, enhance styling schema based on the variation -// // then, enhance it based on the `${extensionName}` -// -// const blockConfig = config.blocks.blocksConfig[blockType]; -// const activeVariationId = -// formData['variation'] || -// blockConfig.variations?.find(({ isDefault }) => isDefault)?.id; -// // TODO: use resolveExtensions() from Volto -// const activeVariation = activeVariationId -// ? blockConfig.variations.find(({ id }) => id === activeVariationId) -// : {}; -// -// // 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 }) -// : schema; -// -// return schema; -// }; - export const getVoltoStyles = (props) => { const styles = props ? props : {}; const output = {};