design-comuni-plone-theme 11.16.0 → 11.18.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 
 
+## [11.18.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.17.0...v11.18.0) (2024-07-19)
+
+
+### Features
+
+* add pagination to cards listings in Venue, refactor pagination logic into custom hook ([#726](https://github.com/RedTurtle/design-comuni-plone-theme/issues/726)) ([305a467](https://github.com/RedTurtle/design-comuni-plone-theme/commit/305a46764ba337ff01ed576f06a6b2bf065e7ff6))
+
+
+### Bug Fixes
+
+* site settings issues with race conditions and hook rendering ([5f350bc](https://github.com/RedTurtle/design-comuni-plone-theme/commit/5f350bc2548e7d835380d8a1631ca2d37afd1bff))
+
+
+### Documentation
+
+* updated publiccode and release log ([955ff49](https://github.com/RedTurtle/design-comuni-plone-theme/commit/955ff499c78b34fb472ce9ddf2df9267d0f432fe))
+
+## [11.17.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.16.0...v11.17.0) (2024-07-16)
+
+
+### Features
+
+* Site settings to manage title, logo, favicon  ([#666](https://github.com/RedTurtle/design-comuni-plone-theme/issues/666)) ([fecf6c2](https://github.com/RedTurtle/design-comuni-plone-theme/commit/fecf6c25281016e6e893c85bfcdce28e5d5967c7))
+
+
+### Bug Fixes
+
+* added check for subsite to path in venue query for events search filter ([#718](https://github.com/RedTurtle/design-comuni-plone-theme/issues/718)) ([cd96ee0](https://github.com/RedTurtle/design-comuni-plone-theme/commit/cd96ee0c77e2bb91225528db7c85ffdf824f66d5))
+* backward compatibility for new site settings panel ([f186923](https://github.com/RedTurtle/design-comuni-plone-theme/commit/f1869233022ba4372b78c8b404034b1e97b708e2))
+* better variables naming and resolved minor warnings ([4eb0c8d](https://github.com/RedTurtle/design-comuni-plone-theme/commit/4eb0c8d630bec8cb830a1903d4f3d6643a1dd2a4))
+* blocks widget table block toolbar position ([#716](https://github.com/RedTurtle/design-comuni-plone-theme/issues/716)) ([a116542](https://github.com/RedTurtle/design-comuni-plone-theme/commit/a116542fa741193fe754417e3cd777a2b7c375eb))
+* home link per languageRootFoolder ([#724](https://github.com/RedTurtle/design-comuni-plone-theme/issues/724)) ([5b0f809](https://github.com/RedTurtle/design-comuni-plone-theme/commit/5b0f8099ec411a86d63c0a755451615f28238f3c))
+
+
+### Maintenance
+
+* resolve linting issue ([c67a574](https://github.com/RedTurtle/design-comuni-plone-theme/commit/c67a574480053edd493d54729489b2e58e301323))
+
+
+### Documentation
+
+* updated publiccode and release log ([f7becf8](https://github.com/RedTurtle/design-comuni-plone-theme/commit/f7becf81ef119ce1dc9c5b1138dd77e71a5c1754))
+
 ## [11.16.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v11.15.0...v11.16.0) (2024-07-10)
 
 

package/RELEASE.md

@@ -41,6 +41,22 @@
 - ...
 -->
 
+## Versione 11.18.0 (19/07/2024)
+
+### Migliorie
+
+- Aggiunta la paginazione per le card presenti sotto i campi "Sede di" e "Servizi presenti nel luogo", ora verranno mostrati solo 4 elementi alla volta.
+
+## Versione 11.17.0 (16/07/2024)
+
+### Novità
+
+- Ora il titolo, sottotitolo, favicon, logo e logo del footer sono editabili dal pannello di controllo del Sito. Se non impostati, verranno usati quelli definiti dagli sviluppatori.
+
+### Fix
+
+- Ripristinato il funzionamento del filtro luogo nella ricerca eventi.
+
 ## Versione 11.16.0 (10/07/2024)
 
 ### Migliorie

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-06-25T15:14:34.369Z\n"
+"POT-Creation-Date: 2024-07-15T11:07:19.251Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "11.16.0",
+  "version": "11.18.0",
   "main": "src/index.js",
   "repository": {
     "type": "git",
@@ -36,7 +36,8 @@
     "volto-querywidget-with-browser",
     "@eeacms/volto-taxonomy",
     "volto-feedback",
-    "volto-slimheader"
+    "volto-slimheader",
+    "volto-site-settings"
   ],
   "scripts": {
     "prepare": "husky install",
@@ -158,11 +159,12 @@
     "volto-querywidget-with-browser": "0.4.2",
     "volto-rss-block": "3.0.0",
     "volto-secondarymenu": "4.1.1",
+    "volto-site-settings": "0.4.4",
     "volto-slimheader": "0.1.2",
     "volto-social-settings": "3.0.0",
     "volto-subblocks": "2.1.0",
     "volto-subfooter": "3.1.1",
-    "volto-subsites": "4.0.1",
+    "volto-subsites": "4.0.2",
     "volto-venue": "4.1.0",
     "webpack-image-resize-loader": "^5.0.0"
   },

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2024-07-10'
+releaseDate: '2024-07-19'
 softwareType: standalone/web
-softwareVersion: 11.16.0
+softwareVersion: 11.18.0
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/AppExtras/GenericAppExtras.jsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
-import { Helmet, BodyClass } from '@plone/volto/helpers';
+import { BodyClass } from '@plone/volto/helpers';
 import { RemoveBodyClass } from 'design-comuni-plone-theme/components/ItaliaTheme';
-import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 import ScrollToTop from 'design-comuni-plone-theme/components/ItaliaTheme/ScrollToTop/ScrollToTop';
 import { SubsiteLoader } from 'volto-subsites';
 import config from '@plone/volto/registry';
 
 const GenericAppExtras = (props) => {
-  const intl = useIntl();
   const location = useLocation();
 
   const subsite = useSelector((state) => state.subsite?.data);
@@ -19,7 +16,6 @@ const GenericAppExtras = (props) => {
   if (subsiteLoadable) {
     subsiteLoadable.load();
   }
-  const siteTitle = subsite?.title ?? getSiteProperty('siteTitle', intl.locale);
 
   const FORCE_PUBLIC_UI = ['/sitemap', '/search'];
   const isPublicUI = FORCE_PUBLIC_UI.reduce(
@@ -29,7 +25,6 @@ const GenericAppExtras = (props) => {
 
   return (
     <>
-      <Helmet titleTemplate={`%s - ${siteTitle}`} />
       {isPublicUI && (
         <>
           <BodyClass className="public-ui" />

package/src/components/ItaliaTheme/AppExtras/SiteSettingsExtras.jsx

@@ -0,0 +1,41 @@
+/*
+CUSTOMIZATIONS:
+- get defaultValue from siteProperties
+*/
+
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
+import { Helmet } from '@plone/volto/helpers';
+import { SiteProperty } from 'volto-site-settings';
+import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
+
+const SiteSettingsExtras = (props) => {
+  const intl = useIntl();
+  const subsite = useSelector((state) => state.subsite?.data);
+  let siteTitle = SiteProperty({
+    property: 'site_title',
+    getValue: true,
+    defaultValue: getSiteProperty('siteTitle', intl.locale),
+    // TODO DEPRECATED: remove and only use defaultValue in v12
+    forceValue: subsite?.title || getSiteProperty('siteTitle', intl.locale),
+  });
+
+  const parentSiteTitle = SiteProperty({
+    property: 'site_title',
+    getValue: true,
+    getParent: true,
+    defaultValue: getSiteProperty('siteTitle', intl.locale),
+    // TODO DEPRECATED: remove and only use defaultValue in v12
+    forceValue: getSiteProperty('siteTitle', intl.locale),
+  });
+
+  if (parentSiteTitle !== siteTitle) {
+    siteTitle = siteTitle + ' - ' + parentSiteTitle;
+  }
+
+  siteTitle = siteTitle?.replaceAll('\\n', ' - ') ?? '';
+
+  return <Helmet titleTemplate={`%s - ${siteTitle}`} />;
+};
+export default SiteSettingsExtras;

package/src/components/ItaliaTheme/Blocks/EventSearch/DefaultFilters.js

@@ -36,6 +36,8 @@ const DefaultFilters = () => {
   const intl = useIntl();
   moment.locale(intl.locale);
   const subsite = useSelector((state) => state.subsite?.data);
+  const isSubsiteValid = subsite && Object.keys(subsite).length > 0;
+  const path = isSubsiteValid ? flattenToAppURL(subsite['@id']) : '/';
 
   return {
     text_filter: {
@@ -68,7 +70,7 @@ const DefaultFilters = () => {
           isSearchable: true,
           options: {
             dispatch: {
-              path: subsite ? flattenToAppURL(subsite['@id']) : '/',
+              path: path,
               portal_types: ['Venue'],
               fullobjects: 0,
               b_size: 10000,

package/src/components/ItaliaTheme/Blocks/Listing/SliderTemplate.jsx

@@ -41,7 +41,7 @@ const messages = defineMessages({
 
 const Slide = (props) => {
   const intl = useIntl();
-  const { item, index, appearance, appearanceProp, onKeyDown } = props;
+  const { index, appearance, appearanceProp, onKeyDown } = props;
 
   const appearances = config.blocks.blocksConfig.listing.variations.filter(
     (v) => v.id === 'slider',
@@ -50,7 +50,6 @@ const Slide = (props) => {
 
   return (
     <SingleSlideWrapper
-      key={item['@id'] + index}
       index={index}
       onKeyDown={onKeyDown}
       aria-label={
@@ -130,6 +129,7 @@ const SliderTemplate = ({
             };
           return (
             <El
+              key={index}
               className={`${item.props.className} slick-dot`}
               tabIndex={-1}
               title={intl.formatMessage(messages.slideDot, {
@@ -228,6 +228,7 @@ const SliderTemplate = ({
                 const prevIndex = index > 0 ? index - 1 : null;
                 return (
                   <Slide
+                    key={item['@id'] + index}
                     image={image}
                     index={index}
                     full_width={full_width}

package/src/components/ItaliaTheme/BrandText/BrandText.jsx

@@ -1,18 +1,48 @@
 import React from 'react';
 import cx from 'classnames';
 import { useIntl } from 'react-intl';
+import { SiteProperty } from 'volto-site-settings';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 
-const BrandText = ({ mobile = false, subsite }) => {
+const BrandText = ({ mobile = false, subsite, getParent = false }) => {
   const intl = useIntl();
+  // TODO DEPRECATED: remove and only use SiteProperty
+  const deprecatedSiteTitle =
+    subsite?.title || getSiteProperty('siteTitle', intl.locale);
+  let title = SiteProperty({
+    property: 'site_title',
+    forceValue: deprecatedSiteTitle,
+    defaultValue: getSiteProperty('siteTitle', intl.locale),
+    getValue: true,
+    getParent: getParent,
+  });
+
+  // TODO DEPRECATED: remove and only use SiteProperty
+  const deprecatedSiteSubtitle =
+    subsite?.description || getSiteProperty('siteSubtitle', intl.locale);
+  const description = SiteProperty({
+    property: 'site_subtitle',
+    forceValue: deprecatedSiteSubtitle,
+    defaultValue: getSiteProperty('siteSubtitle', intl.locale),
+    getValue: true,
+    getParent: getParent,
+  });
+  const titleSplit = title?.split('\n') ?? null;
+  title = titleSplit?.map((t, i) => (
+    <React.Fragment key={i}>
+      {t}
+      {i < titleSplit.length - 1 && <br />}
+    </React.Fragment>
+  ));
+
   return (
     <div className="it-brand-text">
-      <p className="no_toc h2">
-        {subsite?.title || getSiteProperty('siteTitle', intl.locale)}
-      </p>
-      <p className={cx('no_toc h3', { 'd-none d-md-block': !mobile })}>
-        {subsite?.description || getSiteProperty('siteSubtitle', intl.locale)}
-      </p>
+      {title && <p className="no_toc h2">{title}</p>}
+      {description && (
+        <p className={cx('no_toc h3', { 'd-none d-md-block': !mobile })}>
+          {description}
+        </p>
+      )}
     </div>
   );
 };

package/src/components/ItaliaTheme/BrandTextFooter/BrandTextFooter.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { BrandText } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const BrandTextFooter = () => {
-  return <BrandText />;
+  return <BrandText getParent={true} />;
 };
 
 export default BrandTextFooter;

package/src/components/ItaliaTheme/Breadcrumbs/Breadcrumbs.jsx

@@ -21,6 +21,7 @@ import {
 import { UniversalLink } from '@plone/volto/components';
 import { Row, Col, BreadcrumbItem } from 'design-react-kit';
 import GoogleBreadcrumbs from 'design-comuni-plone-theme/components/ItaliaTheme/Breadcrumbs/GoogleBreadcrumbs';
+import { useHomePath } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -98,6 +99,7 @@ const Breadcrumbs = ({ pathname }) => {
       items = [];
     }
   }
+  const homepath = useHomePath();
 
   return items?.length > 0 ? (
     <>
@@ -110,7 +112,7 @@ const Breadcrumbs = ({ pathname }) => {
           >
             <ol className="breadcrumb" data-element="breadcrumb">
               <BreadcrumbItem tag="li">
-                <UniversalLink href="/">
+                <UniversalLink href={homepath}>
                   {intl.formatMessage(messages.home)}
                 </UniversalLink>
                 <span className="separator">/</span>

package/src/components/ItaliaTheme/Footer/FooterInfos.jsx

@@ -17,6 +17,8 @@ import {
   FooterSocials,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
+import { useHomePath } from 'design-comuni-plone-theme/helpers';
+
 const messages = defineMessages({
   goToPage: {
     id: 'Vai alla pagina',
@@ -29,7 +31,7 @@ const FooterInfos = () => {
   const N_COLUMNS = 4;
   const location = useLocation();
   const dispatch = useDispatch();
-
+  const homepath = useHomePath();
   const footerConfiguration = useSelector(
     (state) => state.editableFooterColumns?.result,
   );
@@ -41,7 +43,7 @@ const FooterInfos = () => {
   //filter rootpaths
   const footerColumns = getItemsByPath(
     footerConfiguration,
-    location?.pathname?.length ? location.pathname : '/',
+    location?.pathname?.length ? location.pathname : homepath,
   );
 
   const colWidth =

package/src/components/ItaliaTheme/Footer/FooterMain.jsx

@@ -7,6 +7,7 @@ import React from 'react';
 import { Container, Row, Col } from 'design-react-kit';
 
 import { UniversalLink } from '@plone/volto/components';
+import { FooterTop } from 'volto-editablefooter';
 import {
   FooterNavigation,
   FooterInfos,
@@ -14,8 +15,7 @@ import {
   BrandTextFooter,
   FooterPNRRLogo,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/';
-
-import { FooterTop } from 'volto-editablefooter';
+import { useHomePath } from 'design-comuni-plone-theme/helpers';
 
 /**
  * FooterMain component class.
@@ -24,7 +24,7 @@ import { FooterTop } from 'volto-editablefooter';
  */
 const FooterMain = () => {
   const footerTopContent = FooterTop();
-
+  const homepath = useHomePath();
   return (
     <div className="it-footer-main">
       <Container tag="div">
@@ -35,7 +35,7 @@ const FooterMain = () => {
                 {footerTopContent ?? (
                   <>
                     <FooterPNRRLogo />
-                    <UniversalLink href="/">
+                    <UniversalLink href={homepath}>
                       <LogoFooter />
                       <BrandTextFooter />
                     </UniversalLink>

package/src/components/ItaliaTheme/Footer/FooterSmall.jsx

@@ -5,15 +5,18 @@
 
 import React, { useEffect } from 'react';
 import cx from 'classnames';
-import { UniversalLink } from '@plone/volto/components';
 import { defineMessages, useIntl } from 'react-intl';
 import { Container } from 'design-react-kit';
-import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 import { useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { getSubFooter, getItemsByPath } from 'volto-subfooter';
-import { flattenToAppURL } from '@plone/volto/helpers';
 import { displayBanner } from 'volto-gdpr-privacy';
+import { UniversalLink } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import {
+  getSiteProperty,
+  useHomePath,
+} from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
   goToPage: {
@@ -35,7 +38,7 @@ const FooterSmall = () => {
   const intl = useIntl();
   const pathname = useLocation().pathname;
   const dispatch = useDispatch();
-
+  const homepath = useHomePath();
   const subFooter = useSelector((state) => state.subFooter?.result);
   const subFooterItems = getItemsByPath(subFooter, pathname)?.filter(
     (item) => item.visible,
@@ -54,7 +57,9 @@ const FooterSmall = () => {
           {subFooterItems?.length > 0 &&
             subFooterItems.map((item, index) => {
               let url =
-                item.href || flattenToAppURL(item.linkUrl?.[0]?.['@id']) || '/';
+                item.href ||
+                flattenToAppURL(item.linkUrl?.[0]?.['@id']) ||
+                homepath;
               return (
                 <li
                   className={cx('list-inline-item', {

package/src/components/ItaliaTheme/Header/HeaderCenter.jsx

@@ -15,6 +15,7 @@ import {
   HeaderSearch,
   BrandText,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useHomePath } from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
   logoSubsiteAlt: {
@@ -32,22 +33,20 @@ const HeaderCenter = () => {
   const subsite = useSelector((state) => state.subsite?.data);
   const logoSubsite = subsite?.subsite_logo && (
     <figure className="icon">
-      <img
-        src={flattenToAppURL(subsite.subsite_logo.scales?.mini?.download)}
-        alt={intl.formatMessage(messages.logoSubsiteAlt)}
-      />
+      <Logo alt={intl.formatMessage(messages.logoSubsiteAlt)} />
     </figure>
   );
+  const homepath = useHomePath();
 
   return (
     <Header small={false} theme="" type="center">
       <HeaderContent>
         <div className="it-brand-wrapper ps-4">
           <UniversalLink
-            href={subsite?.['@id'] ? flattenToAppURL(subsite['@id']) : '/'}
+            href={subsite?.['@id'] ? flattenToAppURL(subsite['@id']) : homepath}
             title={intl.formatMessage(messages.subsiteUniversalLink)}
           >
-            {subsite?.subsite_logo ? logoSubsite : <Logo />}
+            {subsite?.subsite_logo ? logoSubsite : <Logo className="icon" />}
             <BrandText subsite={subsite} />
           </UniversalLink>
         </div>

package/src/components/ItaliaTheme/Header/HeaderSlim/HeaderSlim.jsx

@@ -13,19 +13,35 @@ import {
   HeaderRightZone,
 } from 'design-react-kit';
 import { useIntl } from 'react-intl';
-import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
+import {
+  getSiteProperty,
+  useHomePath,
+} from 'design-comuni-plone-theme/helpers';
+import { SiteProperty } from 'volto-site-settings';
 
 const HeaderSlim = () => {
   const subsite = useSelector((state) => state.subsite?.data);
   const intl = useIntl();
-
+  const homepath = useHomePath();
   const parentSiteURL = subsite
-    ? '/'
+    ? homepath
     : getSiteProperty('parentSiteURL', intl.locale);
 
-  const parentSiteTile = subsite
-    ? getSiteProperty('subsiteParentSiteTitle', intl.locale)
-    : getSiteProperty('parentSiteTitle', intl.locale);
+  const staticParentSiteTitle = getSiteProperty('parentSiteTitle', intl.locale);
+
+  // TODO DEPRECATED use only SiteProperty
+  const deprecatedSubsiteParentSiteTitle = getSiteProperty(
+    'subsiteParentSiteTitle',
+    intl.locale,
+  );
+
+  const subsiteParentSiteTitle = SiteProperty({
+    property: 'site_title',
+    forceValue: deprecatedSubsiteParentSiteTitle,
+    defaultValue: getSiteProperty('subsiteParentSiteTitle', intl.locale),
+    getValue: true,
+    getParent: true,
+  });
 
   const target = subsite ? null : '_blank';
   return (
@@ -37,7 +53,8 @@ const HeaderSlim = () => {
           target={target}
           rel="noopener noreferrer"
         >
-          {parentSiteTile}
+          {!subsite && staticParentSiteTitle}
+          {subsite && (subsiteParentSiteTitle?.replaceAll('\\n', ' - ') ?? '')}
         </HeaderBrand>
         <HeaderRightZone>
           <HeaderSlimRightZone />

package/src/components/ItaliaTheme/Header/ParentSiteMenu.jsx

@@ -8,12 +8,14 @@ import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Nav, NavItem, NavLink } from 'design-react-kit';
+import { useHomePath } from 'design-comuni-plone-theme/helpers';
 
 const ParentSiteMenu = () => {
   const dropdownMenu = useSelector(
     (state) => state.dropdownMenuNavItems?.result,
   );
   const subsite = useSelector((state) => state.subsite?.data);
+  const homepath = useHomePath();
 
   let menu = null;
   if (subsite) {
@@ -23,7 +25,7 @@ const ParentSiteMenu = () => {
     let i = url_split.length - 1;
     while (i > 0) {
       let s = url_split.slice(0, i).join('/');
-      s = s.length === 0 ? '/' : s;
+      s = s.length === 0 ? homepath : s;
       // eslint-disable-next-line no-loop-func
       dropdownMenu.forEach((m) => {
         if (m.rootPath === s) {

package/src/components/ItaliaTheme/Logo/Logo.jsx

@@ -10,9 +10,10 @@
  * Note the icon class.
  */
 
-/* SVG example */
-// import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-// const Logo = () => <Icon color="" icon="it-pa" padding={false} size="" />;
+/* SVG example
+ import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+ const Logo = () => <Icon color="" icon="it-pa" padding={false} size="" />;
+*/
 
 /* PNG example using https://www.npmjs.com/package/webpack-image-resize-loader *
  * works, but some issues with prettier and jest
@@ -20,9 +21,16 @@
 // eslint-disable-next-line import/no-unresolved
 //import logo from './logo.png?width=164';
 import logo from './logo.png';
+import { SiteProperty } from 'volto-site-settings';
 
-const Logo = () => (
-  <img className="icon" src={logo} width="82" height="82" alt="Logo" />
-);
-
+const Logo = ({ alt = 'Logo', className }) => {
+  return (
+    <SiteProperty
+      property="site_logo"
+      defaultValue={{ url: logo, width: 82, height: 82 }}
+      className={className}
+      alt={alt}
+    />
+  );
+};
 export default Logo;

package/src/components/ItaliaTheme/LogoFooter/LogoFooter.jsx

@@ -12,9 +12,17 @@
 
 // eslint-disable-next-line import/no-unresolved
 import logo from '../Logo/logo.png';
+import { SiteProperty } from 'volto-site-settings';
 
-const LogoFooter = () => (
-  <img className="icon" src={logo} width="82" height="82" alt="Logo" />
-);
+const LogoFooter = () => {
+  return (
+    <SiteProperty
+      property="site_logo_footer"
+      defaultValue={{ url: logo, width: 82, height: 82 }}
+      className="icon"
+      alt="Logo"
+    />
+  );
+};
 
 export default LogoFooter;

package/src/components/ItaliaTheme/Pagination/Pagination.jsx

@@ -58,7 +58,6 @@ class Pagination extends Component {
 
   handleItemClick = (e, nextActivePage) => {
     const { activePage: prevActivePage } = this.state;
-
     // Heads up! We need the cast to the "number" type there, as `activePage` can be a string
     if (+prevActivePage === +nextActivePage) return;
     this.setState({ activePage: nextActivePage.children });

package/src/components/ItaliaTheme/Slider/NextArrow.jsx

@@ -25,7 +25,7 @@ export default function NextArrow(props) {
       id={id}
     >
       <Icon icon="chevron-right" key="chevron-right" title={_title} />
-      <span class="visually-hidden">{_title}</span>
+      <span className="visually-hidden">{_title}</span>
     </button>
   );
 }

package/src/components/ItaliaTheme/Slider/PrevArrow.jsx

@@ -27,7 +27,7 @@ export default function PrevArrow(props) {
       onKeyDown={onKeyDown}
     >
       <Icon icon="chevron-left" key="chevron-left-prev" title={_title} />
-      <span class="visually-hidden">{_title}</span>
+      <span className="visually-hidden">{_title}</span>
     </button>
   );
 }

package/src/components/ItaliaTheme/View/Commons/RelatedArticles.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { OfficeCard } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import { usePaginatedItemsSection } from 'design-comuni-plone-theme/helpers';
+import { Pagination } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 const RelatedArticles = ({
   id = 'related-articles',
@@ -12,6 +14,9 @@ const RelatedArticles = ({
   show_title = true,
   noMargin = false,
 }) => {
+  const { batches, currentPage, onPaginationChange, pageNumbers } =
+    usePaginatedItemsSection({ data: items });
+
   return (
     <article
       id={id}
@@ -27,7 +32,7 @@ const RelatedArticles = ({
       ) : null}
 
       <div className="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal">
-        {items?.map((item, i) => (
+        {batches?.map((item, i) => (
           <OfficeCard
             key={item['@id']}
             office={item}
@@ -36,6 +41,11 @@ const RelatedArticles = ({
           />
         ))}
       </div>
+      <Pagination
+        activePage={currentPage}
+        totalPages={pageNumbers}
+        onPageChange={onPaginationChange}
+      />
     </article>
   );
 };

package/src/components/ItaliaTheme/View/ServizioView/ServizioMetatag.jsx

@@ -1,4 +1,6 @@
+import { useIntl } from 'react-intl';
 import { Helmet, toPublicURL, isInternalURL } from '@plone/volto/helpers';
+import { SiteProperty } from 'volto-site-settings';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 import { richTextHasContent } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
@@ -13,7 +15,16 @@ const fieldDataToPlainText = (field) => {
 };
 
 const ServizioMetatag = ({ content }) => {
-  const siteTitle = getSiteProperty('siteTitle');
+  const intl = useIntl();
+  // TODO DEPRECATED use only SiteProperty
+  const deprecatedSiteTitle = getSiteProperty('siteTitle', intl.locale);
+  let siteTitle = SiteProperty({
+    property: 'site_title',
+    forceValue: deprecatedSiteTitle,
+    getValue: true,
+    defaultTitle: getSiteProperty('siteTitle', intl.locale),
+  });
+  siteTitle = siteTitle?.replaceAll('\\n', ' - ') ?? '';
 
   const schemaOrg = {
     '@context': 'https://schema.org',

package/src/components/ItaliaTheme/View/UOView/UOServices.jsx

@@ -11,6 +11,7 @@ import {
 } from 'design-react-kit';
 import { Pagination } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { UniversalLink } from '@plone/volto/components';
+import { usePaginatedItemsSection } from 'design-comuni-plone-theme/helpers';
 
 const messages = defineMessages({
   servizi_offerti: {
@@ -19,34 +20,15 @@ const messages = defineMessages({
   },
 });
 
-//* Pagination **/
-const divideServicesIntoBatches = (arr, batchSize) => {
-  const batches = [];
-  for (let i = 0; i < arr.length; i += batchSize) {
-    batches.push(arr.slice(i, i + batchSize));
-  }
-  return batches;
-};
-
 const UOServices = ({ content }) => {
   const intl = useIntl();
 
-  const [currentPage, setCurrentPage] = useState(1);
-  const bSize = 4;
-
-  //* Calcolo numero pagine
-
   const servizi_offerti =
     content.servizi_offerti === undefined || content.servizi_offerti === null
       ? []
       : content.servizi_offerti;
-
-  const pageNumbers = Math.ceil(servizi_offerti.length / bSize);
-
-  const onPaginationChange = (activePage) => {
-    const current = activePage?.children ?? 1;
-    setCurrentPage(current);
-  };
+  const { batches, currentPage, onPaginationChange, pageNumbers } =
+    usePaginatedItemsSection({ data: servizi_offerti });
 
   return content?.servizi_offerti?.length > 0 ? (
     <section
@@ -57,9 +39,7 @@ const UOServices = ({ content }) => {
         {intl.formatMessage(messages.servizi_offerti)}
       </h2>
       <Row className="card-wrapper card-teaser-wrapper align-items-stretch">
-        {divideServicesIntoBatches(content?.servizi_offerti, bSize)[
-          currentPage - 1
-        ]?.map((servizio, i) => (
+        {batches?.map((servizio, i) => (
           <Col xs="12" lg="6">
             <Card className="shadow rounded card-big-io-comune p-3 my-3">
               <CardBody>
@@ -79,7 +59,7 @@ const UOServices = ({ content }) => {
         <Pagination
           activePage={currentPage}
           totalPages={pageNumbers}
-          onPageChange={(e, { activePage }) => onPaginationChange(activePage)}
+          onPageChange={onPaginationChange}
         />
       </div>
     </section>

package/src/config/italiaConfig.js

@@ -35,6 +35,8 @@ import GenericAppExtras from 'design-comuni-plone-theme/components/ItaliaTheme/A
 import PageLoader from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/PageLoader';
 import TrackFocus from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/TrackFocus';
 import redraft from 'redraft';
+
+import SiteSettingsExtras from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/SiteSettingsExtras';
 import { loadables as ItaliaLoadables } from 'design-comuni-plone-theme/config/loadables';
 
 // CTs icons
@@ -298,6 +300,10 @@ export default function applyConfig(voltoConfig) {
         match: '',
         component: TrackFocus,
       },
+      {
+        match: '',
+        component: SiteSettingsExtras,
+      },
     ],
     maxFileUploadSize: null,
     'volto-blocks-widget': {
@@ -518,6 +524,10 @@ export default function applyConfig(voltoConfig) {
     ...config.components,
     BlockExtraTags: { component: () => null },
   };
+  config.registerComponent({
+    name: 'SiteSettingsExtras',
+    component: SiteSettingsExtras,
+  });
 
   // REDUCERS
   config.addonReducers = {

package/src/customizations/volto/components/theme/Navigation/Navigation.jsx

@@ -38,10 +38,7 @@ const Navigation = ({ pathname }) => {
   const subsite = useSelector((state) => state.subsite?.data);
   const logoSubsite = subsite?.subsite_logo && (
     <figure className="icon">
-      <img
-        src={flattenToAppURL(subsite.subsite_logo.scales?.mini?.download)}
-        alt="Logo"
-      />
+      <Logo />
     </figure>
   );
 
@@ -136,7 +133,11 @@ const Navigation = ({ pathname }) => {
                     }
                     onClick={() => setCollapseOpen(false)}
                   >
-                    {subsite?.subsite_logo ? logoSubsite : <Logo />}
+                    {subsite?.subsite_logo ? (
+                      logoSubsite
+                    ) : (
+                      <Logo className="icon" />
+                    )}
                     <BrandText mobile={true} subsite={subsite} />
                   </UniversalLink>
                 </div>

package/src/customizations/volto/helpers/Html/Html.jsx

@@ -4,7 +4,7 @@
  */
 /*
  CUSTOMIZATIONS:
- - Add <link rel="shortcut icon" href="/favicon.ico" />
+ - Rimosso <link rel="shortcut icon" href="/favicon.ico" /> perchè creato da volto-site-settings
  - Add shrink-to-fit=no in viewport meta
  - Remove link for manifest and svg/apple icons
  */
@@ -122,7 +122,7 @@ class Html extends Component {
               })};`,
             }}
           />
-          <link rel="shortcut icon" href="/favicon.ico" />
+          {/* <link rel="shortcut icon" href="/favicon.ico" /> */}
           <meta property="og:type" content="website" />
           <meta name="generator" content="Plone 6 - https://plone.org" />
           <meta

package/src/helpers/index.js

@@ -52,3 +52,5 @@ export {
 export { commonSearchBlockMessages } from 'design-comuni-plone-theme/helpers/Translations/searchBlockExtendedTranslations';
 
 export { getComponentWithFallback } from 'design-comuni-plone-theme/helpers/registry';
+export { useHomePath } from 'design-comuni-plone-theme/helpers/url';
+export { usePaginatedItemsSection } from 'design-comuni-plone-theme/helpers/usePaginatedItemsSection.hook.ts';

package/src/helpers/url.js

@@ -0,0 +1,15 @@
+import { useState, useEffect } from 'react';
+import { useIntl } from 'react-intl';
+
+import config from '@plone/volto/registry';
+
+export const useHomePath = () => {
+  const [path, setPath] = useState('/');
+
+  const { locale } = useIntl();
+
+  useEffect(() => {
+    setPath(config.settings.isMultilingual ? '/' + locale : '/');
+  }, [locale]);
+  return path;
+};

package/src/helpers/usePaginatedItemsSection.hook.ts

@@ -0,0 +1,63 @@
+import { useState, useMemo } from 'react';
+import type { IntlShape } from 'react-intl';
+
+interface usePaginatedItemsSectionProps {
+  data: Array<any> | null | undefined;
+  bSize?: number;
+}
+
+type ActivePage = {
+  active: boolean;
+  type: 'pageItem' | string;
+  ellipsisItem: '...' | string | null | undefined;
+  isPrevButtonInactive: boolean;
+  isForwButtonInactive: boolean;
+  children: number;
+  intl: IntlShape;
+};
+
+type PaginationFunctionExtraArgs = {
+  activePage: ActivePage;
+  onClick: (
+    e: MouseEvent | KeyboardEvent,
+    obj: PaginationFunctionExtraArgs,
+  ) => void;
+};
+
+export const DEFAULT_PAGINATED_CARDS_SECTION_BSIZE = 4;
+
+function getBatches(
+  arr: usePaginatedItemsSectionProps['data'],
+  batchSize: number,
+): any[][] {
+  const batches = [];
+  if (arr) {
+    for (let i = 0; i < arr.length; i += batchSize) {
+      batches.push(arr.slice(i, i + batchSize));
+    }
+  }
+  return batches;
+}
+
+export function usePaginatedItemsSection({
+  data,
+  bSize = DEFAULT_PAGINATED_CARDS_SECTION_BSIZE,
+}: usePaginatedItemsSectionProps) {
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  const pageNumbers = data ? Math.ceil(data.length / bSize) : 0;
+
+  const onPaginationChange = (
+    _e: MouseEvent | KeyboardEvent,
+    { activePage }: PaginationFunctionExtraArgs,
+  ) => {
+    const current = activePage?.children ?? 1;
+    setCurrentPage(current);
+  };
+  const batches: Array<any> = useMemo(() => {
+    const currentIndex = currentPage - 1;
+    return getBatches(data, bSize)[currentIndex];
+  }, [data, bSize, currentPage]);
+
+  return { batches, currentPage, onPaginationChange, pageNumbers };
+}

package/src/theme/_cms-ui.scss

@@ -94,6 +94,12 @@ body.cms-ui {
     }
   }
 
+  .blocks-widget-container {
+    .block.table .toolbar {
+      top: -3.34rem;
+    }
+  }
+
   .it-header-wrapper,
   .public-ui {
     font-size: 18px;