design-comuni-plone-theme 11.29.2 → 12.0.0

package/src/theme/ItaliaTheme/_home.scss

@@ -6,10 +6,6 @@ body.public-ui.contenttype-lrf {
   }
 }
 
-.sidebar-container-enter-done {
-  z-index: 150000 !important;
-}
-
 body.subsite.subsite-root {
   &,
   .public-ui {

package/src/theme/ItaliaTheme/_main.scss

@@ -80,20 +80,27 @@ iframe {
 
 .public-ui,
 .cms-ui {
-  blockquote {
-    position: relative;
-    margin: 1.5rem 2rem;
-    font-family: $font-family-serif;
+  blockquote,
+  .blockquote {
+    display: flow-root; //serve per quando i blockquote sono affiancati alle immagini allineate a dx o sx
+    border-color: $primary !important;
+
+    ul:first-child,
+    ol:first-child {
+      margin-top: 0;
+    }
 
-    &:before {
-      position: absolute;
-      top: -1.8rem;
-      left: -2rem;
-      display: block;
-      height: 0;
-      color: $neutral-2-b2;
-      content: '“';
-      font-size: 400%;
+    ul:last-child,
+    ol:last-child,
+    p:last-child,
+    p:last-of-type {
+      margin-bottom: 0;
+    }
+
+    &.dark {
+      a {
+        color: $primary-text;
+      }
     }
   }
 
@@ -109,96 +116,83 @@ iframe {
     }
   }
 
-  .callout-bg {
-    padding: 1.25rem;
-    margin: 1.25rem 0;
-    background-color: $primary-c1;
-
-    p,
-    .public-DraftStyleDefault-block {
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-    }
+  .text-larger {
+    //.text-larger: stile applicabile da editor Slate
+    font-size: 1.75em;
   }
+}
 
-  .draftjs-text-smaller {
-    font-size: 0.75em;
+//slate LINK
+/*
+  Safari rendering issue workaround - B#60364
+  Safari rendering fix, icons and fonts coming late means shenanigans for Safari rendering, as
+  Safari is lazy and slow in loading fonts and icons dynamically.
+  Problem: Safari (tested on Safari 17.6) sometimes fails to calculate the layout correctly
+  when dealing with dynamic content such as lazy-loaded icons or fonts, combined with
+  `display: inline-block`. This can result in improperly positioned elements
+  until the page is re-rendered or refocused.
+
+  Solution: To fix this issue:
+  1. Replace `display: inline-block` with `display: inline-flex`. This ensures Safari
+      handles the box model and inline context properly, especially when the element's
+      size or alignment depends on dynamic content.
+  2. Add `position: relative;` to force a recalculation of layout, resolving rendering quirks.
+
+  Background: Safari's WebKit engine has known issues with `inline-block` combined
+  with delayed content rendering, such as lazy-loaded icons. Switching to `inline-flex`
+  better aligns with modern CSS rendering engines, while `position: relative;`
+  ensures the layout is recalculated.
+
+  References:
+  - CSS-Tricks: What Forces Layout or Reflow: https://css-tricks.com/what-forces-layout-reflow/
+  - WebKit Bug Reports on `inline-block` rendering issues with dynamic content.
+  - Testing and observations on Safari 17.6 behavior with lazy-loaded assets.
+*/
+@supports (-webkit-appearance: none) {
+  a.with-external-link-icon {
+    display: inline-flex; /* Evita problemi con inline-block */
+    position: relative; /* Forza Safari a calcolare il layout reflow correttamente */
   }
+}
+// .inline-link {
+//   margin-left: 0.5rem;
+//   margin-right: 0.5rem;
+// }
 
-  .draftjs-text-larger {
-    font-size: 1.75em;
-  }
+svg.external-link {
+  fill: currentColor;
+}
+
+.slate-editor-link {
+  clear: both;
 
-  .draftjs-buttons {
+  &.btn {
+    display: inline-block;
+    padding: 12px 24px;
+    border-radius: $btn-border-radius;
     margin: 0;
-    clear: both;
+    font-weight: 600;
+    text-align: center;
+    text-decoration: none;
+
+    &:hover,
+    &:active {
+      font-weight: 600;
+    }
 
-    a {
-      display: inline-block;
-      padding: 1em 2em;
-      border-radius: $btn-border-radius;
-      margin: 0.5em 1em 0.5em 0;
+    &.btn-primary {
       background-color: $primary;
       color: $primary-text;
-      font-weight: 700;
-      text-align: center;
-      text-decoration: none;
 
       &:hover,
       &:active {
         background-color: darken($primary, 8);
         color: $primary-text;
-        font-weight: 700;
       }
       &.link-anchorlink-theme {
         color: $primary-text !important;
       }
     }
-    /*
-      Safari rendering issue workaround - B#60364
-      Safari rendering fix, icons and fonts coming late means shenanigans for Safari rendering, as
-      Safari is lazy and slow in loading fonts and icons dynamically.
-      Problem: Safari (tested on Safari 17.6) sometimes fails to calculate the layout correctly
-      when dealing with dynamic content such as lazy-loaded icons or fonts, combined with
-      `display: inline-block`. This can result in improperly positioned elements
-      until the page is re-rendered or refocused.
-
-      Solution: To fix this issue:
-      1. Replace `display: inline-block` with `display: inline-flex`. This ensures Safari
-          handles the box model and inline context properly, especially when the element's
-          size or alignment depends on dynamic content.
-      2. Add `position: relative;` to force a recalculation of layout, resolving rendering quirks.
-
-      Background: Safari's WebKit engine has known issues with `inline-block` combined
-      with delayed content rendering, such as lazy-loaded icons. Switching to `inline-flex`
-      better aligns with modern CSS rendering engines, while `position: relative;`
-      ensures the layout is recalculated.
-
-      References:
-      - CSS-Tricks: What Forces Layout or Reflow: https://css-tricks.com/what-forces-layout-reflow/
-      - WebKit Bug Reports on `inline-block` rendering issues with dynamic content.
-      - Testing and observations on Safari 17.6 behavior with lazy-loaded assets.
-    */
-    @supports (-webkit-appearance: none) {
-      a {
-        display: inline-flex; /* Evita problemi con inline-block */
-        position: relative; /* Forza Safari a calcolare il layout reflow correttamente */
-      }
-    }
-  }
-
-  div[class^='draftJsToolbar__toolbar__'] {
-    line-height: 1rem;
-
-    .icon {
-      font-size: 1rem;
-    }
-
-    .ui.input > input {
-      height: auto;
-      font-size: 0.8rem;
-    }
   }
 }
 

package/src/theme/_cms-ui.scss

@@ -18,7 +18,9 @@ body.cms-ui {
   }
 
   .block {
-    font-family: $font-family-serif;
+    font-family: $font-family-sans-serif;
+    font-weight: $font-weight-base;
+    line-height: $line-height-base;
 
     %heading {
       margin-top: 0; /* 1*/
@@ -64,21 +66,6 @@ body.cms-ui {
 
     @import 'bootstrap-italia/src/scss/custom/type'; //to apply styles for headers on different screen sizes
 
-    // Placeholder block title
-    .title {
-      .public-DraftEditorPlaceholder-inner {
-        font-family: $font-family-sans-serif;
-      }
-    }
-
-    &.title {
-      .public-DraftEditorPlaceholder-inner {
-        font-size: 2.66rem;
-        font-weight: bold;
-        line-height: 1.25;
-      }
-    }
-
     //align
     .text-center {
       text-align: center;
@@ -143,15 +130,34 @@ body.cms-ui {
   &.contenttype-argomento,
   &.contenttype-pagina-argomento,
   &.contenttype-cartellamodulistica {
-    &:not(.section-add) {
-      .block {
-        font-family: $font-family-sans-serif;
-        font-weight: 300;
-        line-height: 1.555;
+    .block {
+      font-family: $font-family-sans-serif;
+      font-weight: 300;
+      line-height: 1.555;
+    }
+  }
+
+  .simple-text-editor-widget {
+    .simple-text-input {
+      display: inline-block;
+      min-width: 1px;
+
+      &:empty:before {
+        display: block; /* For Firefox */
+        content: attr(placeholder);
+        font-weight: inherit;
+        opacity: 0.333;
+        pointer-events: none;
       }
     }
   }
 
+  .detached-slate-editor {
+    p:not(:last-child) {
+      margin-bottom: 1rem !important;
+    }
+  }
+
   .blocks-widget-container {
     .block.table .toolbar {
       top: -3.34rem;
@@ -209,8 +215,10 @@ body.cms-ui {
       }
 
       input#field-link {
+        height: auto;
         height: auto;
         color: #444;
+        font-size: 0.7rem;
         font-weight: normal;
       }
 
@@ -290,14 +298,6 @@ body.cms-ui {
     }
   }
 
-  .menu-configuration-widget {
-    .menu-blocks-container {
-      .DraftEditor-editorContainer .public-DraftEditor-content {
-        min-height: 19px;
-      }
-    }
-  }
-
   //cookie banner icons
   // replaced icon code with left and right as they actually render correctly
   // and rotated the icon
@@ -319,6 +319,10 @@ body.cms-ui {
     }
   }
 
+  .sidebar-container-enter-done {
+    z-index: 150000 !important;
+  }
+
   .sidebar-container .object-listing,
   .icon-align-name {
     svg.icon {
@@ -408,6 +412,11 @@ body.cms-ui {
         }
       }
     }
+
+    .slate-editor ul li {
+      display: list-item;
+      padding: 0;
+    }
   }
 
   .icon-align-name {
@@ -446,20 +455,34 @@ body.cms-ui {
       background-color: $tertiary;
     }
 
-    // Alert block
-    .button.info,
-    .button.info.active {
-      background-color: $alert-info;
+    .button.success,
+    .button.success.active {
+      background-color: $success;
     }
 
     .button.warning,
-    .button.warning.active {
-      background-color: $alert-warning;
+    .button.success.warning {
+      background-color: $warning;
     }
 
     .button.danger,
     .button.danger.active {
-      background-color: $alert-danger;
+      background-color: $danger;
+    }
+
+    .button.callout_default,
+    .button.callout_default.active {
+      background-color: $secondary;
+    }
+
+    .button.callout_note,
+    .button.callout_note.active {
+      background-color: $primary;
+    }
+
+    .button.info,
+    .button.info.active {
+      background-color: $info;
     }
   }
 
@@ -475,48 +498,16 @@ body.cms-ui {
     }
   }
 
-  /*.DraftEditor-root {
-    font-family: $font-family-serif;
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-family: $font-family-sans-serif;
-    }
-  }*/
-
-  //stili per l'editor di testo dei ct con i campi
-  .DraftEditor-root {
-    .public-DraftStyleDefault-block {
-      margin-bottom: 1rem;
-    }
-
-    li {
-      .public-DraftStyleDefault-block {
-        margin-bottom: unset;
-      }
-    }
-  }
-
-  .block.text {
-    .DraftEditor-root {
-      .public-DraftStyleDefault-block {
-        margin-bottom: unset;
+  .field-wrapper-icon {
+    .icon-container.italia-icon {
+      svg.icon {
+        height: 1.5em;
       }
     }
   }
 
   // z-index necessario su Volto 17 finché non passiamo ad usare slate
   .block {
-    .DraftEditor-root {
-      .DraftEditor-editorContainer,
-      .public-DraftEditorPlaceholder-root {
-        z-index: 0;
-      }
-    }
-
     &.image {
       .block.align {
         &.left,
@@ -537,18 +528,6 @@ body.cms-ui {
     }
   }
 
-  .footer-configuration-widget {
-    .DraftEditor-editorContainer {
-      a.link-anchorlink-theme {
-        color: #06c;
-
-        &:hover {
-          color: darken(#06c, 20);
-        }
-      }
-    }
-  }
-
   &.section-controlpanel {
     .grid > .row {
       // HIDE TAXONOMIES CONTROLPANEL UNTIL #62343 IS DONE
@@ -603,10 +582,6 @@ body.cms-ui {
 
   .block-editor-title,
   .block-editor-description {
-    .DraftEditor-root {
-      padding: 0 1.333em;
-    }
-
     & + [class^='block-editor'] {
       margin-top: 2.8rem;
     }
@@ -628,78 +603,6 @@ body.cms-ui {
 
   /////
 
-  .draftJsToolbarDropdown {
-    position: relative;
-
-    .draftJsToolbarDropdown-toggle {
-      display: flex;
-      width: 42px;
-      align-items: center;
-      justify-content: space-between;
-
-      .caret {
-        display: inline-block;
-        width: 0;
-        height: 0;
-
-        border: 5px solid transparent;
-
-        &.down {
-          border-top-color: #888;
-          margin-top: 5px;
-        }
-
-        &.up {
-          border-bottom-color: #888;
-          margin-bottom: 5px;
-        }
-      }
-    }
-
-    ul.draftJsToolbarDropdown-optionswrapper {
-      position: absolute;
-      top: 35px;
-      left: 50%;
-      padding: 0;
-      margin: 0;
-      background-color: #fff;
-      border-bottom-left-radius: 3px;
-      border-bottom-right-radius: 3px;
-      box-shadow:
-        0 0 8px rgba(0, 0, 0, 0.1),
-        0 2px 4px rgba(0, 0, 0, 0.05);
-      list-style-type: none;
-      transform: translateX(-50%);
-
-      &.hide {
-        display: none;
-      }
-
-      .draftJsToolbarDropdown-option {
-        padding: 0.5rem;
-        color: $neutral-2-b5;
-
-        svg {
-          fill: $neutral-2-b5 !important;
-        }
-
-        > * {
-          display: block;
-        }
-
-        button {
-          width: 100%;
-          height: auto;
-
-          > * {
-            margin: 0;
-            color: $neutral-2-b5;
-          }
-        }
-      }
-    }
-  }
-
   .column.color-chooser {
     padding-top: 0.5em;
     padding-bottom: 0.5em;

package/src/theme/_mixins.scss

@@ -5,3 +5,16 @@
 @mixin margin-size($key, $value) {
   #{$key}: calc($value / 18) + em;
 }
+
+@mixin blocks-with-bg-edit-buttons {
+  > .ui.basic.button.delete-button {
+    padding: 0.35rem;
+    text-align: center;
+    border-radius: 100%;
+    top: -0.25rem;
+
+    &:not(:hover):not(:focus):not(:focus-within) {
+      color: #fff !important;
+    }
+  }
+}

package/src/theme/bootstrap-override/_bootstrap-italia-site.scss

@@ -111,6 +111,7 @@
   @import 'bootstrap-italia/src/scss/custom/form-select';
   @import './bootstrap-italia/form-select';
   @import 'bootstrap-italia/src/scss/custom/form-transfer';
+  @import './bootstrap-italia/forms';
   @import 'bootstrap-italia/src/scss/custom/dropdown';
   @import 'bootstrap-italia/src/scss/custom/pager';
   @import 'bootstrap-italia/src/scss/custom/tab';

package/src/theme/bootstrap-override/bootstrap-italia/_footer.scss

@@ -25,7 +25,7 @@
         }
 
         .icon {
-          width: 75px;
+          width: auto;
           height: 75px;
           margin-right: 27px;
         }

package/src/theme/bootstrap-override/bootstrap-italia/_forms.scss

@@ -0,0 +1,7 @@
+@media print {
+  .public-ui {
+    .form-group {
+      margin-bottom: 1rem;
+    }
+  }
+}

package/src/theme/bootstrap-override/bootstrap-italia/_headercenter.scss

@@ -1,8 +1,13 @@
-//mobile
 .it-header-center-wrapper {
-  // height: $dvt-header-center-max-height;
-
   .it-header-center-content-wrapper {
+    .it-brand-wrapper {
+      a {
+        .icon {
+          width: auto;
+        }
+      }
+    }
+
     //right zone
     .it-right-zone {
       .it-socials {

package/src/theme/extras/_forms.scss

@@ -12,7 +12,7 @@ $sidebarFormBg: #fafafa;
     .ui.input input[type='text'],
     .ui.input input[type='url'],
     textarea,
-    .DraftEditor-root {
+    .slate-editor {
       padding-right: 10px;
       padding-left: 10px;
       margin-top: 0.5rem;
@@ -40,20 +40,8 @@ $sidebarFormBg: #fafafa;
       padding: 10px;
     }
 
-    .DraftEditor-editorContainer {
-      .public-DraftEditor-content {
-        min-height: 60px;
-      }
-    }
-
     .blocks-widget-container {
-      .DraftEditor-editorContainer {
-        .public-DraftEditor-content {
-          min-height: unset;
-        }
-      }
-
-      .DraftEditor-root {
+      .slate-editor {
         border-bottom: none;
         background-color: transparent;
       }

package/src/theme/site.scss

@@ -90,6 +90,7 @@
 @import 'ItaliaTheme/Blocks/simpleCardTemplate';
 @import 'ItaliaTheme/Blocks/search';
 @import 'ItaliaTheme/Blocks/gridBlock';
+@import 'ItaliaTheme/Blocks/callout';
 
 @import 'ItaliaTheme/Views/uo';
 @import 'ItaliaTheme/Views/evento';
@@ -122,7 +123,6 @@
 @import 'ItaliaTheme/Widgets/luoghiCorrelatiEventoWidget';
 @import 'ItaliaTheme/Components/megamenu';
 @import 'ItaliaTheme/Components/sharing';
-@import 'ItaliaTheme/Components/logo';
 @import 'ItaliaTheme/Components/mobileMenu';
 @import 'ItaliaTheme/Components/relatedItemInEvidence';
 @import 'ItaliaTheme/Components/pageLoader';

package/test-setup-config.js

@@ -10,6 +10,30 @@
 import '@plone/volto/config';
 import config from '@plone/volto/registry';
 import applyItaliaConfig from './src';
+import TextBlockView from '@plone/volto-slate/blocks/Text/TextBlockView';
+import TextBlockEdit from '@plone/volto-slate/blocks/Text/TextBlockEdit';
+import TextBlockSchema from '@plone/volto-slate/blocks/Text/TextBlockSchema';
+
+//slate config need to exists for italiaConfig
+config.set('settings', {
+  ...config.settings,
+  slate: {
+    elements: {
+      default: ({ attributes, children }) => <p {...attributes}>{children}</p>,
+    },
+    leafs: {},
+    persistentHelpers: [],
+    contextToolbarButtons: [],
+    textblockExtensions: [],
+    extensions: [],
+    elementToolbarButtons: {},
+    buttons: {},
+    toolbarButtons: [],
+    expandedToolbarButtons: [],
+    htmlTagsToSlate: {},
+    topLevelTargetElements: [],
+  },
+});
 
 applyItaliaConfig(config);
 
@@ -83,3 +107,37 @@ config.set('experimental', {
     enabled: false,
   },
 });
+
+const slateBlockConfig = {
+  id: 'slate',
+  view: TextBlockView,
+  edit: TextBlockEdit,
+  schema: TextBlockSchema,
+  blockHasValue: (data) => {
+    // TODO: this should be handled better
+    return data && !!data.plaintext?.trim();
+  },
+  tocEntry: (block = {}) => {
+    const { value, override_toc, entry_text, level, plaintext } = block;
+    const type = value?.[0]?.type;
+    return override_toc && level
+      ? [parseInt(level.slice(1)), entry_text]
+      : config.settings.slate.topLevelTargetElements.includes(type)
+      ? [parseInt(type.slice(1)), plaintext]
+      : null;
+  },
+};
+config.set('blocks', {
+  ...config.blocks,
+  blocksConfig: {
+    ...(config.blocks.blocksConfig ?? {}),
+    slate: slateBlockConfig,
+    gridBlock: {
+      ...(config.blocks.blocksConfig?.gridBlock ?? {}),
+      blocksConfig: {
+        ...(config.blocks.blocksConfig?.gridBlock?.blocksConfig ?? {}),
+        slate: slateBlockConfig,
+      },
+    },
+  },
+});