design-comuni-plone-theme 8.5.0 → 8.6.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 
 
+## [8.6.0](https://github.com/redturtle/design-comuni-plone-theme/compare/v8.5.1...v8.6.0) (2023-09-18)
+
+
+### Features
+
+* added Release log ([#332](https://github.com/redturtle/design-comuni-plone-theme/issues/332)) ([d1f73d0](https://github.com/redturtle/design-comuni-plone-theme/commit/d1f73d033c54e4c5e9f6b8ec231e938d7bc97c8b))
+
+
+### Bug Fixes
+
+* fix container in edit mode ([#328](https://github.com/redturtle/design-comuni-plone-theme/issues/328)) ([d52a02d](https://github.com/redturtle/design-comuni-plone-theme/commit/d52a02d7218d6ccfcfa13a1b66993887820f7114))
+
+## [8.5.1](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.5.0...v8.5.1) (2023-09-18)
+
+
+### Bug Fixes
+
+* added clear float to page sections ([#324](https://github.com/RedTurtle/design-comuni-plone-theme/issues/324)) ([7f1e46d](https://github.com/RedTurtle/design-comuni-plone-theme/commit/7f1e46d42b8cae11b04f68b3a01988c3e9226db7))
+* fix cContacts block horizontal alignment ([#329](https://github.com/RedTurtle/design-comuni-plone-theme/issues/329)) ([b68ee5e](https://github.com/RedTurtle/design-comuni-plone-theme/commit/b68ee5e9901c81db0048dc2eb29f9611cdc3fb5a))
+* fix Content in Evidence template when there's more than one item ([#327](https://github.com/RedTurtle/design-comuni-plone-theme/issues/327)) ([049f520](https://github.com/RedTurtle/design-comuni-plone-theme/commit/049f5205685d2010982cf4a990479f719142fadf))
+* fix height of icons in Icons Block ([#330](https://github.com/RedTurtle/design-comuni-plone-theme/issues/330)) ([c77ada8](https://github.com/RedTurtle/design-comuni-plone-theme/commit/c77ada86763de62060f95b2fec52a824cbe76011))
+* gridBlock edit overlapping when using 4 columns and adding image block ([#322](https://github.com/RedTurtle/design-comuni-plone-theme/issues/322)) ([018deb7](https://github.com/RedTurtle/design-comuni-plone-theme/commit/018deb7081b3830df526304330349855e5b79d4d))
+* load of locations data in LocationsMap ([#323](https://github.com/RedTurtle/design-comuni-plone-theme/issues/323)) ([093f08b](https://github.com/RedTurtle/design-comuni-plone-theme/commit/093f08bcdb92c46053ec78878b1ed2e375efd2ff))
+* slider a11y ([3d5bcc4](https://github.com/RedTurtle/design-comuni-plone-theme/commit/3d5bcc485c6d280647712ad2d0e3ccf6b8c4974a))
+* updated volto-dropdownmenu to remove upload image when editing dropdownmenu blocks ([#331](https://github.com/RedTurtle/design-comuni-plone-theme/issues/331)) ([2c5605f](https://github.com/RedTurtle/design-comuni-plone-theme/commit/2c5605f3be09632c923196eedc166485c15b04a3))
+
+
+### Documentation
+
+* updated publiccode ([55e59c7](https://github.com/RedTurtle/design-comuni-plone-theme/commit/55e59c7822ca93330c4d509461d0cd32a9b2ea0b))
+
 ## [8.5.0](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v8.4.6...v8.5.0) (2023-09-05)
 
 

package/RELEASE.md

@@ -0,0 +1,31 @@
+<!--- RELEASE file. La cura di questo file è in carico ai dev.
+ Qui vanno inserite tutte le novità e bugfix, spiegati in un linguaggio comprensibile anche ai non dev.
+ Se ci sono delle migliorie/novità per cui è stato aggiunto qualcosa nel manuale, linkarlo come nell'esempio sotto.
+ -->
+
+<!--- -----------------------------------------------------------------
+  Esempio:
+  ---------------------------------------------------------------------
+## Versione 7.10.9
+### Migliorie
+- Fissato il layout di stampa per pagine con Accordion
+### Novità
+- Nuovo blocco "Informazioni" [`Istruzioni`](https://docs.google.com/document/d/1SThuxa_ah0BuNXukWs564kKPfprK41WLQE8Mome-0xg/edit#heading=h.7ty110jumgmd)
+### Fix
+- il numero di telefono dentro card ufficio adesso è visibile anche senza indirizzo
+-->
+
+<!--- -----------------------------------------------------------------
+ TEMPLATE PER RELEASE
+ ----------------------------------------------------------------------
+
+## Versione X.X.X
+### Migliorie
+- ...
+
+### Novità
+- ...  [`Istruzioni`](url della documentazione relativa alla novità)
+
+### Fix
+- ...
+-->

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "8.5.0",
+  "version": "8.6.0",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",
@@ -117,6 +117,7 @@
     "classnames": "^2.3.2",
     "design-react-kit": "italia/design-react-kit#fc9b40257ba3cb613141faf217f1f5b806489740",
     "htmldiff-js": "1.0.5",
+    "marked": "9.0.0",
     "react-dropzone": "11.0.1",
     "react-google-recaptcha-v3": "1.7.0",
     "react-highlight-words": "0.18.0",
@@ -130,7 +131,7 @@
     "typeface-titillium-web": "0.0.72",
     "volto-blocks-widget": "3.1.0",
     "volto-data-grid-widget": "2.2.1",
-    "volto-dropdownmenu": "4.0.0",
+    "volto-dropdownmenu": "4.1.0",
     "volto-editablefooter": "5.0.1",
     "volto-feedback": "0.1.5",
     "volto-form-block": "3.1.0",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2023-09-05'
+releaseDate: '2023-09-18'
 softwareType: standalone/web
-softwareVersion: 8.5.0
+softwareVersion: 8.5.1
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

package/src/components/ItaliaTheme/Blocks/ContactsBlock/Block/ViewBlock.jsx

@@ -20,7 +20,7 @@ import { checkRedraftHasContent } from 'design-comuni-plone-theme/helpers';
 const ViewBlock = ({ data, isOpen, toggle, id, index }) => {
   return (
     <Card
-      className="card-bg rounded subblock-view"
+      className="card-bg rounded subblock-view "
       noWrapper={false}
       space
       tag="div"

package/src/components/ItaliaTheme/Blocks/ContactsBlock/Edit.jsx

@@ -106,7 +106,7 @@ class Edit extends SubblocksEdit {
             </div>
 
             <SubblocksWrapper node={this.node}>
-              <Row>
+              <Row className="justify-content-center">
                 {this.state.subblocks.map((subblock, subindex) => (
                   <Col lg="4" key={subblock.id}>
                     <EditBlock
@@ -120,7 +120,7 @@ class Edit extends SubblocksEdit {
                 ))}
 
                 {this.props.selected && (
-                  <Col lg={4}>
+                  <Col lg={12} className="text-center pb-3">
                     {this.renderAddBlockButton(
                       this.props.intl.formatMessage(messages.addItem),
                     )}

package/src/components/ItaliaTheme/Blocks/ContactsBlock/View.jsx

@@ -42,9 +42,9 @@ const AccordionView = ({ data, block }) => {
                 )}
               </div>
             </div>
-            <Row>
+            <Row className="justify-content-center">
               {data.subblocks.map((subblock, index) => (
-                <Col lg="4" key={subblock.id}>
+                <Col lg="4" key={subblock.id} className="pb-3">
                   <ViewBlock
                     data={subblock}
                     key={index}

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

@@ -137,6 +137,7 @@ const BandiInEvidenceTemplate = ({
                     )}
 
                     {/* Tipologia */}
+
                     {show_tipologia && item.tipologia_bando?.title?.length > 0 && (
                       <span className="d-flex flex-wrap align-items-baseline bando-dati-info">
                         <div className="bando-dati-label me-2">
@@ -206,10 +207,12 @@ const BandiInEvidenceTemplate = ({
                             className={cx('bando-state', {
                               open: item.bando_state?.includes('open'),
                               closed: item.bando_state?.includes('closed'),
-                              scheduled:
-                                item.bando_state?.includes('scheduled'),
-                              'in-progress':
-                                item.bando_state?.includes('inProgress'),
+                              scheduled: item.bando_state?.includes(
+                                'scheduled',
+                              ),
+                              'in-progress': item.bando_state?.includes(
+                                'inProgress',
+                              ),
                             })}
                           >
                             {intl.formatMessage(messages[item.bando_state[0]])}

package/src/components/ItaliaTheme/Blocks/Listing/Commons/utils.js

@@ -61,7 +61,7 @@ export const useSlider = (userAutoplay) => {
 
     if ((userAutoplay && !slide) || (userAutoplay && !slide.length > 0)) return;
 
-    // Custom handling of focus as per Arter a11y audit and request
+    // Custom handling of focus for a11y
     const link = visibleSlideTitle(
       `a.slide-link[data-slide="${currentSlide}"]`,
     );
@@ -70,7 +70,14 @@ export const useSlider = (userAutoplay) => {
       return;
     }
     // eslint-disable-next-line no-unused-expressions
-    else link.focus();
+    else if (
+      // if the focus was already on a slide, move it to the current one
+      Array.from(document.querySelectorAll('.slick-slide')).some((el) =>
+        el.contains(document.activeElement),
+      )
+    ) {
+      link.focus();
+    }
   };
 
   return {

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

@@ -46,11 +46,7 @@ const ContentInEvidenceTemplate = ({
 
   return (
     <div className="contentInEvidenceTemplate">
-      <Container
-        className={cx('', {
-          'px-4': isEditMode,
-        })}
-      >
+      <Container>
         {title && (
           <Row>
             <Col>

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

@@ -50,7 +50,7 @@ const messages = defineMessages({
 });
 
 function NextArrow(props) {
-  // Custom handling of focus as per Arter a11y audit and request
+  // Custom handling of focus for a11y
   const { className, style, onClick, intl, currentSlide } = props;
   const handleClick = (options) => {
     onClick(options, false);
@@ -85,7 +85,7 @@ function NextArrow(props) {
 }
 
 function PrevArrow(props) {
-  // Custom handling of focus as per Arter a11y audit and request
+  // Custom handling of focus for a11y
   const {
     className,
     style,
@@ -225,7 +225,7 @@ const SliderTemplate = ({
   };
 
   const renderCustomDots = (props) => {
-    // Custom handling of focus as per Arter a11y audit and request
+    // Custom handling of focus for a11y
     return (
       <ul
         className="slick-dots"
@@ -281,13 +281,13 @@ const SliderTemplate = ({
     pauseOnDotsHover: true,
     swipe: true,
     swipeToSlide: true,
-    focusOnSelect: true,
+    focusOnSelect: false,
     draggable: true,
     accessibility: true,
     nextArrow: <NextArrow intl={intl} focusNext={focusNext} />,
     prevArrow: <PrevArrow intl={intl} focusNext={focusNext} />,
     appendDots: renderCustomDots,
-    // Custom handling of focus as per Arter a11y audit and request
+    // Custom handling of focus for a11y
     afterChange: focusNext,
     responsive: [
       {

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

@@ -43,12 +43,7 @@ const LocationsMap = ({ center, locations }) => {
 
   useEffect(() => {
     venues.forEach((loc) => {
-      if (
-        !fetchedLocations?.[loc.key]?.loading &&
-        !fetchedLocations?.[loc.key]?.loaded
-      ) {
-        dispatch(getContent(loc.url, null, loc.key));
-      }
+      dispatch(getContent(loc.url, null, loc.key));
     });
 
     return () =>

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

@@ -48,13 +48,13 @@ const Metadata = ({
         </h4>
       )}
       {children}
-      <p className="font-serif mb-0 mt-4">
+      <p className="font-serif mb-0 mt-4 last-modified">
         <strong>{intl.formatMessage(messages.modified)}:</strong>{' '}
         {viewDate(intl.locale, content.modified, 'DD-MM-Y, HH:MM')}
       </p>
       {content.rights && (
         <>
-          <p className="font-serif mb-0 mt-4">
+          <p className="font-serif mb-0 mt-4 metadata">
             {intl.formatMessage(messages.rights)}
           </p>
           <strong>{content.rights}</strong>

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

@@ -31,7 +31,7 @@ const RichText = ({
     <>
       {title && (
         <Tag
-          className={cx('mt-4', {
+          className={cx('mt-4 it-page-subsection', {
             'fw-bold': title_size === 'h6',
           })}
         >

package/src/components/ItaliaTheme/View/EventoView/EventoCosE.jsx

@@ -45,7 +45,9 @@ const EventoCosE = ({ content }) => {
     >
       {content?.persone_amministrazione?.length > 0 && (
         <>
-          <h5>{intl.formatMessage(messages.parteciperanno)}</h5>
+          <h5 className="parteciperanno-section">
+            {intl.formatMessage(messages.parteciperanno)}
+          </h5>
           {content.persone_amministrazione.map((item, i) => (
             <UniversalLink
               href={flattenToAppURL(item['@id'])}

package/src/components/ItaliaTheme/View/EventoView/EventoUlterioriInformazioni.jsx

@@ -43,7 +43,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
       {richTextHasContent(content?.ulteriori_informazioni) && (
         <HelpBox text={content?.ulteriori_informazioni} />
       )}
-
       {content?.event_url && (
         <div className="mt-4">
           <h5>{intl.formatMessage(messages.event_url)}</h5>
@@ -52,7 +51,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
           </UniversalLink>
         </div>
       )}
-
       {richTextHasContent(content?.patrocinato_da) && (
         <div className="mt-4">
           {richTextHasContent(content?.patrocinato_da) && (
@@ -66,7 +64,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
           )}
         </div>
       )}
-
       {content?.strutture_politiche.length > 0 && (
         <div className="mt-4">
           <h5>{intl.formatMessage(messages.strutture_politiche)}</h5>

package/src/components/ReleaseLog/ReleaseLog.css

@@ -0,0 +1,4 @@
+h2 {
+  border-top: 1px solid grey;
+  font-weight: 600 !important;
+}

package/src/components/ReleaseLog/ReleaseLog.jsx

@@ -0,0 +1,147 @@
+/**
+ * ReleaseLog component.
+ * @module components/ReleaseLog/ReleaseLog
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import {
+  Container,
+  Nav,
+  NavItem,
+  NavLink,
+  TabContent,
+  TabPane,
+} from 'design-react-kit';
+import { Helmet } from '@plone/volto/helpers';
+import { marked } from 'marked';
+
+import './ReleaseLog.css';
+
+const ReleaseLog = () => {
+  let ReleaseDCPT = null;
+  let ReleaseIoCittadino = null;
+  let ReleaseIoPrenoto = null;
+  try {
+    ReleaseDCPT = require('design-comuni-plone-theme/../RELEASE.md');
+  } catch {
+    console.log("design-comuni-plone-theme/../RELEASE.md doesn't exists");
+  }
+  try {
+    ReleaseIoCittadino = require('@redturtle/volto-io-cittadino/../RELEASE.md');
+  } catch {
+    console.log("@redturtle/volto-io-cittadino/../RELEASE.md doesn't exists");
+  }
+  try {
+    ReleaseIoPrenoto = require('@redturtle/volto-io-prenoto/../RELEASE.md');
+  } catch {
+    console.log("@redturtle/volto-io-prenoto/../RELEASE.md doesn't exists");
+  }
+
+  const LOGS_TO_VIEW = [
+    { name: 'io-comune', file: ReleaseDCPT },
+    {
+      name: 'io-cittadino',
+      file: ReleaseIoCittadino,
+    },
+    { name: 'io-prenoto', file: ReleaseIoPrenoto },
+  ];
+
+  const [activeTab, toggleTab] = useState(LOGS_TO_VIEW[0].name);
+  const [logDCPT, setLogDCPT] = useState('');
+  const [logIoCittadino, setLogIoCittadino] = useState('');
+  const [logIoPrenoto, setLogIoPrenoto] = useState('');
+
+  useEffect(() => {
+    if (ReleaseDCPT) {
+      try {
+        fetch(ReleaseDCPT)
+          .then((res) => res.text())
+          .then((text) => {
+            setLogDCPT(marked(text));
+          });
+      } catch {
+        console.log(ReleaseDCPT + ' not found.');
+      }
+    }
+    if (ReleaseIoCittadino) {
+      try {
+        fetch(ReleaseIoCittadino)
+          .then((res) => res.text())
+          .then((text) => {
+            setLogIoCittadino(marked(text));
+          });
+      } catch {
+        console.log(ReleaseIoCittadino + ' not found.');
+      }
+    }
+    if (ReleaseIoPrenoto) {
+      try {
+        fetch(ReleaseIoPrenoto)
+          .then((res) => res.text())
+          .then((text) => {
+            setLogIoPrenoto(marked(text));
+          });
+      } catch {
+        console.log(ReleaseIoPrenoto + ' not found.');
+      }
+    }
+  }, []);
+
+  const viewTab = (tab) => {
+    if (activeTab !== tab) {
+      toggleTab(tab);
+    }
+  };
+
+  return (
+    <div className="public-ui">
+      <Helmet title="Release LOG" />
+      <Helmet>
+        <meta name="robots" content="noindex" />
+      </Helmet>
+      <Container className="px-4 my-4">
+        <Nav tabs className="mb-3">
+          {LOGS_TO_VIEW.filter((log) => log.file != null).map((log) => (
+            <NavItem key={log.name}>
+              <NavLink
+                href="#"
+                active={activeTab === log.name}
+                onClick={() => viewTab(log.name)}
+              >
+                <span>{log.name}</span>
+              </NavLink>
+            </NavItem>
+          ))}
+        </Nav>
+
+        <TabContent activeTab={activeTab}>
+          {LOGS_TO_VIEW.filter((log) => log.file != null).map((log) => (
+            <TabPane
+              tabId={log.name}
+              className="p-3"
+              key={log.name + 'tabcontent'}
+            >
+              <div
+                dangerouslySetInnerHTML={{
+                  __html:
+                    log.name === 'io-comune' ? (
+                      logDCPT
+                    ) : log.name == 'io-cittadino' ? (
+                      logIoCittadino
+                    ) : log.name == 'io-prenoto' ? (
+                      logIoPrenoto
+                    ) : (
+                      <div></div>
+                    ),
+                }}
+              ></div>
+            </TabPane>
+          ))}
+        </TabContent>
+      </Container>
+    </div>
+  );
+};
+
+export default ReleaseLog;

package/src/config/Blocks/blocks.js

@@ -364,10 +364,9 @@ const italiaBlocks = {
 
 const getItaliaBlocks = (config) => {
   delete config.blocks.blocksConfig.teaser;
-  config.blocks.blocksConfig.gridBlock.allowedBlocks =
-    config.blocks.blocksConfig.gridBlock.allowedBlocks
-      .filter((item) => !['slate', 'teaser'].includes(item))
-      .concat(['text']);
+  config.blocks.blocksConfig.gridBlock.allowedBlocks = config.blocks.blocksConfig.gridBlock.allowedBlocks
+    .filter((item) => !['slate', 'teaser'].includes(item))
+    .concat(['text']);
   return italiaBlocks;
 };
 export default getItaliaBlocks;

package/src/config/italiaConfig.js

@@ -1,3 +1,4 @@
+import loadable from '@loadable/component';
 import menuSVG from '@plone/volto/icons/menu.svg';
 import menuAltSVG from '@plone/volto/icons/menu-alt.svg';
 import navSVG from '@plone/volto/icons/nav.svg';
@@ -54,6 +55,7 @@ import faBuildingSVG from 'design-comuni-plone-theme/icons/building.svg';
 import faFileDownloadSVG from 'design-comuni-plone-theme/icons/file-download.svg';
 import faQuestionSVG from 'design-comuni-plone-theme/icons/question-solid.svg';
 import bandoSVG from 'design-comuni-plone-theme/icons/bando.svg';
+import logSVG from 'design-comuni-plone-theme/icons/log.svg';
 
 import applyRichTextConfig from 'design-comuni-plone-theme/config/RichTextEditor/config';
 
@@ -63,6 +65,10 @@ import { schemaListing } from 'design-comuni-plone-theme/components/ItaliaTheme/
 
 import reducers from 'design-comuni-plone-theme/reducers';
 
+const ReleaseLog = loadable(() =>
+  import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
+);
+
 export default function applyConfig(voltoConfig) {
   let config = applyRichTextConfig(voltoConfig);
 
@@ -155,6 +161,15 @@ export default function applyConfig(voltoConfig) {
       great: 1200,
       huge: 1600,
     },
+    controlpanels: [
+      ...(config.settings.controlpanels ?? []),
+      {
+        '@id': '/release-log',
+        group: 'Generali',
+        title: 'Novità ultimi rilasci',
+        id: 'release-log',
+      },
+    ],
     controlPanelsIcons: {
       ...config.settings.controlPanelsIcons,
       'dropdown-menu-settings': menuSVG,
@@ -163,6 +178,7 @@ export default function applyConfig(voltoConfig) {
       'design-plone-settings': contentSVG,
       'bandi-settings': bookSVG,
       'social-settings': shareSVG,
+      'release-log': logSVG,
     },
     defaultBlockType: 'text',
     defaultExcludedFromSearch: {
@@ -306,6 +322,7 @@ export default function applyConfig(voltoConfig) {
   config.settings.nonContentRoutes = config.settings.nonContentRoutes.filter(
     (route) => route !== '/contact-form',
   );
+  config.settings.nonContentRoutes.push('/release-log');
 
   /******************************************************************************
    * VIEWS
@@ -462,10 +479,9 @@ export default function applyConfig(voltoConfig) {
     },
   };
   // Remove Horizontal Menu variation of TOC Block
-  config.blocks.blocksConfig.toc.variations =
-    config.blocks.blocksConfig.toc.variations.filter(
-      (v) => v.id !== 'horizontalMenu',
-    );
+  config.blocks.blocksConfig.toc.variations = config.blocks.blocksConfig.toc.variations.filter(
+    (v) => v.id !== 'horizontalMenu',
+  );
 
   // REDUCERS
   config.addonReducers = {
@@ -484,6 +500,10 @@ export default function applyConfig(voltoConfig) {
       path: ['/login', '/**/login'],
       component: LoginAgid,
     },
+    {
+      path: ['/controlpanel/release-log', '/release-log'],
+      component: ReleaseLog,
+    },
   ];
 
   return config;

package/src/customizations/volto/components/manage/Blocks/Grid/Edit.jsx

@@ -0,0 +1,55 @@
+/**
+ * Customizations:
+ * - make the block full-width and fix overlapping ui for
+ *   some inner blocks like image using custom class
+ */
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { useState } from 'react';
+import ContainerEdit from '@plone/volto/components/manage/Blocks/Container/Edit';
+
+const GridBlockEdit = (props) => {
+  const { data } = props;
+
+  const columnsLength = data?.blocks_layout?.items?.length || 0;
+  const [selectedBlock, setSelectedBlock] = useState(null);
+
+  return (
+    <div
+      className={cx({
+        one: columnsLength === 1,
+        two: columnsLength === 2,
+        three: columnsLength === 3,
+        four: columnsLength >= 4,
+        'grid-items': true,
+        'full-width': true,
+      })}
+      // This is required to enabling a small "in-between" clickable area
+      // for bringing the Grid sidebar alive once you have selected an inner block
+      onClick={(e) => {
+        if (!e.block) setSelectedBlock(null);
+      }}
+      role="presentation"
+    >
+      <div className="gridBlock-container">
+        <ContainerEdit
+          {...props}
+          selectedBlock={selectedBlock}
+          setSelectedBlock={setSelectedBlock}
+          direction="horizontal"
+        />
+      </div>
+    </div>
+  );
+};
+
+GridBlockEdit.propTypes = {
+  block: PropTypes.string.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  pathname: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  manage: PropTypes.bool.isRequired,
+};
+
+export default GridBlockEdit;

package/src/icons/log.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="32" viewBox="0 0 28 32"><g fill="none" fill-rule="evenodd" transform="translate(0 1)"><path stroke="#000" d="M11,0 L7,0 L0,0 L0,30 L19,30 C20.654,30 22,28.654 22,27 L22,3 C22,1.346 20.654,0 19,0 L11,0 Z" transform="translate(3)"/><line x1="13" x2="21" y1="17" y2="17" stroke="#000" stroke-linecap="square"/><g transform="translate(0 22)"><rect width="27" height="8" x=".5" y=".5" fill="#FFF" stroke="#000"/><text fill="#000" font-family="Arial-Black, Arial Black" font-size="6" font-weight="700">
+                    <tspan x="7.552" y="7">LOG</tspan>
+                </text></g><line x1="13" x2="21" y1="7" y2="7" stroke="#000" stroke-linecap="square"/><line x1="13" x2="21" y1="12" y2="12" stroke="#000" stroke-linecap="square"/><polygon fill="#000" points="9 8 7.824 8.618 8.049 7.309 7.098 6.382 8.412 6.191 9 5 9.588 6.191 10.902 6.382 9.951 7.309 10.176 8.618"/><polygon fill="#000" points="9 13 7.824 13.618 8.049 12.309 7.098 11.382 8.412 11.191 9 10 9.588 11.191 10.902 11.382 9.951 12.309 10.176 13.618"/><polygon fill="#000" points="9 18 7.824 18.618 8.049 17.309 7.098 16.382 8.412 16.191 9 15 9.588 16.191 10.902 16.382 9.951 17.309 10.176 18.618"/></g></svg>

package/src/theme/ItaliaTheme/Blocks/_contentInEvidenceTemplate.scss

@@ -44,7 +44,7 @@
   @media (min-width: #{map-get($grid-breakpoints, lg)}) {
     .content-in-evidence:nth-of-type(2n) {
       .order-lg-2 {
-        order: 1;
+        order: 1 !important;
 
         &.offset-lg-1 {
           margin-left: 0;

package/src/theme/ItaliaTheme/Blocks/_gridBlock.scss

@@ -0,0 +1,27 @@
+.block.gridBlock {
+  margin-top: 2rem;
+  .full-width {
+    height: unset !important;
+  }
+  .gridBlock-container {
+    max-width: 1320px;
+    padding: 0 4px;
+    margin: auto;
+    position: relative;
+    .toolbar {
+      left: 16px !important;
+    }
+    .block {
+      .image {
+        .ui.message {
+          padding-left: 8px;
+          padding-right: 8px;
+        }
+        .ui.input {
+          font-size: 14px;
+          margin-left: 16px;
+        }
+      }
+    }
+  }
+}

package/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss

@@ -167,8 +167,8 @@
       }
 
       .icon {
-        width: 3.35rem;
-        height: auto;
+        width: auto;
+        height: 4rem;
         color: $tertiary;
       }
     }

package/src/theme/ItaliaTheme/Components/_cmp-timeline.scss

@@ -26,6 +26,7 @@
 
 .calendar-vertical {
   color: $link-color;
+  clear: both;
 
   &::after {
     display: block;

package/src/theme/ItaliaTheme/Views/_evento.scss

@@ -1,4 +1,8 @@
 body.contenttype-event {
+  .parteciperanno-section {
+    clear: both;
+  }
+
   .supported-by {
     margin-bottom: 1rem;
   }

package/src/theme/ItaliaTheme/_common.scss

@@ -3,6 +3,7 @@
   .text-justify {
     text-align: justify;
   }
+
   button.btn,
   button.rounded-right {
     &:focus {
@@ -30,6 +31,7 @@
 
   a.btn-tertiary {
     color: $tertiary-text !important;
+
     &:focus {
       border-color: $focus-outline-color;
       box-shadow: inset 0 1px 0 $focus-outline-color,
@@ -58,6 +60,7 @@
       }
     }
   }
+
   .btn-primary,
   .btn-secondary,
   .btn-tertiary,
@@ -66,12 +69,15 @@
       fill: $external-link-fill-buttons !important;
     }
   }
+
   .external-link {
     fill: $link-color !important;
+
     &:hover {
       fill: #004080 !important;
     }
   }
+
   .it-footer-small-prints-list .external-link {
     fill: $external-link-fill-subfooter !important;
   }
@@ -80,3 +86,9 @@
 .icon.external-link.icon-xs {
   height: 1rem;
 }
+
+section.it-page-section,
+.last-modified,
+.it-page-subsection {
+  clear: both;
+}

package/src/theme/ItaliaTheme/_main.scss

@@ -143,6 +143,7 @@ iframe {
 
   .draftjs-buttons {
     margin: 0;
+    clear: both;
 
     a {
       display: inline-block;

package/src/theme/_cms-ui.scss

@@ -1,3 +1,4 @@
+@import 'cms-ui_container';
 body.cms-ui {
   .block {
     font-family: $font-family-serif;

package/src/theme/_cms-ui_container.scss

@@ -0,0 +1,87 @@
+$maxWidth: 100%;
+$emSize: 14px;
+$scrollbarWidth: 17px;
+$toolbarWidth: 80px;
+$sidebarWidth: 375px;
+$collapsedWidth: 20px;
+
+$tabletBreakpoint: 768px;
+$largeMonitorBreakpoint: 1200px;
+$computerBreakpoint: 992px;
+
+$largestTabletScreen: ($computerBreakpoint - 1px);
+
+/* Devices */
+$mobileMinimumGutter: 0em;
+$mobileWidth: auto;
+$mobileGutter: 1em;
+
+$tabletMinimumGutter: ($emSize * 1);
+$tabletWidth: $tabletBreakpoint - ($tabletMinimumGutter * 2) - $scrollbarWidth;
+$tabletGutter: auto;
+
+$computerMinimumGutter: ($emSize * 1.5);
+$computerWidth: $computerBreakpoint - ($computerMinimumGutter * 2) -
+  $scrollbarWidth;
+$computerGutter: auto;
+
+$largeMonitorMinimumGutter: ($emSize * 2);
+$largeMonitorWidth: $largeMonitorBreakpoint - ($largeMonitorMinimumGutter * 2) -
+  $scrollbarWidth;
+$largeMonitorGutter: auto;
+
+@mixin contentWidthMedia($width, $gutter, $offset) {
+  .public-ui .container {
+    width: $width !important;
+    margin-right: $gutter !important;
+    margin-left: $gutter !important;
+  }
+  .public-ui .full-width > .px-4.container {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
+
+@mixin contentWidth($offset) {
+  @media only screen and (max-width:  #{map-get($grid-breakpoints, sm)} + $offset) {
+    @include contentWidthMedia($mobileWidth, $mobileGutter, -12px);
+  }
+  @media only screen and (min-width: $tabletBreakpoint + $offset) and (max-width: $largestTabletScreen + $offset) {
+    @include contentWidthMedia($tabletWidth, $tabletGutter, -30px);
+  }
+  @media only screen and (min-width: $computerBreakpoint + $offset) {
+    @include contentWidthMedia($computerWidth, $computerGutter, -30px);
+  }
+
+  @media only screen and (min-width: $largeMonitorBreakpoint + $offset) {
+    @include contentWidthMedia($largeMonitorWidth, $largeMonitorGutter, -30px);
+  }
+}
+
+body.cms-ui:not(.has-toolbar):not(.has-sidebar):not(.has-toolbar-collapsed):not(.has-sidebar-collapsed) {
+  @include contentWidth(0);
+}
+
+body.cms-ui.has-toolbar:not(.has-sidebar):not(.has-sidebar-collapsed) {
+  @include contentWidth($toolbarWidth);
+}
+
+body.cms-ui.has-toolbar.has-sidebar {
+  @include contentWidth($toolbarWidth + $sidebarWidth);
+}
+
+body.cms-ui.has-toolbar.has-sidebar-collapsed {
+  @include contentWidth($toolbarWidth + $collapsedWidth);
+}
+
+body.cms-ui.has-toolbar-collapsed:not(.has-sidebar):not(.has-sidebar-collapsed) {
+  @include contentWidth($collapsedWidth);
+}
+
+body.cms-ui.has-toolbar-collapsed.has-sidebar {
+  @include contentWidth($collapsedWidth + $sidebarWidth);
+}
+
+body.cms-ui.has-toolbar-collapsed.has-sidebar-collapsed {
+  @include contentWidth($collapsedWidth + $collapsedWidth);
+}

package/src/theme/site.scss

@@ -88,6 +88,7 @@
 @import 'ItaliaTheme/Blocks/HTML';
 @import 'ItaliaTheme/Blocks/simpleCardTemplate';
 @import 'ItaliaTheme/Blocks/search';
+@import 'ItaliaTheme/Blocks/gridBlock';
 
 @import 'ItaliaTheme/Views/uo';
 @import 'ItaliaTheme/Views/evento';