io-sanita-theme 2.3.0 → 2.3.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [2.3.1](https://github.com/RedTurtle/io-sanita-theme/compare/2.3.0...2.3.1) (2025-02-25)
+
+### Bug Fixes
+
+* a11y warning ([688bea5](https://github.com/RedTurtle/io-sanita-theme/commit/688bea5d793832f0f06a98a0e46bb992331620eb))
+* listing fieldset and carousel options ([ecec497](https://github.com/RedTurtle/io-sanita-theme/commit/ecec4975db519e9cda7de3df7ea0c3f14915a588))
+* locales and release.md ([94317a7](https://github.com/RedTurtle/io-sanita-theme/commit/94317a7ecdbbb6e1f8e4f61d1722a748f4926064))
+* mismatch server / client classname render ([9f1c20c](https://github.com/RedTurtle/io-sanita-theme/commit/9f1c20ceb23284caa20b66924dce529da78572a7))
+* remove margin between full-block and image block ([c7b0fe4](https://github.com/RedTurtle/io-sanita-theme/commit/c7b0fe419e6664fc58cd7da0d8c4abcd51bd79b4))
+* warnings ([2d10163](https://github.com/RedTurtle/io-sanita-theme/commit/2d10163dc917958329e813deb7ca92841a4190d6))
+
 ## [2.3.0](https://github.com/RedTurtle/io-sanita-theme/compare/2.2.4...2.3.0) (2025-02-24)
 
 ### Features

package/RELEASE.md

@@ -41,14 +41,26 @@
 - ...
  -->
 
-## Versione x.x.x (x/x/x)
+## Versione 2.3.0 (24/02/2025)
+
+### Novità
+
+- aggiunto il template 'Carousel' per il blocco elenco, con il quale è possibile realizzare sia caroselli, sia gallery con immagini che si aprono in popup
+
+## Versione 2.2.1 (12/02/2025)
 
 ### Migliorie
 
-- aggiunto il tag <lin rel="canonical"> per tutte le pagine, come suggerito da consulente SEO
-- aggiunta la barra di loading nella parte alta della pagina quando si sta caricando un contenuto
 - a11y - migliorata l'accessibilità del sito per quanto riguarda le icone
 - a11y - migliorato il contrasto del focus sugli elementi con la navigazione da tastiera
+- aggiunto il tag <lin rel="canonical"> per tutte le pagine, come suggerito da consulente SEO
+- aggiunta la barra di loading nella parte alta della pagina quando si sta caricando un contenuto
+
+## Versione 2.2.0 (06/02/2025)
+
+### Migliorie
+
+- Ordinate le date del bando in ordine cronologico
 
 ## Versione 2.1.0 (05/02/2025)
 

package/locales/de/LC_MESSAGES/volto.po

@@ -3288,18 +3288,18 @@ msgstr ""
 msgid "show_icon"
 msgstr ""
 
-#. Default: "Mostra la descrizione dell'immagine"
+#. Default: "Mostra la descrizione"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 msgid "show_image_description"
 msgstr ""
 
-#. Default: "Apri l'immagine in popup"
+#. Default: "Apri l'anteprima in popup"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 #: config/blocks/listing/ListingOptions/photogalleryTemplate
 msgid "show_image_popup"
 msgstr ""
 
-#. Default: "Mostra il titolo dell'immagine"
+#. Default: "Mostra il titolo"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 #: config/blocks/listing/ListingOptions/sliderTemplate
 msgid "show_image_title"

package/locales/en/LC_MESSAGES/volto.po

@@ -3283,18 +3283,18 @@ msgstr ""
 msgid "show_icon"
 msgstr ""
 
-#. Default: "Mostra la descrizione dell'immagine"
+#. Default: "Mostra la descrizione"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 msgid "show_image_description"
 msgstr ""
 
-#. Default: "Apri l'immagine in popup"
+#. Default: "Apri l'anteprima in popup"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 #: config/blocks/listing/ListingOptions/photogalleryTemplate
 msgid "show_image_popup"
 msgstr ""
 
-#. Default: "Mostra il titolo dell'immagine"
+#. Default: "Mostra il titolo"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 #: config/blocks/listing/ListingOptions/sliderTemplate
 msgid "show_image_title"

package/locales/es/LC_MESSAGES/volto.po

@@ -3290,18 +3290,18 @@ msgstr ""
 msgid "show_icon"
 msgstr ""
 
-#. Default: "Mostra la descrizione dell'immagine"
+#. Default: "Mostra la descrizione"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 msgid "show_image_description"
 msgstr ""
 
-#. Default: "Apri l'immagine in popup"
+#. Default: "Apri l'anteprima in popup"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 #: config/blocks/listing/ListingOptions/photogalleryTemplate
 msgid "show_image_popup"
 msgstr ""
 
-#. Default: "Mostra il titolo dell'immagine"
+#. Default: "Mostra il titolo"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 #: config/blocks/listing/ListingOptions/sliderTemplate
 msgid "show_image_title"

package/locales/fr/LC_MESSAGES/volto.po

@@ -3290,18 +3290,18 @@ msgstr ""
 msgid "show_icon"
 msgstr ""
 
-#. Default: "Mostra la descrizione dell'immagine"
+#. Default: "Mostra la descrizione"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 msgid "show_image_description"
 msgstr ""
 
-#. Default: "Apri l'immagine in popup"
+#. Default: "Apri l'anteprima in popup"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 #: config/blocks/listing/ListingOptions/photogalleryTemplate
 msgid "show_image_popup"
 msgstr ""
 
-#. Default: "Mostra il titolo dell'immagine"
+#. Default: "Mostra il titolo"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 #: config/blocks/listing/ListingOptions/sliderTemplate
 msgid "show_image_title"

package/locales/it/LC_MESSAGES/volto.po

@@ -3283,18 +3283,18 @@ msgstr ""
 msgid "show_icon"
 msgstr ""
 
-#. Default: "Mostra la descrizione dell'immagine"
+#. Default: "Mostra la descrizione"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 msgid "show_image_description"
 msgstr ""
 
-#. Default: "Apri l'immagine in popup"
+#. Default: "Apri l'anteprima in popup"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 #: config/blocks/listing/ListingOptions/photogalleryTemplate
 msgid "show_image_popup"
 msgstr ""
 
-#. Default: "Mostra il titolo dell'immagine"
+#. Default: "Mostra il titolo"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 #: config/blocks/listing/ListingOptions/sliderTemplate
 msgid "show_image_title"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2025-02-24T10:51:14.508Z\n"
+"POT-Creation-Date: 2025-02-25T11:31:39.047Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -3285,18 +3285,18 @@ msgstr ""
 msgid "show_icon"
 msgstr ""
 
-#. Default: "Mostra la descrizione dell'immagine"
+#. Default: "Mostra la descrizione"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 msgid "show_image_description"
 msgstr ""
 
-#. Default: "Apri l'immagine in popup"
+#. Default: "Apri l'anteprima in popup"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 #: config/blocks/listing/ListingOptions/photogalleryTemplate
 msgid "show_image_popup"
 msgstr ""
 
-#. Default: "Mostra il titolo dell'immagine"
+#. Default: "Mostra il titolo"
 #: config/blocks/listing/ListingOptions/carouselTemplate
 #: config/blocks/listing/ListingOptions/sliderTemplate
 msgid "show_image_title"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "io-sanita-theme",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "io-sanita-theme: Volto add-on",
   "main": "src/index.js",
   "license": "MIT",

package/src/components/Blocks/Listing/Carousel/CarouselTemplate.jsx

@@ -26,6 +26,7 @@ import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import config from '@plone/volto/registry';
 
 import './carouselTemplate.scss';
+import { on } from 'process';
 const messages = defineMessages({
   carouselItemAriaLabel: {
     id: 'carousel-item-aria-label',
@@ -48,7 +49,7 @@ const messages = defineMessages({
 
 const Slide = (props) => {
   const intl = useIntl();
-  const { index, appearance, appearanceProp, onKeyDown } = props;
+  const { index, appearance, appearanceProp, onKeyDown, ...otherProps } = props;
 
   const appearances = config.blocks.blocksConfig.listing.variations.filter(
     (v) => v.id === 'carousel',
@@ -57,6 +58,7 @@ const Slide = (props) => {
 
   return (
     <SingleSlideWrapper
+      {...otherProps}
       index={index}
       onKeyDown={onKeyDown}
       aria-label={
@@ -64,7 +66,7 @@ const Slide = (props) => {
         intl.formatMessage(messages.carouselItemAriaLabel)
       }
     >
-      <div className={'slide-wrapper'} role="presentation">
+      <div className="slide-wrapper" role="presentation">
         <SlideItemAppearance {...props} {...appearanceProp} intl={intl} />
       </div>
     </SingleSlideWrapper>
@@ -106,6 +108,7 @@ const CarouselTemplate = (props) => {
     SliderNextArrow,
     SliderPrevArrow,
     handleSlideKeydown,
+    HiddenSlideFocus,
   } = useSlider(userAutoplay, setUserAutoplay, block_id);
 
   const toggleAutoplay = () => {
@@ -185,6 +188,9 @@ const CarouselTemplate = (props) => {
     appendDots: renderCustomDots,
     // Custom handling of focus for a11y
     afterChange: focusSlide,
+    onInit: () => {
+      HiddenSlideFocus();
+    },
     responsive: [
       {
         breakpoint: 980,

package/src/components/Blocks/Listing/Carousel/SlideAppearance/SlideGalleryItem.jsx

@@ -49,11 +49,11 @@ const SlideGalleryItem = ({
         {(show_image_title ||
           (show_image_description && (item.description || item.rights))) && (
           <figcaption>
-            {show_image_title && <span className="title">{item.title}</span>}
+            {show_image_title && <div className="title">{item.title}</div>}
             {show_image_description && (item.description || item.rights) && (
-              <span className="description">
+              <div className="description">
                 {item.description ?? item.rights}
-              </span>
+              </div>
             )}
           </figcaption>
         )}

package/src/components/Blocks/Listing/Carousel/SlideAppearance/slideGalleryItem.scss

@@ -9,17 +9,5 @@
         object-fit: cover;
       }
     }
-
-    figcaption {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      background-color: #ffffffa7;
-
-      padding: 0.5em 1em;
-      color: #666;
-      font-size: 0.8em;
-      text-align: center;
-    }
   }
 }

package/src/components/Blocks/Listing/Carousel/carouselTemplate.scss

@@ -52,10 +52,19 @@ $slider-mobile-height: 300px;
           }
 
           figcaption {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            background-color: rgba(255, 255, 255, 0.85);
+
             padding: 0.5em 1em;
-            color: #666;
+            color: #000;
             font-size: 0.8em;
             text-align: center;
+
+            .title:has(+ .description) {
+              font-weight: bold;
+            }
           }
         }
 

package/src/components/Blocks/Listing/schema.js

@@ -2,6 +2,8 @@ import { defineMessages } from 'react-intl';
 
 import ListingBlockSchema from '@plone/volto/components/manage/Blocks/Listing/schema';
 
+import { addFieldsetAfter } from 'io-sanita-theme/config/blocks/listing/ListingOptions';
+
 export const schemaListing = (props) => {
   const intl = props.intl;
   const baseSchema = ListingBlockSchema(props);
@@ -11,7 +13,10 @@ export const schemaListing = (props) => {
   );
   if (defaultFieldset) {
     defaultFieldset.fields = defaultFieldset.fields.filter(
-      (field) => field !== 'headline' && field !== 'headlineTag',
+      (field) =>
+        field !== 'headline' &&
+        field !== 'headlineTag' &&
+        field !== 'querystring',
     );
   }
 
@@ -19,6 +24,12 @@ export const schemaListing = (props) => {
     return fieldset.id === 'linkmore';
   };
 
+  addFieldsetAfter(baseSchema, 'default', {
+    id: 'criteria',
+    title: 'Risultati',
+    fields: ['querystring'],
+  });
+
   // const linkMoreFieldset = baseSchema.fieldsets.find(findFieldset);
   // linkMoreFieldset.fields.push('linkAlign');
 

package/src/components/Blocks/SearchMap/Body.jsx

@@ -454,7 +454,10 @@ const SearchMapBody = ({ data, id, path, properties, block, inEditMode }) => {
                                   key={block_id + i}
                                   className="mb-lg-3"
                                 >
-                                  <SearchResultItem item={item} />
+                                  <SearchResultItem
+                                    item={item}
+                                    key={i + '' + block_id}
+                                  />
                                 </Col>
                               ))}
                             </Row>

package/src/components/Blocks/SearchServiziProcedure/Body.jsx

@@ -61,7 +61,7 @@ const messages = defineMessages({
   },
 });
 
-const Body = ({ data, id, path, properties, block, inEditMode }) => {
+const Body = ({ data, id, path, properties, inEditMode }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
   const subsite = useSelector((state) => state.subsite?.data);
@@ -393,7 +393,7 @@ const Body = ({ data, id, path, properties, block, inEditMode }) => {
  * @static
  */
 Body.propTypes = {
-  block: PropTypes.objectOf(PropTypes.any).isRequired,
+  id: PropTypes.string.isRequired,
 };
 
 export default Body;

package/src/components/Cards/CardPersona/CardPersona.jsx

@@ -96,8 +96,8 @@ export const CardPersona = ({
                   </div>
                 )}
 
-                {strutture.map((s) => (
-                  <div className="mb-2 mt-2">
+                {strutture.map((s, index_s) => (
+                  <div className="mb-2 mt-2" key={index_s}>
                     <div>
                       <UniversalLink
                         item={!isEditMode ? s : null}

package/src/components/Search/common/SearchResultItem.jsx

@@ -6,16 +6,16 @@ import {
   CardGuide,
 } from 'io-sanita-theme/components';
 
-const ResultItem = ({ item }) => {
+const SearchResultItem = ({ item }) => {
   return item['@type'] === 'Struttura' ? (
-    <CardPlace item={item} type="synthetic" />
+    <CardPlace item={item} type="synthetic" key={item['@id']} />
   ) : item['@type'] === 'Persona' ? (
-    <CardPersona item={item} />
+    <CardPersona item={item} key={item['@id']} />
   ) : item['@type'] === 'ComeFarePer' ? (
-    <CardGuide item={item} />
+    <CardGuide item={item} key={item['@id']} />
   ) : (
-    <CardSimple item={item} />
+    <CardSimple item={item} key={item['@id']} />
   );
 };
 
-export default ResultItem;
+export default SearchResultItem;

package/src/components/Slider/SingleSlideWrapper.jsx

@@ -32,8 +32,6 @@ const SingleSlideWrapper = (props) => {
         //e.preventDefault();
         //e.stopPropagation();
       }}
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-      tabIndex={0}
     >
       {children}
     </div>

package/src/components/Slider/slider.js

@@ -27,6 +27,27 @@ export const useSlider = (userAutoplay, setUserAutoplay, block_id) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const HiddenSlideFocus = () => {
+    const slides = document.querySelectorAll(
+      `${sliderElementSelector} .slick-slide`,
+    );
+
+    //set tab index to -1 for hidden slides
+
+    slides?.forEach((slide) => {
+      const focusableElements = slide.querySelectorAll(
+        'button:not([disabled]), [href], [tabindex="0"]',
+      );
+
+      focusableElements.forEach((element) => {
+        const tabIndexValue =
+          element.closest('.slick-active') !== null ? '0' : '-1';
+
+        element.setAttribute('tabIndex', tabIndexValue);
+      });
+    });
+  };
+
   const focusSlide = (slideIndex) => {
     if (!sliderElement) return;
     const sliderIsVisible = sliderContainer?.classList?.contains('visible');
@@ -52,8 +73,10 @@ export const useSlider = (userAutoplay, setUserAutoplay, block_id) => {
     ).some((node) => node.contains(document.activeElement));
 
     if (focusedSliderElement) {
+      slide.setAttribute('tabindex', '0');
       slide.focus();
     }
+    HiddenSlideFocus();
   };
 
   const visibleSlide = (selector) => {
@@ -160,7 +183,8 @@ export const useSlider = (userAutoplay, setUserAutoplay, block_id) => {
 
       if (shiftKey) {
         if (prevIndex != null) {
-          slider.current.slickGoTo(prevIndex);
+          slider.current.slickGoTo(prevIndex) ||
+            focusableSlideElements[focusableSlideElements.length - 1].focus();
         } else {
           document.getElementById('sliderPrevArrow_' + block_id).focus();
         }
@@ -197,5 +221,6 @@ export const useSlider = (userAutoplay, setUserAutoplay, block_id) => {
     SliderNextArrow,
     SliderPrevArrow,
     handleSlideKeydown,
+    HiddenSlideFocus,
   };
 };

package/src/components/View/commons/Gallery/Gallery.jsx

@@ -72,6 +72,7 @@ const Gallery = ({
       nextArrow: <NextArrow />,
       prevArrow: <PrevArrow />,
       speed: 500,
+      accessibility: true,
       ...getResponsiveSettings(nItems, slidesToShow, slidesToScroll),
       responsive: [
         {

package/src/components/layout/Header/LanguageSelector.jsx

@@ -60,7 +60,7 @@ const LanguageSelector = (props) => {
       inNavbar
       className="is-language-selector"
     >
-      <DropdownToggle aria-haspopup caret inNavbar nav role="button">
+      <DropdownToggle aria-haspopup caret nav role="button">
         {languagesISO392[currentLang]}
         <Icon
           icon="it-expand"

package/src/config/blocks/index.js

@@ -384,10 +384,15 @@ export const applyIoSanitaBlocksConfig = (config) => {
       const no_bg_for = ['hero'];
 
       if (data.show_block_bg && no_bg_for.indexOf(data['@type']) < 0) {
-        styles.push('bg-primary-lightest');
-
-        styles.push('full-width');
-        styles.push('pb-4');
+        if (classNames.indexOf('bg-primary-lightest') < 0) {
+          styles.push('bg-primary-lightest');
+        }
+        if (classNames.indexOf('full-width') < 0) {
+          styles.push('full-width');
+        }
+        if (classNames.indexOf('py-4') < 0) {
+          styles.push('py-4');
+        }
       }
 
       return [...classNames, ...styles];

package/src/config/blocks/listing/ListingOptions/cardWithImageTemplate.js

@@ -49,6 +49,7 @@ export const imageCardTemplateOptions = (
   intl,
   position,
   hide_fields = [], //array of string
+  fieldset,
 ) => {
   let pos = position;
   pos = templatesOptions(
@@ -80,6 +81,7 @@ export const imageCardTemplateOptions = (
       show_category: { default: true },
     },
     pos,
+    fieldset,
   );
   return pos;
 };

package/src/config/blocks/listing/ListingOptions/carouselTemplate.js

@@ -1,6 +1,9 @@
 import { defineMessages } from 'react-intl';
 
-import { addSchemaField } from 'io-sanita-theme/config/blocks/listing/ListingOptions';
+import {
+  addSchemaField,
+  addFieldsetAfter,
+} from 'io-sanita-theme/config/blocks/listing/ListingOptions';
 import { simpleCardTemplateOptions_appearance_default } from 'io-sanita-theme/config/blocks/listing/ListingOptions/simpleCardTemplate';
 import { imageCardTemplateOptions } from 'io-sanita-theme/config/blocks/listing/ListingOptions/cardWithImageTemplate';
 
@@ -15,15 +18,15 @@ const messages = defineMessages({
   },
   show_image_title: {
     id: 'show_image_title',
-    defaultMessage: "Mostra il titolo dell'immagine",
+    defaultMessage: 'Mostra il titolo',
   },
   show_image_description: {
     id: 'show_image_description',
-    defaultMessage: "Mostra la descrizione dell'immagine",
+    defaultMessage: 'Mostra la descrizione',
   },
   show_image_popup: {
     id: 'show_image_popup',
-    defaultMessage: "Apri l'immagine in popup",
+    defaultMessage: "Apri l'anteprima in popup",
   },
   show_dots: {
     id: 'show_dots',
@@ -142,6 +145,11 @@ export const addCarouselTemplateOptions = (
     ],
   ];
 
+  addFieldsetAfter(schema, 'default', {
+    id: 'appearance',
+    title: 'Aspetto delle slide',
+    fields: [],
+  });
   addSchemaField(
     schema,
     'slide_appearance',
@@ -151,18 +159,31 @@ export const addCarouselTemplateOptions = (
       choices,
     },
     pos,
+    'appearance',
   );
   pos++;
 
   if (formData.slide_appearance === CarouselTemplateAppearance_SIMPLECARD) {
-    simpleCardTemplateOptions_appearance_default(schema, formData, intl, pos, [
-      'show_path_filters',
-    ]);
+    simpleCardTemplateOptions_appearance_default(
+      schema,
+      formData,
+      intl,
+      pos,
+      ['show_path_filters'],
+      'appearance',
+    );
     pos++;
   } else if (
     formData.slide_appearance === CarouselTemplateAppearance_IMAGECARD
   ) {
-    imageCardTemplateOptions(schema, formData, intl, pos, ['set_four_columns']);
+    imageCardTemplateOptions(
+      schema,
+      formData,
+      intl,
+      pos,
+      ['set_four_columns'],
+      'appearance',
+    );
     pos++;
   } else if (formData.slide_appearance === CarouselTemplateAppearance_GALLERY) {
     addSchemaField(
@@ -172,6 +193,7 @@ export const addCarouselTemplateOptions = (
       null,
       { type: 'boolean', default: true },
       pos,
+      'appearance',
     );
     pos++;
     addSchemaField(
@@ -181,6 +203,7 @@ export const addCarouselTemplateOptions = (
       null,
       { type: 'boolean', default: true },
       pos,
+      'appearance',
     );
     pos++;
     addSchemaField(
@@ -190,6 +213,7 @@ export const addCarouselTemplateOptions = (
       null,
       { type: 'boolean', default: false },
       pos,
+      'appearance',
     );
     pos++;
   } else {
@@ -200,6 +224,7 @@ export const addCarouselTemplateOptions = (
       null,
       { type: 'boolean', default: true },
       pos,
+      'appearance',
     );
     pos++;
   }

package/src/config/blocks/listing/ListingOptions/index.js

@@ -2,6 +2,7 @@ export {
   addSchemaField,
   templatesOptions,
   addLighthouseField,
+  addFieldsetAfter,
 } from 'io-sanita-theme/config/blocks/listing/ListingOptions/utils';
 export addDefaultOptions from 'io-sanita-theme/config/blocks/listing/ListingOptions/defaultOptions';
 export addLinkMoreOptions from 'io-sanita-theme/config/blocks/listing/ListingOptions/linkMoreOptions';

package/src/config/blocks/listing/ListingOptions/simpleCardTemplate.js

@@ -129,6 +129,7 @@ export const simpleCardTemplateOptions_appearance_default = (
   intl,
   position,
   hide_fields = [], //array of string
+  fieldset,
 ) => {
   let pos = position;
   pos = templatesOptions(
@@ -153,6 +154,7 @@ export const simpleCardTemplateOptions_appearance_default = (
       // show_path_filters: { default: false },
     },
     pos,
+    fieldset,
   );
   return pos;
 };

package/src/config/blocks/listing/ListingOptions/utils.js

@@ -86,11 +86,12 @@ export const templatesOptions = (
   fields,
   fieldsConfig,
   position = 1,
+  fieldset,
 ) => {
   let pos = position;
 
-  const fieldset =
-    schema.id === 'search' ? 'listingTemplateOptions' : undefined;
+  const _fieldset =
+    schema.id === 'search' ? 'listingTemplateOptions' : fieldset;
   fields.forEach((f) => {
     // Avoid duplicated fields when using templates in Search block
     if (schema.fieldsets?.some((fs) => fs?.fields?.some((fsf) => fsf === f)))
@@ -104,7 +105,7 @@ export const templatesOptions = (
         f_config.description ?? null,
         { type: 'boolean', default: f_config.default ?? true },
         pos,
-        fieldset,
+        _fieldset,
       );
 
       if (formData?.show_detail_link) {
@@ -116,7 +117,7 @@ export const templatesOptions = (
           null,
           null,
           pos,
-          fieldset,
+          _fieldset,
         );
       }
     } else if (f === 'show_path_filters') {
@@ -131,7 +132,7 @@ export const templatesOptions = (
           formData: formData,
         },
         pos,
-        fieldset,
+        _fieldset,
       );
     } else {
       addSchemaField(
@@ -141,7 +142,7 @@ export const templatesOptions = (
         f_config.description ?? null,
         { type: 'boolean', default: f_config.default ?? true },
         pos,
-        fieldset,
+        _fieldset,
       );
     }
     pos++;
@@ -178,3 +179,9 @@ export const addLighthouseField = (schema, intl, position = 1) => {
 
   return pos;
 };
+
+export const addFieldsetAfter = (schema, afterFieldsetId, fieldset) => {
+  const index = schema.fieldsets.map((f) => f.id).indexOf(afterFieldsetId);
+
+  schema.fieldsets.splice(index + 1, 0, fieldset);
+};

package/src/config/blocks/listing/listingVariations.js

@@ -70,7 +70,7 @@ const iosanitaListingVariations = [
     schemaEnhancer: ({ schema, formData, intl }) => {
       addSimpleCardTemplateOptions(schema, formData, intl);
       addLinkMoreOptions(schema, formData, intl);
-      console.log(schema);
+
       return schema;
     },
     cloneData: cloneBlock,

package/src/theme/io-sanita/_mixins.scss

@@ -10,7 +10,8 @@
   .block.full-width[class*='bg-']:has(+ .block#{$class}),
   .block#{$class}:has(+ .block.full-width[class*='bg-']),
   .block#{$class}:has(+ .block.align.full),
-  .block#{$class}:has(+ .block.iosanita-block-search) {
+  .block#{$class}:has(+ .block.iosanita-block-search),
+  .block#{$class}:has(+ .block.image) {
     margin-bottom: 0 !important;
   }
 }