Create a custom Listing block variation

The Listing block is one of the most versatile blocks, and driver to many of Volto's more "advanced" technologies, such as variations.

It can be shaped into many forms, such as sliders, carousels, cards and more. To develop a new variation, take a look at one of the existing Listing block variations, such as the SummaryTemplate:

The principle is simple: the component receives and renders the list of items (result proxies) from the Listing block.

Create src/components/manage/Blocks/Listing/CardsTemplate.jsx

const CardsTemplate = ({ items, linkTitle, linkHref, isEditMode }) => {
  return items.map((item) => <div key={item.['@id']}>{item.title}</div>);
}

To register the new block variation, add it to the existing variations:

import { CardsTemplate } from './components';

export const applyConfig = (config) => {
  config.blocks.blocksConfig.listing.variations.push({
    id: 'cards',
    template: CardsTemplate,
  });
  return config;
}