Updates to related items css and js reload logic on customizer.

tainacan-blocksy/js/scripts.js

@@ -1,6 +1,8 @@
-/* Handles updating Media Items component when reloading page from customizer */
+// Scripts that run on document load need to be manually refreshed when inside the customizer
 if (window.ctEvents && window.ctEvents.default) {
     window.ctEvents.default.on('blocksy:frontend:init', () => {
+
+        /* Handles updating Media Items component */
         if (tainacan_plugin?.classes?.TainacanMediaGallery && tainacan_plugin?.tainacan_media_components) {
             (Object.values(tainacan_plugin.tainacan_media_components) || []).forEach((component) => {
                 new tainacan_plugin.classes.TainacanMediaGallery(
@@ -10,6 +12,11 @@ if (window.ctEvents && window.ctEvents.default) {
                 );
             });
         }
+
+        /* Handles reloading the Items list */
         document.dispatchEvent(new Event('TainacanReloadItemsListComponent'));
+
+        /* Handles updating Items carousel */
+        document.dispatchEvent(new Event('TainacanReloadCarouselItemsListBlock'));
     });
 }

tainacan-blocksy/sass/tainacan-item-single.scss

@@ -22,32 +22,37 @@
         .tainacan-item-section--gallery { grid-area: document }
         .tainacan-item-section--attachments { grid-area: attachments }
         .tainacan-item-section--metadata { grid-area: metadata }
+        .tainacan-item-section--items-related-to-this { grid-area: related }
         
         &.tainacan-item-single--layout-type-dam {
             grid-template-areas:
                 'document'
                 'attachments'
-                'metadata';
+                'metadata'
+                'related';
             grid-template-columns: 100%;
         }
         &.tainacan-item-single--layout-type-dma {
             grid-template-areas:
                 'document'
                 'metadata'
-                'attachments';
+                'attachments'
+                'related';
             grid-template-columns: 100%;
         }
         &.tainacan-item-single--layout-type-mda {
             grid-template-areas:
                 'metadata'
                 'document'
-                'attachments';
+                'attachments'
+                'related';
             grid-template-columns: 100%;
         }
         &.tainacan-item-single--layout-type-mg {
             grid-template-areas:
                 'metadata document' 
                 'metadata attachments'
+                'metadata related'
                 'metadata .';
             grid-template-columns: 60% 40%;
 
@@ -55,7 +60,8 @@
                 grid-template-areas:
                 'metadata'
                 'document'
-                'attachments';
+                'attachments'
+                'related';
                 grid-template-columns: 100% !important;
             }
         }
@@ -63,6 +69,7 @@
             grid-template-areas:
                 'document metadata' 
                 'attachments metadata'
+                'related metadata'
                 '. metadata';
             grid-template-columns: 60% 40%;
 
@@ -70,13 +77,15 @@
                 grid-template-areas:
                 'document'
                 'attachments'
-                'metadata';
+                'metadata'
+                'related';
                 grid-template-columns: 100% !important;
             }
         }
         &.tainacan-item-single--layout-type-gtm {
             grid-template-areas:
-                'metadata';
+                'metadata'
+                'related';
             grid-template-columns: 100%;
         }
 

tainacan-blocksy/style.css

@@ -383,47 +383,51 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
   grid-area: metadata;
 }
 
+.tainacan-item-single-page .tainacan-item-single .tainacan-item-section--items-related-to-this {
+  grid-area: related;
+}
+
 .tainacan-item-single-page .tainacan-item-single.tainacan-item-single--layout-type-dam {
-  grid-template-areas: 'document' 'attachments' 'metadata';
+  grid-template-areas: 'document' 'attachments' 'metadata' 'related';
   grid-template-columns: 100%;
 }
 
 .tainacan-item-single-page .tainacan-item-single.tainacan-item-single--layout-type-dma {
-  grid-template-areas: 'document' 'metadata' 'attachments';
+  grid-template-areas: 'document' 'metadata' 'attachments' 'related';
   grid-template-columns: 100%;
 }
 
 .tainacan-item-single-page .tainacan-item-single.tainacan-item-single--layout-type-mda {
-  grid-template-areas: 'metadata' 'document' 'attachments';
+  grid-template-areas: 'metadata' 'document' 'attachments' 'related';
   grid-template-columns: 100%;
 }
 
 .tainacan-item-single-page .tainacan-item-single.tainacan-item-single--layout-type-mg {
-  grid-template-areas: 'metadata document'  'metadata attachments' 'metadata .';
+  grid-template-areas: 'metadata document'  'metadata attachments' 'metadata related' 'metadata .';
   grid-template-columns: 60% 40%;
 }
 
 @media only screen and (max-width: 960px) {
   .tainacan-item-single-page .tainacan-item-single.tainacan-item-single--layout-type-mg {
-    grid-template-areas: 'metadata' 'document' 'attachments';
+    grid-template-areas: 'metadata' 'document' 'attachments' 'related';
     grid-template-columns: 100% !important;
   }
 }
 
 .tainacan-item-single-page .tainacan-item-single.tainacan-item-single--layout-type-gm {
-  grid-template-areas: 'document metadata'  'attachments metadata' '. metadata';
+  grid-template-areas: 'document metadata'  'attachments metadata' 'related metadata' '. metadata';
   grid-template-columns: 60% 40%;
 }
 
 @media only screen and (max-width: 960px) {
   .tainacan-item-single-page .tainacan-item-single.tainacan-item-single--layout-type-gm {
-    grid-template-areas: 'document' 'attachments' 'metadata';
+    grid-template-areas: 'document' 'attachments' 'metadata' 'related';
     grid-template-columns: 100% !important;
   }
 }
 
 .tainacan-item-single-page .tainacan-item-single.tainacan-item-single--layout-type-gtm {
-  grid-template-areas: 'metadata';
+  grid-template-areas: 'metadata' 'related';
   grid-template-columns: 100%;
 }