Upgrade and adapt the theme tovolto-slider-block 6.0.0 add-on (#288)

Co-authored-by: ichim-david <[email protected]>

Makefile

@@ -22,7 +22,7 @@ RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
 PLONE_VERSION=6.0.8
-VOLTO_VERSION=17.5.0
+VOLTO_VERSION=17.7.0
 
 ADDON_NAME='@kitconcept/volto-light-theme'
 ADDON_PATH='volto-light-theme'

README.md

@@ -118,14 +118,15 @@ It is recommended that your project or policy add-on `package.json` include the
 
 ```json
   "dependencies": {
-    "@eeacms/volto-accordion-block": "9.0.0",
-    "@kitconcept/volto-button-block": "2.1.0",
-    "@kitconcept/volto-dsgvo-banner": "1.3.0",
-    "@kitconcept/volto-heading-block": "2.2.0",
-    "@kitconcept/volto-introduction-block": "1.0.0",
-    "@kitconcept/volto-light-theme": "1.0.0",
-    "@kitconcept/volto-separator-block": "4.0.0",
-    "@kitconcept/volto-highlight-block": "3.0.0",
+    "@eeacms/volto-accordion-block": "^10.4.0",
+    "@kitconcept/volto-button-block": "^2.3.1",
+    "@kitconcept/volto-dsgvo-banner": "^1.3.0",
+    "@kitconcept/volto-heading-block": "^2.4.0",
+    "@kitconcept/volto-highlight-block": "^3.0.0",
+    "@kitconcept/volto-introduction-block": "^1.0.0",
+    "@kitconcept/volto-separator-block": "^4.0.0",
+    "@kitconcept/volto-slider-block": "^6.0.0",
+    "@kitconcept/volto-light-theme": "^2.0.0",
   }
 ```
 

news/288.breaking

@@ -0,0 +1,22 @@
+Upgraded the dependency on `@kitconcept/volto-slider-block` to use `6.0.0`.
+
+This is a drop-in replacement, so no action is required for the existing slider blocks you may have already in your sites.
+However, the CSS classes of the structural slider block elements changed in this version.
+The inner (visible objects) CSS classes remain unchanged.
+If you have customized them in your project, you may have to update them, although the structural class names are rarely customized aside from vertical spacing properties.
+They are mapped 1:1 with the previous ones, following this table correspondence:
+
+| Old className   | New className    |
+| --------------- | ---------------- |
+| slick-slider    | slider-wrapper   |
+| slick-list      | slider-viewport  |
+| slick-track     | slider-container |
+| slick-slide     | slider-slide     |
+| slick-arrow     | slider-button    |
+| slick-prev      | slider-button-prev |
+| slick-next      | slider-slide-next  |
+| slick-next      | slider-slide-next  |
+| slick-dots      | slider-dots      |
+| slick-dot       | slider-dot       |
+
+For more information, please check the https://github.com/kitconcept/volto-slider-block/blob/main/README.md

package.json

@@ -71,7 +71,7 @@
     "@kitconcept/volto-highlight-block": "^3.0.0",
     "@kitconcept/volto-introduction-block": "^1.0.0",
     "@kitconcept/volto-separator-block": "^4.0.0",
-    "@kitconcept/volto-slider-block": "5.1.1",
-    "@plone/volto": "^17.5.0"
+    "@kitconcept/volto-slider-block": "^6.0.0",
+    "@plone/volto": "^17.6.1"
   }
 }

src/theme/_bgcolor-blocks-layout.scss

@@ -51,6 +51,19 @@
   }
 }
 
+// Slider
+#page-document .blocks-group-wrapper.grey:has(.block.slider:first-child) {
+  padding-top: 0;
+  padding-bottom: 0px; // Adjust for the padding from the slider itself
+}
+
+#page-document .blocks-group-wrapper.grey .block.slider,
+.block-editor-slider.has--backgroundColor--grey {
+  .slider-dot:not(.slider-dot--selected)::after {
+    background: #fff;
+  }
+}
+
 // Edit mode adjustments
 .block-editor-gridBlock.has--backgroundColor--grey .block h2.headline {
   padding-top: $spacing-xlarge;

src/theme/blocks/_slider.scss

@@ -1,8 +1,4 @@
 // Slider Block
-:root {
-  --slider-block-edit-width-adjustment: 40px;
-}
-
 $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
 
 .block.slider {
@@ -11,84 +7,33 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
     padding-bottom: 0;
   }
 
-  .highlight-image-wrapper img {
-    // Override Volto's Image Component inline style aspect ratio.
-    aspect-ratio: $sliderImagesAspectRatio !important;
+  .slider-viewport {
+    margin-bottom: 0;
   }
 
-  .teaser-item,
-  .grid-teaser-item {
-    flex-direction: column;
-  }
-  .teaser-item {
-    padding-bottom: $spacing-xlarge;
+  .slider-dots {
+    padding-bottom: 40px;
   }
 
-  .slide-wrapper:not(.empty-slide) {
-    padding-bottom: $spacing-xlarge;
-  }
+  .highlight-image-wrapper {
+    display: flex; // Small gap was appearing between the wrapper and the image (??)
 
-  .slick-arrow {
-    width: 50px;
-    // Equal to the space we give at the bottom to place the buttons
-    height: calc(100% - $spacing-xlarge);
-    background-color: rgba(0, 0, 0, 0.15);
-    color: $white;
-    // border: 2px solid red;
-    opacity: 0;
-    transition: opacity 0.2s ease-in;
-    &:hover {
-      opacity: 1;
+    img {
+      // Override Volto's Image Component inline style aspect ratio.
+      aspect-ratio: $sliderImagesAspectRatio !important;
     }
   }
 
-  .slick-next,
-  .slick-prev {
-    top: initial;
-  }
-
-  .slick-next {
-    right: 0;
-    // Equal to the space we give at the bottom to place the buttons
-    bottom: $spacing-xlarge;
-    @media only screen and (max-width: $computer-width) {
-      display: none !important;
-    }
+  .teaser-item,
+  .grid-teaser-item {
+    flex-direction: column;
   }
-
-  .slick-prev {
-    z-index: 9;
-    left: 0;
-    @media only screen and (max-width: $computer-width) {
-      display: none !important;
-    }
+  .teaser-item {
+    padding-bottom: $spacing-medium;
   }
 
-  .slick-dots {
-    bottom: 34px;
-    line-height: 0;
-
-    li,
-    button {
-      width: 46px;
-      height: 6px;
-      padding: 0;
-      background-color: $secondary-grey;
-    }
-
-    li.slick-active button {
-      background-color: $black;
-    }
-
-    li {
-      margin-right: 13px;
-      margin-left: 0;
-    }
-
-    button:before {
-      display: none;
-      content: '';
-    }
+  .slide-wrapper:not(.empty-slide) {
+    padding-bottom: $spacing-xlarge;
   }
 
   .teaser-item.top {

yarn.lock

@@ -1851,8 +1851,8 @@ __metadata:
     "@kitconcept/volto-highlight-block": ^3.0.0
     "@kitconcept/volto-introduction-block": ^1.0.0
     "@kitconcept/volto-separator-block": ^4.0.0
-    "@kitconcept/volto-slider-block": 5.1.1
-    "@plone/volto": ^17.5.0
+    "@kitconcept/volto-slider-block": ^6.0.0
+    "@plone/volto": ^17.6.1
   languageName: unknown
   linkType: soft