Merge branch 'develop' into feature/573

package-lock.json

@@ -2406,11 +2406,11 @@
       }
     },
     "buefy": {
-      "version": "0.9.7",
+      "version": "0.9.10",
-      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.7.tgz",
+      "resolved": "https://registry.npmjs.org/buefy/-/buefy-0.9.10.tgz",
-      "integrity": "sha512-Fli0ZjNDgtFtHm0LItWmfhNJ1oLjDwPzUWccvwXXoo2mADXaH8JQxyhY+drUuUV5/GMu5PtwqQSqPgZy942VZg==",
+      "integrity": "sha512-xXEoy/NTgBNiIfBTCdHi2Vu5SJJdB046py6ekUvYuUgYwRvulySZksdecVNNWdfEVU8iD4esZaRbTLwCegFcVQ==",
       "requires": {
-        "bulma": "0.9.2"
+        "bulma": "0.9.3"
       }
     },
     "buffer": {
@@ -2449,9 +2449,9 @@
       "dev": true
     },
     "bulma": {
-      "version": "0.9.2",
+      "version": "0.9.3",
-      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.2.tgz",
+      "resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.3.tgz",
-      "integrity": "sha512-e14EF+3VSZ488yL/lJH0tR8mFWiEQVCMi/BQUMi2TGMBOk+zrDg4wryuwm/+dRSHJw0gMawp2tsW7X1JYUCE3A=="
+      "integrity": "sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g=="
     },
     "bytes": {
       "version": "3.0.0",
@@ -7532,9 +7532,9 @@
       "dev": true
     },
     "path-parse": {
-      "version": "1.0.6",
+      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "path-to-regexp": {
       "version": "0.1.7",
@@ -10704,9 +10704,9 @@
       }
     },
     "url-parse": {
-      "version": "1.5.1",
+      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
-      "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==",
+      "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
       "dev": true,
       "requires": {
         "querystringify": "^2.1.1",

package.json

@@ -11,8 +11,8 @@
     "apexcharts": "^3.26.3",
     "axios": "^0.21.1",
     "blurhash": "^1.1.3",
-    "buefy": "^0.9.7",
+    "buefy": "^0.9.10",
-    "bulma": "^0.9.2",
+    "bulma": "^0.9.3",
     "conditioner-core": "^2.3.3",
     "countup.js": "^2.0.7",
     "css-vars-ponyfill": "^2.3.1",

src/assets/css/media-component.css

@@ -652,7 +652,7 @@ a.pswp__share--download:hover {
     display: flex;
     align-items: center;
     margin: 0; }
-    .tainacan-media-component__swiper-main ul.swiper-wrapper[data-pswp-uid] li.swiper-slide img {
+    .tainacan-media-component__swiper-main ul.swiper-wrapper[data-pswp-uid]:not([data-pswp-uid='']) li.swiper-slide img {
       cursor: zoom-in !important; }
   .tainacan-media-component__swiper-main li.swiper-slide {
     height: 100%;
@@ -663,7 +663,9 @@ a.pswp__share--download:hover {
     .tainacan-media-component__swiper-main li.swiper-slide:not(.swiper-slide-active) {
       opacity: 0.75; }
     .tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata {
-      text-align: center; }
+      text-align: center;
+      font-size: 0.875em;
+      margin-bottom: 1em; }
       .tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata.hide-name .swiper-slide-metadata__name {
         display: none;
         visibility: hidden; }
@@ -758,13 +760,14 @@ a.pswp__share--download:hover {
   .tainacan-media-component__swiper-thumbs ul.swiper-wrapper {
     max-width: calc(100% - var(--swiper-navigation-size, 44px) - var(--swiper-navigation-size, 44px));
     margin: 0 var(--swiper-navigation-size, 44px); }
+    .tainacan-media-component__swiper-thumbs ul.swiper-wrapper[data-pswp-uid]:not([data-pswp-uid='']) li.swiper-slide {
+      cursor: zoom-in; }
   .tainacan-media-component__swiper-thumbs li.swiper-slide {
     text-align: center;
     vertical-align: top;
     word-break: break-all;
     font-size: 0.875em;
-    max-width: calc(var(--tainacan-media-thumbs-carousel-item-size, 136px) + 17px);
+    max-width: calc(var(--tainacan-media-thumbs-carousel-item-size, 136px) + 17px); }
-    cursor: zoom-in; }
     @media only screen and (max-width: 380px) {
       .tainacan-media-component__swiper-thumbs li.swiper-slide {
         margin: 10px 0; } }

src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css

@@ -119,7 +119,7 @@
       margin: 0 50px; }
       .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a > span,
       .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a:hover > span {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         font-weight: bold;
         text-decoration: none;
         padding: 8px 12px;
@@ -129,7 +129,9 @@
       .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a > img {
         width: 100%;
         height: auto; }
+      .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a,
       .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a:hover {
+        color: inherit;
         text-decoration: none; }
       .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid a {
         width: 100%;
@@ -163,7 +165,7 @@
     width: 100%;
     font-size: 0.875em;
     font-style: italic;
-    color: var(--tainacan-block-gray4, #555758);
+    color: inherit;
     text-align: center;
     margin: 0 auto;
     padding: 8px 2px 2px 2px; }
@@ -235,7 +237,7 @@
     .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
       position: relative;
       display: block;
-      margin: 16px 32px 16px 0px;
+      margin: 8px 32px 8px 0px;
       width: calc(16.666% - 32px);
       min-width: calc(16.666% - 32px);
       scroll-snap-align: start;
@@ -245,7 +247,7 @@
         width: calc(25% - 16px);
         min-width: calc(25% - 16px); }
       .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         font-weight: bold;
         line-height: normal; }
       .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item img {
@@ -255,7 +257,7 @@
         display: block;
         width: 100%; }
       .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
       .wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item button {
         position: absolute !important;
@@ -444,4 +446,10 @@
         width: calc(100% - 32px);
         min-width: calc(100% - 32px); } }
 
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-collections-list .swiper-container a > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-collections-list .swiper-container a:hover > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-collections-list li.collection-list-item a > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-collections-list li.collection-list-item a:hover > span {
+  color: var(--tainacan-block-gray5, #454647); }
+
 /*# sourceMappingURL=tainacan-gutenberg-block-carousel-collections-list.css.map */

src/assets/css/tainacan-gutenberg-block-carousel-items-list.css

@@ -126,7 +126,7 @@
       margin: 0 50px; }
       .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a > span,
       .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a:hover > span {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         font-weight: bold;
         text-decoration: none;
         padding: 8px 12px;
@@ -136,13 +136,16 @@
       .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a > img {
         width: 100%;
         height: auto; }
+      .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a,
       .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a:hover {
+        color: inherit;
         text-decoration: none; }
   .wp-block-tainacan-carousel-items-list .preview-warning {
     width: 100%;
     font-size: 0.875em;
     font-style: italic;
-    color: var(--tainacan-block-gray4, #555758);
+    color: inherit;
+    opacity: 0.5;
     text-align: center;
     margin: 0 auto;
     padding: 8px 2px 2px 2px; }
@@ -212,13 +215,13 @@
     .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
       position: relative;
       display: block;
-      margin: 16px;
+      margin: 8px 16px;
       width: calc(14.285% - 32px);
       min-width: calc(14.285% - 32px);
       scroll-snap-align: start;
       scroll-margin: 0 16px; }
       .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         font-weight: bold;
         line-height: normal; }
       .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item img {
@@ -227,7 +230,7 @@
         padding: 0px;
         margin-bottom: 0.5em; }
       .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
       .wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item button {
         position: absolute !important;
@@ -396,4 +399,10 @@
         width: calc(100% - 32px);
         min-width: calc(100% - 32px); } }
 
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-items-list .swiper-container a > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-items-list .swiper-container a:hover > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-items-list li.item-list-item a > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-items-list li.item-list-item a:hover > span {
+  color: var(--tainacan-block-gray5, #454647); }
+
 /*# sourceMappingURL=tainacan-gutenberg-block-carousel-items-list.css.map */

src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css

@@ -119,7 +119,7 @@
       margin: 0 50px; }
       .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a > span,
       .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a:hover > span {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         font-weight: bold;
         text-decoration: none;
         padding: 8px 12px;
@@ -129,7 +129,9 @@
       .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a > img {
         width: 100%;
         height: auto; }
+      .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a,
       .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container a:hover {
+        color: inherit;
         text-decoration: none; }
       .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper-container .swiper-slide.term-list-item-grid a {
         width: 100%;
@@ -163,7 +165,7 @@
     width: 100%;
     font-size: 0.875em;
     font-style: italic;
-    color: var(--tainacan-block-gray4, #555758);
+    color: inherit;
     text-align: center;
     margin: 0 auto;
     padding: 8px 2px 2px 2px; }
@@ -236,7 +238,7 @@
     .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item {
       position: relative;
       display: block;
-      margin: 16px 32px 16px 0px;
+      margin: 8px 32px 8px 0px;
       width: calc(16.666% - 32px);
       min-width: calc(16.666% - 32px);
       scroll-snap-align: start;
@@ -246,7 +248,7 @@
         width: calc(25% - 16px);
         min-width: calc(25% - 16px); }
       .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         font-weight: bold;
         line-height: normal; }
       .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item img {
@@ -256,7 +258,7 @@
         display: block;
         width: 100%; }
       .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
       .wp-block-tainacan-carousel-terms-list ul.terms-list-edit li.term-list-item button {
         position: absolute !important;
@@ -444,4 +446,10 @@
         width: calc(100% - 32px);
         min-width: calc(100% - 32px); } }
 
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-terms-list .swiper-container a > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-terms-list .swiper-container a:hover > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-terms-list li.term-list-item a > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-carousel-terms-list li.term-list-item a:hover > span {
+  color: var(--tainacan-block-gray5, #454647); }
+
 /*# sourceMappingURL=tainacan-gutenberg-block-carousel-terms-list.css.map */

src/assets/css/tainacan-gutenberg-block-collections-list.css

@@ -44,7 +44,7 @@
       width: 185px; }
       .wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item a,
       .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         border: none;
         font-weight: bold;
         line-height: normal; }
@@ -58,9 +58,10 @@
       .wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item a.collection-without-name span,
       .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item a.collection-without-name span {
         display: none; }
-      .wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item:hover a,
+      .wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item a, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item:hover a,
+      .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item a,
       .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
   .wp-block-tainacan-collections-list ul.collections-list-edit li.collection-list-item {
     display: flex;
@@ -121,7 +122,7 @@
       width: calc(20% - 24px); }
       .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item a,
       .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list li.collection-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         height: auto;
         display: flex;
         align-items: center;
@@ -137,9 +138,10 @@
       .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item a.collection-without-image img,
       .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list li.collection-list-item a.collection-without-image img {
         display: none; }
-      .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item:hover a,
+      .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item a, .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item:hover a,
+      .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list li.collection-list-item a,
       .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-list li.collection-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
       @media only screen and (max-width: 1600px) {
         .wp-block-tainacan-collections-list ul.collections-list.collections-layout-list li.collection-list-item,
@@ -162,4 +164,8 @@
           min-width: calc(100% - 24px);
           width: calc(100% - 24px); } }
 
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-collections-list li.collection-list-item a > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-collections-list li.collection-list-item a:hover > span {
+  color: inherit; }
+
 /*# sourceMappingURL=tainacan-gutenberg-block-collections-list.css.map */

src/assets/css/tainacan-gutenberg-block-collections-list.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "AAEA,mCAAoC;EAChC,MAAM,EAAE,QAAQ;EAGhB,uDAAoB;IAChB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;EAIZ;gGAC2D;IACvD,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,CAAC;EAId;8FACyD;IACrD,qBAAqB,EAAE,wBAAwB;IAC/C,eAAe,EAAE,iBAAiB;IAClC,kBAAkB,EAAE,eAAe;IAEnC;mGAAG;MACC,UAAU,EAAE,YAAY;MACxB,YAAY,EAAE,YAAY;MAC1B,WAAW,EAAE,YAAY;MACzB,MAAM,EAAE,gBAAgB;MAExB;yGAAI;QACA,MAAM,EAAE,gBAAgB;QACxB,aAAa,EAAE,cAAc;EAIzC;sFACiD;IAC7C,OAAO,EAAE,CAAC;ICtCd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,IAAI;IDqCT,gBAAgB,EAAE,6BAA6B;IAC/C,qBAAqB,EAAE,wBAAwB;IAC/C,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,YAAY;IAC7B,eAAe,EAAE,IAAI;IAErB;gHAAwB;MACpB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,KAAK,EAAE,KAAK;MAEZ;oHAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,MAAM;MAGvB;sHAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,GAAG;QACZ,aAAa,EAAE,KAAK;MAGxB;iJAA+B;QAC3B,OAAO,EAAE,IAAI;MAGjB;;0HACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;EAIjC,oFAAiD;IAC7C,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,UAAU;IAEvB,2FAAO;MACH,QAAQ,EAAE,mBAAmB;MAC7B,gBAAgB,EAAE,yBAAyB;MAC3C,KAAK,EAAE,oCAAmC;MAC1C,OAAO,EAAE,GAAG;MACZ,WAAW,EAAE,GAAG;MAChB,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAClB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,KAAK;MACZ,GAAG,EAAE,GAAG;MACR,eAAe,EAAE,MAAM;MACvB,OAAO,EAAE,GAAG;MAEZ,qGAAU;QAAE,MAAM,EAAE,GAAG;IAG3B,iGAAe;MACX,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,OAAO;MACnB,gBAAgB,EAAE,gBAAiC;MACnD,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,IAAI;MACT,MAAM,EAAE,8CAA6C;MACrD,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,wCAAwC;IAExD,uGAAqB;MACjB,gBAAgB,EAAE,gBAAiC;MACnD,MAAM,EAAE,yDAAwD;EAGxE,yCAA0C;IAEtC;wFACiD;MAC7C,qBAAqB,EAAE,uBAAuB;MAE9C;kHAAwB;QACpB,KAAK,EAAE,IAAI;QACX;wHAAI;UAAE,KAAK,EAAE,IAAI;EAM7B;sFACiD;IAC7C,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,IAAI;IAErB;gHAAwB;MACpB,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,IAAI;MAChB,SAAS,EAAE,gBAAgB;MAC3B,KAAK,EAAE,gBAAgB;MAEvB;oHAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,UAAU;MAG1B;sHAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,GAAG;QACZ,YAAY,EAAE,IAAI;MAItB;iJAA+B;QAC3B,OAAO,EAAE,IAAI;MAGjB;;0HACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;MAGzB,0CAA2C;QApC/C;oHAAwB;UAqChB,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,0CAA2C;QAzC/C;oHAAwB;UA0ChB,SAAS,EAAE,oBAAoB;UAC/B,KAAK,EAAE,oBAAoB;MAG/B,yCAA0C;QA9C9C;oHAAwB;UA+ChB,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,yCAA0C;QAnD9C;oHAAwB;UAoDhB,SAAS,EAAE,iBAAiB;UAC5B,KAAK,EAAE,iBAAiB;;AAOhC;iIACa;EACT,KAAK,EAAE,OAAO",
 "sources": ["../../views/gutenberg-blocks/tainacan-blocks/collections-list/style.scss","../../views/gutenberg-blocks/gutenberg-blocks-variables.scss"],
 "names": [],
 "file": "tainacan-gutenberg-block-collections-list.css"

src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css

@@ -191,7 +191,8 @@
         box-shadow: none; }
   .wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item {
     display: flex;
-    align-items: flex-start; }
+    align-items: flex-start;
+    position: relative; }
     .wp-block-tainacan-dynamic-items-list ul.items-list-edit li.item-list-item button {
       position: absolute !important;
       background-color: rgba(255, 255, 255, 0.75);
@@ -330,7 +331,7 @@
       align-items: center; }
       .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item a,
       .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         border: none;
         font-weight: bold;
         line-height: normal;
@@ -358,9 +359,10 @@
       .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item a.item-without-title > span,
       .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item a.item-without-title > span {
         display: none; }
-      .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item:hover a,
+      .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item a, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid li.item-list-item:hover a,
+      .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item a,
       .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-grid li.item-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
   @media only screen and (max-width: 498px) {
     .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-grid,
@@ -498,7 +500,7 @@
       padding: 12px 12px 24px 12px; }
       .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item a,
       .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         height: auto;
         display: flex;
         align-items: center;
@@ -522,9 +524,10 @@
       .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item a.item-without-image img,
       .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item a.item-without-image img {
         display: none; }
-      .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item:hover a,
+      .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item a, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-list li.item-list-item:hover a,
+      .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item a,
       .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-list li.item-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
   .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic,
   .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic {
@@ -564,7 +567,7 @@
           width: 100%;
           height: 100%;
           display: block;
-          color: var(--tainacan-block-gray5, #454647);
+          color: inherit;
           font-weight: bold;
           line-height: normal; }
         .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item img,
@@ -586,9 +589,10 @@
         .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item a.item-without-title > span,
         .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item a.item-without-title > span {
           display: none; }
-        .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item:hover a,
+        .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item a, .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container li.item-list-item:hover a,
+        .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item a,
         .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container li.item-list-item:hover a {
-          color: var(--tainacan-block-gray5, #454647);
+          color: inherit;
           text-decoration: none; }
       .wp-block-tainacan-dynamic-items-list ul.items-list.items-layout-mosaic .mosaic-container.mosaic-container--1-2x3 li.item-list-item,
       .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container.mosaic-container--1-2x3 li.item-list-item {
@@ -912,4 +916,8 @@
       .wp-block-tainacan-dynamic-items-list ul.items-list-edit.items-layout-mosaic .mosaic-container {
         min-width: 240px; } }
 
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-dynamic-items-list li.item-list-item a > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-dynamic-items-list li.item-list-item a:hover > span {
+  color: var(--tainacan-block-gray5, #454647); }
+
 /*# sourceMappingURL=tainacan-gutenberg-block-dynamic-items-list.css.map */

src/assets/css/tainacan-gutenberg-block-facets-list.css

@@ -317,11 +317,23 @@
       max-width: 220px; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item a,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
+        text-decoration: none;
         border: none;
         font-weight: bold;
         line-height: normal;
         display: block; }
+      .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item .facet-label-and-count,
+      .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item .facet-label-and-count {
+        display: flex;
+        align-items: center; }
+        .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item .facet-label-and-count.is-style-facet-label-and-count--below,
+        .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item .facet-label-and-count.is-style-facet-label-and-count--below {
+          flex-direction: column;
+          align-items: flex-start; }
+          .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item .facet-label-and-count.is-style-facet-label-and-count--below span.facet-item-count,
+          .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item .facet-label-and-count.is-style-facet-label-and-count--below span.facet-item-count {
+            font-weight: normal; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item:not(.facet-with-name-inside-image) img,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item:not(.facet-with-name-inside-image) img {
         height: auto;
@@ -330,7 +342,8 @@
         margin-bottom: 0.5em; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item:not(.facet-with-name-inside-image) span.facet-item-count,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item:not(.facet-with-name-inside-image) span.facet-item-count {
-        color: var(--tainacan-block-gray3, #cbcbcb); }
+        color: inherit;
+        opacity: 0.65; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item.facet-with-name-inside-image a span,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item.facet-with-name-inside-image a span {
         display: block;
@@ -356,7 +369,7 @@
         opacity: 1; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item:hover a,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item svg,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item svg {
@@ -495,9 +508,10 @@
       width: 100%; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item a,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         line-height: normal;
         height: auto;
+        text-decoration: none;
         display: flex;
         align-items: center;
         word-break: break-all;
@@ -514,6 +528,17 @@
         fill: var(--tainacan-block-gray4, #555758);
         margin-left: auto;
         overflow: visible; }
+      .wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item .facet-label-and-count,
+      .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item .facet-label-and-count {
+        display: flex;
+        align-items: center; }
+        .wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item .facet-label-and-count.is-style-facet-label-and-count--below,
+        .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item .facet-label-and-count.is-style-facet-label-and-count--below {
+          flex-direction: column;
+          align-items: flex-start; }
+          .wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item .facet-label-and-count.is-style-facet-label-and-count--below span.facet-item-count,
+          .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item .facet-label-and-count.is-style-facet-label-and-count--below span.facet-item-count {
+            font-weight: normal; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item.facet-without-image,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item.facet-without-image {
         min-height: 0.875em; }
@@ -526,11 +551,12 @@
           display: none; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item span.facet-item-count,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item span.facet-item-count {
-        color: var(--tainacan-block-gray3, #cbcbcb);
+        color: inherit;
+        opacity: 0.65;
         word-break: break-all; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item:hover a,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-list li.facet-list-item.facet-term-with-children,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-list li.facet-list-item.facet-term-with-children {
@@ -570,9 +596,11 @@
       vertical-align: middle; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item a,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
+        text-decoration: none;
         display: inline;
-        min-height: 54px; }
+        min-height: 54px;
+        text-decoration: none; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item img,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item img {
         height: auto;
@@ -586,22 +614,33 @@
         margin-left: auto;
         overflow: visible;
         margin-bottom: -12px; }
+      .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item .facet-label-and-count,
+      .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item .facet-label-and-count {
+        display: flex;
+        align-items: center; }
+        .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item .facet-label-and-count.is-style-facet-label-and-count--below,
+        .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item .facet-label-and-count.is-style-facet-label-and-count--below {
+          flex-direction: column; }
+          .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item .facet-label-and-count.is-style-facet-label-and-count--below span.facet-item-count,
+          .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item .facet-label-and-count.is-style-facet-label-and-count--below span.facet-item-count {
+            font-weight: normal; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item.facet-without-image img,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item.facet-without-image img {
         display: none; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item span.facet-item-count,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item span.facet-item-count {
-        color: var(--tainacan-block-gray3, #cbcbcb); }
+        color: inherit;
+        opacity: 0.65; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item:hover, .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item:hover a,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item:hover,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item:hover a {
-        color: var(--tainacan-block-primary, #298596);
+        color: inherit;
         text-decoration: none;
         cursor: pointer; }
       .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item:hover.facet-term-with-children, .wp-block-tainacan-facets-list ul.facets-list.facets-layout-cloud li.facet-list-item:hover.facet-term-with-children a,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item:hover.facet-term-with-children,
       .wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-cloud li.facet-list-item:hover.facet-term-with-children a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
   .wp-block-tainacan-facets-list .show-more-button {
     margin: 12px auto;
@@ -616,6 +655,13 @@
       background-color: var(--tainacan-block-gray3, #cbcbcb); }
     .wp-block-tainacan-facets-list .show-more-button i > svg {
       fill: white; }
+  .wp-block-tainacan-facets-list:not(.has-text-color) li.facet-list-item a {
+    color: var(--tainacan-block-gray5, #454647); }
+    .wp-block-tainacan-facets-list:not(.has-text-color) li.facet-list-item a:hover, .wp-block-tainacan-facets-list:not(.has-text-color) li.facet-list-item a:focus, .wp-block-tainacan-facets-list:not(.has-text-color) li.facet-list-item a:hover .facet-item-count, .wp-block-tainacan-facets-list:not(.has-text-color) li.facet-list-item a:focus .facet-item-count {
+      color: var(--tainacan-block-primary, #298596); }
+    .wp-block-tainacan-facets-list:not(.has-text-color) li.facet-list-item a .facet-item-count {
+      opacity: 1.0;
+      color: var(--tainacan-block-gray3, #cbcbcb); }
 
 .child-reveal-enter-active {
   overflow: hidden;

src/assets/css/tainacan-gutenberg-block-items-list.css

@@ -44,7 +44,7 @@
       width: 185px; }
       .wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item a,
       .wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         border: none;
         font-weight: bold;
         line-height: normal; }
@@ -62,9 +62,10 @@
       .wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item a.item-without-title span,
       .wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item a.item-without-title span {
         display: none; }
-      .wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item:hover a,
+      .wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item a, .wp-block-tainacan-items-list ul.items-list.items-layout-grid li.item-list-item:hover a,
+      .wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item a,
       .wp-block-tainacan-items-list ul.items-list-edit.items-layout-grid li.item-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
   .wp-block-tainacan-items-list ul.items-list-edit li.item-list-item {
     display: flex;
@@ -125,7 +126,7 @@
       width: calc(20% - 24px); }
       .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item a,
       .wp-block-tainacan-items-list ul.items-list-edit.items-layout-list li.item-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         height: auto;
         display: flex;
         align-items: center;
@@ -141,9 +142,10 @@
       .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item a.item-without-image img,
       .wp-block-tainacan-items-list ul.items-list-edit.items-layout-list li.item-list-item a.item-without-image img {
         display: none; }
-      .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item:hover a,
+      .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item a, .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item:hover a,
+      .wp-block-tainacan-items-list ul.items-list-edit.items-layout-list li.item-list-item a,
       .wp-block-tainacan-items-list ul.items-list-edit.items-layout-list li.item-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
       @media only screen and (max-width: 1600px) {
         .wp-block-tainacan-items-list ul.items-list.items-layout-list li.item-list-item,
@@ -166,4 +168,8 @@
           min-width: calc(100% - 24px);
           width: calc(100% - 24px); } }
 
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-items-list li.item-list-item a > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-items-list li.item-list-item a:hover > span {
+  color: inherit; }
+
 /*# sourceMappingURL=tainacan-gutenberg-block-items-list.css.map */

src/assets/css/tainacan-gutenberg-block-items-list.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "AAEA,6BAA8B;EAC1B,MAAM,EAAE,QAAQ;EAGhB,iDAAoB;IAChB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;EAIZ;8EAC+C;IAC3C,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,CAAC;EAId;4EAC6C;IACzC,qBAAqB,EAAE,wBAAwB;IAC/C,eAAe,EAAE,iBAAiB;IAClC,kBAAkB,EAAE,eAAe;IAEnC;iFAAG;MACC,UAAU,EAAE,YAAY;MACxB,YAAY,EAAE,YAAY;MAC1B,WAAW,EAAE,YAAY;MACzB,MAAM,EAAE,gBAAgB;MAExB;uFAAI;QACA,MAAM,EAAE,gBAAgB;QACxB,aAAa,EAAE,cAAc;EAIzC;oEACqC;IACjC,OAAO,EAAE,CAAC;ICtCd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,IAAI;IDqCT,gBAAgB,EAAE,6BAA6B;IAC/C,qBAAqB,EAAE,wBAAwB;IAC/C,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,YAAY;IAC7B,eAAe,EAAE,IAAI;IAErB;wFAAkB;MACd,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,KAAK,EAAE,KAAK;MAEZ;4FAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,MAAM;QAEnB;mGAAK;UACD,WAAW,EAAE,MAAM;UACnB,OAAO,EAAE,KAAK;MAItB;8FAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,GAAG;QACZ,aAAa,EAAE,KAAK;MAGxB;oHAA0B;QACtB,OAAO,EAAE,IAAI;MAGjB;;kGACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;EAIjC,kEAAqC;IACjC,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,UAAU;IAEvB,yEAAO;MACH,QAAQ,EAAE,mBAAmB;MAC7B,gBAAgB,EAAE,yBAAyB;MAC3C,KAAK,EAAE,oCAAmC;MAC1C,OAAO,EAAE,GAAG;MACZ,WAAW,EAAE,GAAG;MAChB,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAClB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,KAAK;MACZ,GAAG,EAAE,GAAG;MACR,eAAe,EAAE,MAAM;MACvB,OAAO,EAAE,GAAG;MAEZ,mFAAU;QAAE,MAAM,EAAE,GAAG;IAG3B,+EAAe;MACX,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,OAAO;MACnB,gBAAgB,EAAE,gBAAiC;MACnD,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,IAAI;MACT,MAAM,EAAE,8CAA6C;MACrD,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,wCAAwC;IAExD,qFAAqB;MACjB,gBAAgB,EAAE,gBAAiC;MACnD,MAAM,EAAE,yDAAwD;EAGxE,yCAA0C;IAEtC;sEACqC;MACjC,qBAAqB,EAAE,uBAAuB;MAE9C;0FAAkB;QACd,KAAK,EAAE,IAAI;QACX;gGAAI;UAAE,KAAK,EAAE,IAAI;EAM7B;oEACqC;IACjC,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,IAAI;IAErB;wFAAkB;MACd,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,IAAI;MAChB,SAAS,EAAE,gBAAgB;MAC3B,KAAK,EAAE,gBAAgB;MAEvB;4FAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,UAAU;MAG1B;8FAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,GAAG;QACZ,YAAY,EAAE,IAAI;MAGtB;mHAAyB;QACrB,OAAO,EAAE,IAAI;MAGjB;;kGACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;MAGzB,0CAA2C;QAnC/C;4FAAkB;UAoCV,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,0CAA2C;QAxC/C;4FAAkB;UAyCV,SAAS,EAAE,oBAAoB;UAC/B,KAAK,EAAE,oBAAoB;MAG/B,yCAA0C;QA7C9C;4FAAkB;UA8CV,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,yCAA0C;QAlD9C;4FAAkB;UAmDV,SAAS,EAAE,iBAAiB;UAC5B,KAAK,EAAE,iBAAiB;;AAOhC;qHACa;EACT,KAAK,EAAE,OAAO",
 "sources": ["../../views/gutenberg-blocks/tainacan-blocks/items-list/style.scss","../../views/gutenberg-blocks/gutenberg-blocks-variables.scss"],
 "names": [],
 "file": "tainacan-gutenberg-block-items-list.css"

src/assets/css/tainacan-gutenberg-block-search-bar.css

@@ -34,6 +34,7 @@
         font-size: 0.875em; }
       .wp-block-tainacan-search-bar .tainacan-search-container #tainacan-search-bar-block button {
         height: auto !important;
+        min-height: 1.75em;
         display: flex;
         align-items: center;
         border: none;
@@ -41,11 +42,13 @@
         border-radius: 0 !important;
         background: white;
         padding: 4px 1em;
-        font-size: 1em; }
+        font-size: 1em;
+        line-height: 1.75em; }
         .wp-block-tainacan-search-bar .tainacan-search-container #tainacan-search-bar-block button .icon {
           height: 1.75em; }
           .wp-block-tainacan-search-bar .tainacan-search-container #tainacan-search-bar-block button .icon svg {
             transform: scale(1);
+            height: 100%;
             fill: var(--tainacan-block-primary, #298596); }
       @media only screen and (max-width: 768px) {
         .wp-block-tainacan-search-bar .tainacan-search-container #tainacan-search-bar-block {

src/assets/css/tainacan-gutenberg-block-search-bar.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["../../views/gutenberg-blocks/tainacan-blocks/search-bar/style.scss"],
 "names": [],
 "file": "tainacan-gutenberg-block-search-bar.css"

src/assets/css/tainacan-gutenberg-block-terms-list.css

@@ -29,7 +29,7 @@
       width: 185px; }
       .wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item a,
       .wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid li.term-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         border: none;
         font-weight: bold;
         line-height: normal; }
@@ -43,9 +43,10 @@
       .wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item a.term-without-name span,
       .wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid li.term-list-item a.term-without-name span {
         display: none; }
-      .wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item:hover a,
+      .wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item a, .wp-block-tainacan-terms-list ul.terms-list.terms-layout-grid li.term-list-item:hover a,
+      .wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid li.term-list-item a,
       .wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-grid li.term-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
   .wp-block-tainacan-terms-list ul.terms-list-edit li.term-list-item {
     display: flex;
@@ -106,7 +107,7 @@
       width: calc(20% - 24px); }
       .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item a,
       .wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list li.term-list-item a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         height: auto;
         display: flex;
         align-items: center;
@@ -122,9 +123,10 @@
       .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item a.term-without-image img,
       .wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list li.term-list-item a.term-without-image img {
         display: none; }
-      .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item:hover a,
+      .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item a, .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item:hover a,
+      .wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list li.term-list-item a,
       .wp-block-tainacan-terms-list ul.terms-list-edit.terms-layout-list li.term-list-item:hover a {
-        color: var(--tainacan-block-gray5, #454647);
+        color: inherit;
         text-decoration: none; }
       @media only screen and (max-width: 1600px) {
         .wp-block-tainacan-terms-list ul.terms-list.terms-layout-list li.term-list-item,
@@ -147,4 +149,8 @@
           min-width: calc(100% - 24px);
           width: calc(100% - 24px); } }
 
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-terms-list li.term-list-item a > span,
+.block-editor-block-list__block:not(.has-text-color) > .wp-block-tainacan-terms-list li.term-list-item a:hover > span {
+  color: inherit; }
+
 /*# sourceMappingURL=tainacan-gutenberg-block-terms-list.css.map */

src/assets/css/tainacan-gutenberg-block-terms-list.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "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",
+"mappings": "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",
 "sources": ["../../views/gutenberg-blocks/tainacan-blocks/terms-list/style.scss","../../views/gutenberg-blocks/gutenberg-blocks-variables.scss"],
 "names": [],
 "file": "tainacan-gutenberg-block-terms-list.css"

src/classes/api/endpoints/class-tainacan-rest-items-controller.php

@@ -242,7 +242,7 @@ class REST_Items_Controller extends REST_Controller {
 
 				$img_size = 'large';
 
-				if($request['doc_img_size']){
+				if ( $request['doc_img_size'] ) {
 					$img_size = $request['doc_img_size'];
 				}
 

src/classes/class-tainacan-embed.php

@@ -175,6 +175,15 @@ class Embed {
 			}
 			
 			if ( $height && $width ) {
+
+				// Removes 'px' from the end if it was passed
+				$height = preg_split('/px$/', $height)[0];
+				$width = preg_split('/px$/', $width)[0];
+
+				// If even then we are still not using a numeric value, it is probably the case of a 100%
+				$height = is_numeric($height) ? $height : 567;
+				$width = is_numeric($width) ? $width : 1024;
+
 				$aspect_ratio = number_format(( $width / $height ), 2, '.', "");
 	
 				// Given the actual aspect ratio, find the widest ratio to support it.

src/classes/entities/class-tainacan-item-metadata-entity.php

@@ -486,6 +486,11 @@ class Item_Metadata_Entity extends Entity {
 
 		if ($this->is_multiple()) {
 			if (is_array($value)) {
+				$cardinality = $metadatum->get_cardinality();
+				if ( !empty($cardinality) && $cardinality > 0 && count($value) > $cardinality ) {
+					$this->add_error( 'invalid', sprintf( __('Metadatum %s is set to accept a maximum of %s values.', 'tainacan'), $metadatum->get_name(), $cardinality ) );
+					return false;
+				}
 				// if its required, at least one must be filled
 				$one_filled = false;
 				$valid = true;

src/classes/entities/class-tainacan-item.php

@@ -25,6 +25,7 @@ class Item extends Entity {
 		$decription,
 		$document_type,
 		$document,
+		$document_options,
 		$collection_id;
 
 	/**
@@ -252,6 +253,15 @@ class Item extends Entity {
 		return $this->get_mapped_property( 'document_type' );
 	}
 
+	/**
+	 * Return the item document options
+	 *
+	 * @return string
+	 */
+	function get_document_options() {
+		return $this->get_mapped_property( 'document_options' );
+	}
+
 	/**
 	 * Return the document mimetype
 	 *
@@ -355,6 +365,17 @@ class Item extends Entity {
 		$this->set_mapped_property( 'document_type', $value );
 	}
 
+	/**
+	 * Define the document options
+	 *
+	 * @param [object] $value
+	 *
+	 * @return void
+	 */
+	function set_document_options( $value ) {
+		$this->set_mapped_property( 'document_options', $value );
+	}
+
 	/**
 	 * Define the document
 	 *
@@ -685,14 +706,36 @@ class Item extends Entity {
 	public function get_document_as_html($img_size = 'large') {
 
 		$type = $this->get_document_type();
+		$document_options = $this->get_document_options();
 
 		$output = '';
 
 		if ( $type == 'url' ) {
 			global $wp_embed;
 			$_embed = $wp_embed->autoembed($this->get_document());
-			if ( $_embed == $this->get_document() ) {
+			$url = $this->get_document();
-				$_embed = sprintf('<a href="%s" target="blank">%s</a>', $this->get_document(), $this->get_document());
+
+			if ( $_embed == $url ) {
+
+				if ( $document_options && isset($document_options['forced_iframe']) && $document_options['forced_iframe'] === true ) {
+
+					$headers = get_headers($url, 1);
+
+					// URL points to an image file
+					if (strpos($headers['Content-Type'], 'image/') !== false) {
+						$_embed = sprintf('<a href="%s" target="blank"><img src="%s" /></a>', $url, $url);
+
+					// URL points to a content that is not an image
+					} else {
+						$tainacan_embed = \Tainacan\Embed::get_instance();
+						$iframe_width = isset($document_options['forced_iframe_width']) ? $document_options['forced_iframe_width'] : '600';
+						$iframe_height = isset($document_options['forced_iframe_height']) ? $document_options['forced_iframe_height'] : '450';
+
+						$_embed = $tainacan_embed->add_responsive_wrapper( sprintf('<iframe src="%s" style="border: 0" width="%s" height="%s"></iframe>', $url, $iframe_width, $iframe_height) );
+					}
+				} else {
+					$_embed = sprintf('<a href="%s" target="blank">%s</a>', $url, $url);
+				}
 			}
 			$output .= $_embed;
 		} elseif ( $type == 'text' ) {

src/classes/repositories/class-tainacan-items.php

@@ -104,6 +104,33 @@ class Items extends Repository {
 				'on_error'    => __( 'Invalid document', 'tainacan' ),
 				'default'     => ''
 			],
+			'document_options'=> [
+				'map'         => 'meta',
+				'title'       => __( 'Document options', 'tainacan' ),
+				'type'        => 'object',
+				'description' => __( 'Object of options related to the document display.', 'tainacan' ),
+				'on_error'    => __( 'Invalid document options', 'tainacan' ),
+				'properties'  => array(
+					'forced_iframe' => array(
+						'description' => __( 'Render content in iframe', 'tainacan' ),
+						'type'        => 'boolean',
+						'context'     => array( 'view', 'edit', 'embed' ),
+						'default'     => false
+					),
+					'forced_iframe_height'      => array(
+						'description' => __( 'Iframe height (px)', 'tainacan' ),
+						'type'        => 'number',
+						'context'     => array( 'view', 'edit', 'embed' ),
+						'default'     => 450
+					),
+					'forced_iframe_width' => array(
+						'description' => __( 'Iframe width (px)' , 'tainacan'),
+						'type'        => 'number',
+						'context'     => array( 'view', 'edit', 'embed' ),
+						'default'     => 600
+					),
+				)
+			],
 			'_thumbnail_id'     => [
 				'map'         => 'meta',
 				'title'       => __( 'Thumbnail', 'tainacan' ),

src/classes/repositories/class-tainacan-metadata.php

@@ -130,12 +130,11 @@ class Metadata extends Repository {
 			],
 			'cardinality'           => [
 				'map'         => 'meta',
-				'title'       => __( 'Cardinality', 'tainacan' ),
+				'title'       => __( 'Maximum number of values', 'tainacan' ),
 				'type'        => ['string', 'number'],
-				'description' => __( 'Number of multiples possible metadata', 'tainacan' ),
+				'description' => __( 'Limit the amount of possible metadata values', 'tainacan' ),
-				'on_error'    => __( 'This number of multiples metadata is not allowed', 'tainacan' ),
+				'on_error'    => __( 'This number of multiple metadata is not allowed', 'tainacan' ),
 				//'validation'  => v::numeric()->positive(),
-				'default'     => 1
 			],
 			'mask'                  => [
 				'map'         => 'meta',
@@ -1165,9 +1164,9 @@ class Metadata extends Repository {
 					$base_query = $wpdb->prepare("FROM $wpdb->term_relationships tr
 						INNER JOIN $wpdb->term_taxonomy tt ON tr.term_taxonomy_id = tt.term_taxonomy_id
 						INNER JOIN $wpdb->terms t ON tt.term_id = t.term_id
+						INNER JOIN ($items_query) as posts ON tr.object_id = posts.ID
 						WHERE
 						tt.parent = %d AND
-						tr.object_id IN ($items_query) AND
 						tt.taxonomy = %s
 						$search_q
 						ORDER BY t.name ASC
@@ -1235,9 +1234,6 @@ class Metadata extends Repository {
 
 			}
 
-
-
-
 			// add selected to the result
 			if ( !empty($args['include']) ) {
 				if ( is_array($args['include']) && !empty($args['include']) ) {
@@ -1261,7 +1257,6 @@ class Metadata extends Repository {
 				}
 			}
 
-
 			$number = ctype_digit($args['number']) && $args['number'] >=1 ? $args['number'] : $total;
 			if( $number < 1){
 				$pages = 1;
@@ -1309,18 +1304,19 @@ class Metadata extends Repository {
 
 			}
 
-
-
 		} else {
 
-			$items_query_clause = '';
 			if ($items_query) {
-				$items_query_clause = "AND post_id IN($items_query)";
+				$items_query_clause = "($items_query) as qItems";
+				$base_query = $wpdb->prepare( "(SELECT DISTINCT post_id, meta_value FROM $wpdb->postmeta WHERE meta_key = %s $search_q ORDER BY meta_value) as qBase", $metadatum_id );
+				$total_query = "SELECT COUNT(DISTINCT qBase.meta_value) FROM $base_query INNER JOIN $items_query_clause ON qBase.post_id = qItems.ID";
+				$query = "SELECT DISTINCT qBase.meta_value FROM $base_query INNER JOIN $items_query_clause ON qBase.post_id = qItems.ID $pagination";
+				//$query = "SELECT DISTINCT meta_value $base_query $pagination";
+			} else {
+				$base_query = $wpdb->prepare( "FROM $wpdb->postmeta WHERE meta_key = %s $search_q ORDER BY meta_value", $metadatum_id );
+				$total_query = "SELECT COUNT(DISTINCT meta_value) $base_query";
+				$query = "SELECT DISTINCT meta_value $base_query $pagination";
 			}
-			$base_query = $wpdb->prepare( "FROM $wpdb->postmeta WHERE meta_key = %s $search_q $items_query_clause ORDER BY meta_value", $metadatum_id );
-
-			$total_query = "SELECT COUNT(DISTINCT meta_value) $base_query";
-			$query = "SELECT DISTINCT meta_value $base_query $pagination";
 
 			$results = $wpdb->get_col($query);
 			$total = $wpdb->get_var($total_query);

src/classes/theme-helper/template-tags.php

@@ -121,8 +121,8 @@ function tainacan_the_item_document_download_link($item_id = 0) {
 		return;
 
 	$link = $item->get_document_download_url();
-
+	
-	if (!$link || $item->get_document_type() == 'text')
+	if (!$link || $item->get_document_type() == 'text' || $item->get_document_type() == 'url')
 		return;
 
 	return '<a name="' . __('Download the item document', 'tainacan') . '" download="'. $link . '" href="' . $link . '">' . __('Download', 'tainacan') . '</a>';
@@ -996,9 +996,11 @@ function tainacan_get_the_mime_type_icon($mime_type, $image_size = 'medium') {
 			$icon_file = 'placeholder_pdf';
 			break;
 		case 'attachment':
+			$icon_file = 'placeholder_attachment';
+			break;
 		case 'empty':
 		default:
-			$icon_file = 'placeholder_attachment';
+			$icon_file = 'placeholder_square';
 	}
 	
 	return $images_path . $icon_file . $image_size . '.png';

src/readme.txt

@@ -4,7 +4,7 @@ Tags: museums, libraries, archives, GLAM, collections, repository
 Requires at least: 5.0
 Tested up to: 5.8
 Requires PHP: 5.6
-Stable tag: 0.18.4
+Stable tag: 0.18.5
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 

src/tainacan.php

@@ -4,17 +4,17 @@ Plugin Name: Tainacan
 Plugin URI: https://tainacan.org/
 Description: Open source, powerful and flexible repository platform for WordPress. Manage and publish you digital collections as easily as publishing a post to your blog, while having all the tools of a professional repository platform.
 Author: Tainacan.org
-Version: 0.18.4
+Version: 0.18.5
 Requires at least: 5.0
 Tested up to: 5.8
 Requires PHP: 5.6
-Stable tag: 0.18.4
+Stable tag: 0.18.5
 Text Domain: tainacan
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 */
 
-const TAINACAN_VERSION = '0.18.4';
+const TAINACAN_VERSION = '0.18.5';
 
 defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
 $TAINACAN_BASE_URL = plugins_url('', __FILE__);

src/views/admin/components/edition/importer-mapping-form.vue

@@ -208,12 +208,13 @@
                             autofocus="true"
                             tabindex="-1"
                             role="dialog"
-                            aria-modal>
+                            aria-modal
+                            v-if="selectedMetadatumType == undefined && !isEditingMetadatum">
                         <b-loading 
                                 :is-full-page="isFullPage" 
                                 :active.sync="isLoadingMetadatumTypes"/>
                         <div 
-                                v-if="selectedMetadatumType == undefined && !isEditingMetadatum"
+                                
                                 class="tainacan-modal-content">
                             <div class="tainacan-modal-title">
                                 <h2>{{ $i18n.get('instruction_select_metadatum_type') }}</h2>
@@ -226,7 +227,7 @@
                                             v-for="(metadatumType, index) of metadatumTypes"
                                             :key="index"
                                             @click="onSelectMetadatumType(metadatumType)">
-                                        <h4>{{ metadatumType.name }}</h4>           
+                                        <h4>{{ metadatumType.name }}</h4>
                                     </div>
                                 </div>
                                 <div class="field is-grouped form-submit">
@@ -241,29 +242,17 @@
                                 </div>
                             </section>
                         </div>
-                        <div 
-                                v-if="isEditingMetadatum"
-                                class="tainacan-modal-content">
-                            <div class="tainacan-modal-title">
-                                <h2>{{ $i18n.get('instruction_configure_new_metadatum') }}</h2>
-                                <a 
-                                        class="back-link" 
-                                        @click="isEditingMetadatum = false">
-                                    {{ $i18n.get('back') }}
-                                </a>
-                                <hr>
-                            </div>
-                            <metadatum-edition-form
-                                    :collection-id="collectionId"
-                                    :is-repository-level="false"
-                                    @onEditionFinished="onMetadatumEditionFinished()"
-                                    @onEditionCanceled="onMetadatumEditionCanceled()"
-                                    :index="0"
-                                    :original-metadatum="metadatum"
-                                    :edited-metadatum="editedMetadatum"
-                                    :is-on-modal="true"/>
-                        </div>
                     </div>
+                    
+                    <metadatum-edition-form
+                            v-if="selectedMetadatumType && isEditingMetadatum"
+                            :collection-id="collectionId"
+                            :is-repository-level="false"
+                            @onEditionFinished="onMetadatumEditionFinished()"
+                            @onEditionCanceled="onMetadatumEditionCanceled()"
+                            :index="0"
+                            :original-metadatum="metadatum"
+                            :is-inside-importer-flow="true" />
                 </b-modal>
             </div>
             <div 
@@ -411,7 +400,6 @@ export default {
             selectedMetadatumType: undefined,
             isEditingMetadatum: false,
             metadatum: {},
-            editedMetadatum: {},
             backgroundProcess: undefined,
             metadataSearchCancel: undefined,
             showTitlePromptModal: false,
@@ -717,17 +705,15 @@ export default {
 
             this.sendMetadatum({
                 collectionId: this.collectionId, 
-                name: newMetadatum.name, metadatumType: 
+                name: newMetadatum.name,
-                newMetadatum.className, 
+                metadatumType: newMetadatum.className, 
                 status: 'auto-draft', 
                 isRepositoryLevel: false, 
                 newIndex: 0
             })
             .then((metadatum) => {
+                this.selectedMetadatumType = newMetadatum.className;
                 this.metadatum = metadatum;
-                this.editedMetadatum = JSON.parse(JSON.stringify(metadatum));
-                this.editedMetadatum.saved = false;
-                this.editedMetadatum.status = 'publish';
                 this.isEditingMetadatum = true;
             })
             .catch((error) => {
@@ -747,7 +733,6 @@ export default {
         onMetadatumEditionFinished() {
             // Reset variables for metadatum creation
             delete this.metadatum;
-            delete this.editedMetadatum;
             this.isEditingMetadatum = false;
             this.isNewMetadatumModalActive = false;
             this.selectedMetadatumType = undefined;
@@ -783,8 +768,6 @@ export default {
             // Reset variables for metadatum creation
             if (this.metadatum)
                 delete this.metadatum;
-            if (this.editedMetadatum)
-                delete this.editedMetadatum;
             this.isEditingMetadatum = false;
             this.isNewMetadatumModalActive = false;
             this.selectedMetadatumType = undefined;

src/views/admin/components/edition/item-edition-form.vue

@@ -492,38 +492,40 @@
                                                 <i class="tainacan-icon tainacan-icon-edit"/>
                                             </span>
                                         </a>
+                                        <a
+                                                v-if="item.thumbnail && item.thumbnail.thumbnail != undefined && item.thumbnail.thumbnail != false"
+                                                id="button-alt-text-thumbnail"
+                                                class="button is-rounded is-secondary"
+                                                :aria-label="$i18n.get('label_button_delete_thumb')"
+                                                @click="isThumbnailAltTextModalActive = true">
+                                            <span
+                                                    v-tooltip="{
+                                                        content: $i18n.get('label_thumbnail_alt'),
+                                                        autoHide: true,
+                                                        placement: 'bottom'
+                                                    }"
+                                                    class="icon">
+                                                <i class="tainacan-icon tainacan-icon-text"/>
+                                            </span>
+                                        </a>
                                         <a
                                                 v-if="item.thumbnail && item.thumbnail.thumbnail != undefined && item.thumbnail.thumbnail != false"
                                                 id="button-delete-thumbnail"
                                                 class="button is-rounded is-secondary"
                                                 :aria-label="$i18n.get('label_button_delete_thumb')"
                                                 @click="deleteThumbnail()">
-                                        <span
+                                            <span
-                                                v-tooltip="{
+                                                    v-tooltip="{
-                                                    content: $i18n.get('delete'),
+                                                        content: $i18n.get('delete'),
-                                                    autoHide: true,
+                                                        autoHide: true,
-                                                    placement: 'bottom'
+                                                        placement: 'bottom'
-                                                }"
+                                                    }"
-                                                class="icon">
+                                                    class="icon">
-                                            <i class="tainacan-icon tainacan-icon-delete"/>
+                                                <i class="tainacan-icon tainacan-icon-delete"/>
-                                        </span>
+                                            </span>
                                         </a>
                                     </div>
                                 </div>
-                                <div 
-                                        v-if="form.thumbnail_id"
-                                        class="thumbnail-alt-input">
-                                    <label class="label">{{ $i18n.get('label_thumbnail_alt') }}</label>
-                                    <help-button
-                                            :title="$i18n.get('label_thumbnail_alt')"
-                                            :message="$i18n.get('info_thumbnail_alt')"/>
-                                    <b-input
-                                            type="textarea" 
-                                            lazy
-                                            :placeholder="$i18n.get('instruction_thumbnail_alt')"
-                                            :value="form.thumbnail_alt ? form.thumbnail_alt : ''"
-                                            @input="onUpdateThumbnailAlt" />
-                                </div>
                             </div>
 
                             <!-- Hook for extra Form options -->
@@ -539,6 +541,44 @@
 
                         </div>
 
+                        <!-- Thumbnail Alternative Text Modal ----------------- -->
+                        <b-modal
+                                :can-cancel="false"
+                                :active.sync="isThumbnailAltTextModalActive"
+                                :width="640"
+                                scroll="keep"
+                                trap-focus
+                                aria-modal
+                                aria-role="dialog"
+                                custom-class="tainacan-modal">
+                            <div class="tainacan-modal-content">
+                                <div class="tainacan-modal-title">
+                                    <h2>{{ $i18n.get('label_thumbnail_alt') }}</h2>
+                                    <hr>
+                                </div>
+                                <b-input
+                                        type="textarea"
+                                        lazy
+                                        :placeholder="$i18n.get('instruction_thumbnail_alt')"
+                                        :value="form.thumbnail_alt ? form.thumbnail_alt : ''"
+                                        @input="onUpdateThumbnailAlt" />
+                                <p>{{ $i18n.get('info_thumbnail_alt') }}</p>
+
+                                <div class="field is-grouped form-submit">
+                                    <div 
+                                            style="margin-left: auto;"
+                                            class="control">
+                                        <button
+                                                id="button-submit-text-content-writing"
+                                                type="submit"
+                                                @click.prevent="isThumbnailAltTextModalActive = false"
+                                                class="button is-success">
+                                            {{ $i18n.get('finish') }}</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </b-modal>
+
                         <!-- Text Insert Modal ----------------- -->
                         <b-modal
                                 :can-cancel="false"
@@ -583,7 +623,7 @@
                         <b-modal
                                 :can-cancel="false"
                                 :active.sync="isURLModalActive"
-                                :width="640"
+                                :width="860"
                                 scroll="keep"
                                 trap-focus
                                 role="dialog"
@@ -596,7 +636,46 @@
                                     <h2>{{ $i18n.get('instruction_insert_url') }}</h2>
                                     <hr>
                                 </div>
-                                <b-input v-model="urlLink"/>
+                                <b-input 
+                                        type="url"
+                                        v-model="urlLink" />
+                                <br>
+                                <b-field
+                                        :addons="false"
+                                        :label="$i18n.get('label_document_option_forced_iframe')">
+                                        &nbsp;
+                                    <b-switch
+                                            size="is-small" 
+                                            v-model="urlForcedIframe" />
+                                    <help-button
+                                            :title="$i18n.get('label_document_option_forced_iframe')"
+                                            :message="$i18n.get('info_document_option_forced_iframe')" />
+                                </b-field>
+                                <b-field 
+                                        v-if="urlForcedIframe"
+                                        grouped>
+                                    <b-field :label="$i18n.get('label_document_option_iframe_width')">
+                                        <b-numberinput
+                                                :aria-minus-label="$i18n.get('label_decrease')"
+                                                :aria-plus-label="$i18n.get('label_increase')"
+                                                min="1" 
+                                                v-model="urlIframeWidth"
+                                                step="1" />
+                                    </b-field>
+                                    <b-field :label="$i18n.get('label_document_option_iframe_height')">
+                                        <b-numberinput
+                                                :aria-minus-label="$i18n.get('label_decrease')"
+                                                :aria-plus-label="$i18n.get('label_increase')"
+                                                min="1" 
+                                                v-model="urlIframeHeight"
+                                                step="1" />
+                                    </b-field>
+                                </b-field>
+                                <p 
+                                        v-if="urlForcedIframe"
+                                        class="help">
+                                    {{ $i18n.get('info_iframe_dimensions') }}
+                                </p>
 
                                 <div class="field is-grouped form-submit">
                                     <div class="control">
@@ -921,6 +1000,10 @@ export default {
             activeTab: 0,
             isLoadingAttachments: false,
             metadataNameFilterString: '',
+            isThumbnailAltTextModalActive: false,
+            urlForcedIframe: false,
+            urlIframeWidth: 600,
+            urlIframeHeight: 450
         }
     },
     computed: {
@@ -1174,10 +1257,8 @@ export default {
 
                 } else {
                     parent.postMessage({ 
-                        type: 'itemCreationMessage',
+                        type: 'itemEditionMessage',
-                        itemId: this.item.id,
+                        item: this.item
-                        itemTitle: this.item.title,
-                        itemThumbnail: this.item.thumbnail
                     },
                     tainacan_plugin.admin_url);
                 }
@@ -1206,10 +1287,8 @@ export default {
                 this.$router.go(-1);
             else
                 parent.postMessage({ 
-                        type: 'itemCreationMessage',
+                        type: 'itemEditionMessage',
-                        itemId: null,
+                        item: null
-                        itemTitle: null,
-                        itemThumbnail: null
                     },
                     tainacan_plugin.admin_url);
 
@@ -1343,7 +1422,17 @@ export default {
             this.isURLModalActive = false;
             this.form.document_type = 'url';
             this.form.document = this.urlLink;
-            this.updateItemDocument({ item_id: this.itemId, document: this.form.document, document_type: this.form.document_type })
+            this.form.document_options = {
+                forced_iframe: this.urlForcedIframe,
+                forced_iframe_width: this.urlIframeWidth,
+                forced_iframe_height: this.urlIframeHeight
+            }
+            this.updateItemDocument({
+                    item_id: this.itemId,
+                    document: this.form.document,
+                    document_type: this.form.document_type,
+                    document_options: this.form.document_options
+                })
                 .then(item => {
                     this.item.document_as_html = item.document_as_html;
                     this.item.document_mimetype = item.document_mimetype;
@@ -1370,6 +1459,9 @@ export default {
         cancelURLSelection() {
             this.isURLModalActive = false;
             this.urlLink = '';
+            this.urlForcedIframe = this.form.document_options && this.form.document_options['forced_iframe'] !== undefined ? this.form.document_options['forced_iframe'] : false;
+            this.urlIframeWidth = this.form.document_options && this.form.document_options['forced_iframe_width'] !== undefined ? this.form.document_options['forced_iframe_width'] : 600;
+            this.urlIframeHeight = this.form.document_options && this.form.document_options['forced_iframe_height'] !== undefined ? this.form.document_options['forced_iframe_height'] : 450;
         },
         removeDocument() {
             this.textContent = '';
@@ -1580,7 +1672,7 @@ export default {
             this.fetchItem({
                 itemId: this.itemId,
                 contextEdit: true,
-                fetchOnly: 'title,thumbnail,status,modification_date,document_type,document,comment_status,document_as_html,related_items'
+                fetchOnly: 'title,thumbnail,status,modification_date,document_type,document,comment_status,document_as_html,document_options,related_items'
             })
             .then((resp) => {
                 resp.request.then((res) => {
@@ -1616,6 +1708,7 @@ export default {
                     this.form.status = this.item.status;
                     this.form.document = this.item.document;
                     this.form.document_type = this.item.document_type;
+                    this.form.document_options = this.item.document_options;
                     this.form.comment_status = this.item.comment_status;
                     this.form.thumbnail_id = this.item.thumbnail_id;
                     this.form.thumbnail_alt = this.item.thumbnail_alt;
@@ -1625,6 +1718,13 @@ export default {
                     if (this.form.document_type != undefined && this.form.document_type == 'text')
                         this.textContent = this.form.document;
 
+                    if (this.form.document_options !== undefined && this.form.document_options['forced_iframe'] !== undefined)
+                        this.urlForcedIframe = this.form.document_options['forced_iframe'];
+                    if (this.form.document_options !== undefined && this.form.document_options['forced_iframe_width'] !== undefined)
+                        this.urlIframeWidth = this.form.document_options['forced_iframe_width'];
+                    if (this.form.document_options !== undefined && this.form.document_options['forced_iframe_height'] !== undefined)
+                        this.urlIframeHeight = this.form.document_options['forced_iframe_height'];
+
                     if (this.item.status == 'publish' || this.item.status == 'private')
                         this.visibility = this.item.status;
 
@@ -1736,56 +1836,94 @@ export default {
                 background-color: var(--tainacan-secondary);
                 width: 100%;
             }
+
+            @media screen and (max-width: 769px) {
+                padding: 0 0.5em;
+            }
         }
 
         .tainacan-form > .columns {
             margin-left: var(--tainacan-one-column);
             margin-right: var(--tainacan-one-column);
-        }
 
-        .column.is-5 {
+            .column.is-5 {
-            padding-left: var(--tainacan-one-column);
+                padding-left: var(--tainacan-one-column);
-            padding-right: var(--tainacan-one-column);
+                padding-right: var(--tainacan-one-column);
 
-            .sticky-container {
+                .sticky-container {
-                position: relative;
+                    position: relative;
-                position: sticky;
+                    position: sticky;
-                top: -25px;
+                    top: -25px;
-                margin: 3px 0;
+                    margin: 3px 0;
-                max-height: calc(100vh - 202px);
+                    max-height: calc(100vh - 202px);
-                overflow-y: auto;
+                    overflow-y: auto;
-                overflow-x: hidden;
+                    overflow-x: hidden;
+                }
             }
+            .column.is-7 {
+                padding-left: var(--tainacan-one-column);
+                padding-right: 0;
 
-            @media screen and (max-width: 769px) {
+                .columns {
-                max-width: 100%;
+                    flex-wrap: wrap;
-            }
+                    justify-content: space-between;
-        }
-        .column.is-7 {
-            padding-left: var(--tainacan-one-column);
-            padding-right: 0;
 
-            .columns {
+                    .column {
-                flex-wrap: wrap;
+                        padding: 1em 12px 0 12px;
-                justify-content: space-between;
+                    }
+                }
 
-                .column {
+                .field {
-                    padding: 1em 12px 0 12px;
+                    padding: 12px 0px 12px 60px;
+                }
+                .tab-item>.field:last-child {
+                    margin-bottom: 187px;
+                }
+
+                @media screen and (max-width: 769px) {
+                    padding-right: var(--tainacan-one-column);
+                    max-width: 100%;
                 }
             }
 
-            .field {
-                padding: 12px 0px 12px 60px;
-            }
-            .tab-item>.field:last-child {
-                margin-bottom: 187px;
-            }
-
             @media screen and (max-width: 769px) {
-                padding-right: var(--tainacan-one-column);
+                margin-left: 0;
-                max-width: 100%;
+                margin-right: 0;
+                display: flex;
+                flex-direction: column-reverse;
+
+                &>.column.is-7 {
+                    padding-left: 0;
+                    padding-right: 0;
+                    max-width: 100%;
+                    widows: 100%;
+
+                    .field {
+                        padding-left: 16px;
+                        
+                        /deep/ .label {
+                            margin-left: 0;
+                        }
+                        /deep/ .collapse-handle {
+                            margin-left: -24px;
+                        }
+                    }
+                    .tab-item>.field:last-child {
+                        margin-bottom: 24px;
+                    }
+                    &>.columns {
+                        display: flex;
+                    }
+                }
+                &>.column.is-5 {
+                    max-width: 100%;
+                    widows: 100%;
+                    padding-left: 0.5em;
+                    padding-right: 0.5em;
+                }
             }
         }
+
         .b-tabs {
             overflow: hidden !important;
         }
@@ -1819,10 +1957,9 @@ export default {
     }
 
     .section-box {
-        background-color: var(--tainacan-background-color);
         padding: 0 var(--tainacan-one-column) 0 0;
         margin-top: 12px;
-        margin-bottom: 18px;
+        margin-bottom: 16px;
 
         ul {
             display: flex;
@@ -1881,8 +2018,8 @@ export default {
     #button-edit-thumbnail,
     #button-edit-document,
     #button-delete-thumbnail,
+    #button-alt-text-thumbnail,
     #button-delete-document {
-
         border-radius: 100px !important;
         max-height: 2.125em !important;
         max-width: 2.125em !important;
@@ -1890,7 +2027,7 @@ export default {
         min-width: 2.125em !important;
         padding: 0 !important;
         z-index: 99;
-        margin-left: 12px !important;
+        margin-left: 6px !important;
 
         .icon {
             display: inherit;
@@ -1926,7 +2063,7 @@ export default {
 
         .thumbnail-buttons-row {
             position: relative;
-            left: 61px;
+            left: 33px;
             bottom: 1.25em;
         }
 
@@ -2033,6 +2170,27 @@ export default {
                 color: var(--tainacan-secondary) !important;
             }
         }
+
+        @media screen and (max-width: 769px) {
+            padding: 16px 0.5em;
+            flex-wrap: wrap;
+            height: auto;
+
+            .update-info-section {
+                margin-left: auto;
+                margin-bottom: 0.5em;
+            }
+            .form-submission-footer {
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+
+                .button {
+                    margin-left: 2px;
+                    margin-right: 2px;
+                }
+            }
+        }
     }
 
 </style>

src/views/admin/components/edition/metadatum-edition-form.vue

@@ -1,275 +1,327 @@
 <template>
-    <form
+<form
-            id="metadatumEditForm"
+        id="metadatumEditForm"
-            class="tainacan-form"
+        @submit.prevent="saveEdition(editForm)"
-            :class="{ 'inCollapse': !isOnModal }"
+        autofocus="true"
-            @submit.prevent="saveEdition(editForm)">
+        tabindex="-1"
-        <div class="options-columns">
+        role="dialog"
-            <b-field
+        aria-modal>
-                    :addons="false"
+    <div 
-                    :type="formErrors['name'] != undefined ? 'is-danger' : ''"
+            v-if="editForm && Object.keys(editForm).length"
-                    :message="formErrors['name'] != undefined ? formErrors['name'] : ''">
+            class="tainacan-modal-content">
-                <label class="label is-inline-block">
+        <div class="tainacan-modal-title">
-                    {{ $i18n.get('label_name') }}
+            <h2 v-html="editForm.name ? ($i18n.get('instruction_configure_the_metadatum') + ' <em>' + editForm.name + '</em>') : $i18n.get('instruction_configure_new_metadatum')" />
-                    <span
+            <!-- <a 
-                            class="required-metadatum-asterisk"
+                    class="back-link" 
-                            :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
+                    @click="onEditionCanceled()">
-                    <help-button
+                {{ $i18n.get('back') }}
-                            :title="$i18n.getHelperTitle('metadata', 'name')"
+            </a> -->
-                            :message="$i18n.getHelperMessage('metadata', 'name')"/>
+            <hr>
-                </label>
-                <b-input
-                        v-model="editForm.name"
-                        name="name"
-                        @focus="clearErrors('name')"/>
-            </b-field>
-
-            <!-- Hook for extra Form options -->
-            <template 
-                    v-if="formHooks != undefined && 
-                        formHooks['metadatum'] != undefined &&
-                        formHooks['metadatum']['begin-left'] != undefined">  
-                <form 
-                    id="form-metadatum-begin-left"
-                    class="form-hook-region"
-                    v-html="formHooks['metadatum']['begin-left'].join('')"/>
-            </template>
-
-            <b-field
-                    :addons="false"
-                    :type="formErrors['description'] != undefined ? 'is-danger' : ''"
-                    :message="formErrors['description'] != undefined ? formErrors['description'] : ''">
-                <label class="label is-inline-block">
-                    {{ $i18n.get('label_description') }}
-                    <help-button
-                            :title="$i18n.getHelperTitle('metadata', 'description')"
-                            :message="$i18n.getHelperMessage('metadata', 'description')"/>
-                </label>
-                <b-input
-                        type="textarea"
-                        name="description"
-                        rows="3"
-                        v-model="editForm.description"
-                        @focus="clearErrors('description')"/>
-            </b-field>
-                
-            <b-field
-                    :addons="false">
-                <label class="label is-inline-block">
-                    {{ $i18n.get('label_semantic_uri') }}
-                    <help-button
-                            :title="$i18n.getHelperTitle('metadata', 'semantic_uri')"
-                            :message="$i18n.getHelperMessage('metadata', 'semantic_uri')"/>
-                </label>
-                <b-input
-                        v-model="editForm.semantic_uri"
-                        name="semantic_uri"
-                        type="url"
-                        @focus="clearErrors('semantic_uri')"/>
-            </b-field>
-
-            <b-field
-                    v-if="editedMetadatum.parent == 0"
-                    :addons="false"
-                    :type="formErrors['status'] != undefined ? 'is-danger' : ''"
-                    :message="formErrors['status'] != undefined ? formErrors['status'] : ''">
-                <label class="label is-inline-block">
-                    {{ $i18n.get('label_status') }}
-                    <help-button
-                            :title="$i18n.getHelperTitle('metadata', 'status')"
-                            :message="$i18n.getHelperMessage('metadata', 'status')"/>
-                </label>
-                <b-field>
-                    <b-radio
-                            @focus="clearErrors('label_status')"
-                            id="tainacan-select-status-publish"
-                            name="status"
-                            v-model="editForm.status"
-                            native-value="publish">
-                        <span class="icon has-text-gray3">
-                            <i class="tainacan-icon tainacan-icon-public"/>
-                        </span>
-                        {{ $i18n.get('status_public') }}
-                    </b-radio>
-                </b-field>
-                <b-field>
-                    <b-radio
-                            @focus="clearErrors('label_status')"
-                            id="tainacan-select-status-private"
-                            name="status"
-                            v-model="editForm.status"
-                            native-value="private">
-                        <span class="icon has-text-gray3">
-                            <i class="tainacan-icon tainacan-icon-private"/>
-                        </span>
-                        {{ $i18n.get('status_private') }}
-                    </b-radio>
-                </b-field>
-            </b-field>
-
-            <!-- Display on listing -->
-            <b-field
-                    v-if="editedMetadatum.parent == 0"
-                    :type="formErrors['display'] != undefined ? 'is-danger' : ''"
-                    :message="formErrors['display'] != undefined ? formErrors['display'] : ''" 
-                    :addons="false">
-                <label class="label is-inline-block">
-                    {{ $i18n.get('label_display') }}
-                    <help-button
-                            :title="$i18n.getHelperTitle('metadata', 'display')"
-                            :message="$i18n.getHelperMessage('metadata', 'display')"/>
-                </label>
-
-                <b-field>
-                    <b-radio
-                            @input="clearErrors('display')"
-                            v-model="editForm.display"
-                            native-value="yes"
-                            name="display">
-                        {{ $i18n.get('label_display_default') }}
-                    </b-radio>
-                </b-field>
-
-                <b-field>
-                    <b-radio
-                            @input="clearErrors('display')"
-                            v-model="editForm.display"
-                            native-value="no"
-                            name="display">
-                        {{ $i18n.get('label_not_display') }}
-                    </b-radio>
-                </b-field>
-
-                <b-field>
-                    <b-radio
-                            v-model="editForm.display"
-                            @input="clearErrors('display')"
-                            native-value="never"
-                            name="display">
-                        {{ $i18n.get('label_display_never') }}
-                    </b-radio>
-                </b-field>
-
-            </b-field>
-
-            <b-field 
-                    :addons="false">
-                <label class="label is-inline-block">{{ $i18n.get('label_insert_options') }}</label>
-                
-                <b-field
-                        v-if="editedMetadatum.metadata_type_object.component != 'tainacan-compound' && (editedMetadatum.parent == 0 || (editedMetadatum.parent != 0 && !isParentMultiple))"
-                        :type="formErrors['required'] != undefined ? 'is-danger' : ''"
-                        :message="formErrors['required'] != undefined ? formErrors['required'] : ''">
-                    <b-checkbox
-                            @input="clearErrors('required')"
-                            v-model="editForm.required"
-                            true-value="yes"
-                            false-value="no"
-                            class="is-inline-block"
-                            name="required">
-                        {{ $i18n.get('label_required') }}
-                        <help-button
-                                :title="$i18n.getHelperTitle('metadata', 'required')"
-                                :message="$i18n.getHelperMessage('metadata', 'required')"/>
-                    </b-checkbox>
-                </b-field>
-
-                <b-field
-                        v-if="!originalMetadatum.metadata_type_object.core && editedMetadatum.parent == 0"
-                        :type="formErrors['multiple'] != undefined ? 'is-danger' : ''"
-                        :message="formErrors['multiple'] != undefined ? formErrors['multiple'] : ''">
-                    <b-checkbox
-                            @input="clearErrors('multiple')"
-                            v-model="editForm.multiple"
-                            true-value="yes"
-                            false-value="no"
-                            class="is-inline-block"
-                            name="multiple">
-                        {{ $i18n.get('label_allow_multiple') }}
-                        <help-button
-                                :title="$i18n.getHelperTitle('metadata', 'multiple')"
-                                :message="$i18n.getHelperMessage('metadata', 'multiple')"/>
-                    </b-checkbox>    
-                </b-field>
-
-                <b-field
-                        v-if="editedMetadatum.metadata_type_object.component != 'tainacan-compound'"
-                        :type="formErrors['collection_key'] != undefined ? 'is-danger' : ''"
-                        :message="formErrors['collection_key'] != undefined ? formErrors['collection_key'] : ''">
-                    <b-checkbox
-                            @input="clearErrors('collection_key')"
-                            v-model="editForm.collection_key"
-                            true-value="yes"
-                            false-value="no"
-                            class="is-inline-block"
-                            name="collecion_key">
-                        {{ $i18n.get('label_unique_value') }}
-                        <help-button
-                                :title="$i18n.getHelperTitle('metadata', 'collection_key')"
-                                :message="$i18n.getHelperMessage('metadata', 'collection_key')"/>
-                    </b-checkbox>
-                </b-field>
-
-                <b-field
-                  v-if="!isRepositoryLevel && isOnModal"
-                >
-                  <b-checkbox
-                      class="is-inline-block"
-                      v-model="editForm.repository_level"
-                      @input="clearErrors('repository_level')"
-                      name="repository_level"
-                      true-value="yes"
-                      false-value="no"
-                  >
-                    {{ $i18n.get('label_repository_metadata') }}
-                    <help-button
-                                :title="$i18n.getHelperTitle('metadata', 'repository_level')"
-                                :message="$i18n.getHelperMessage('metadata', 'repository_level')"/>
-                  </b-checkbox>
-                </b-field>
-            </b-field>
-
-            <component
-                    :errors="formErrors['metadata_type_options']"
-                    v-if="(editForm.metadata_type_object && editForm.metadata_type_object.form_component) || editForm.edit_form == ''"
-                    :is="editForm.metadata_type_object.form_component"
-                    :metadatum="editForm"
-                    v-model="editForm.metadata_type_options"/>
-            <div
-                    v-html="editForm.edit_form"
-                    v-else/>
-
-            <!-- Hook for extra Form options -->
-            <template 
-                    v-if="formHooks != undefined && 
-                        formHooks['metadatum'] != undefined &&
-                        formHooks['metadatum']['end-left'] != undefined">  
-                <form 
-                    id="form-metadatum-end-left"
-                    class="form-hook-region"
-                    v-html="formHooks['metadatum']['end-left'].join('')"/>
-            </template>
         </div>
-        <div class="field is-grouped form-submit">
+        <div class="tainacan-form">
-            <div class="control">
+            <div class="options-columns">
-                <button
+                <b-field
-                        type="button"
+                        :addons="false"
-                        class="button is-outlined"
+                        :type="formErrors['name'] != undefined ? 'is-danger' : ''"
-                        @click.prevent="cancelEdition()"
+                        :message="formErrors['name'] != undefined ? formErrors['name'] : ''">
-                        slot="trigger">{{ $i18n.get('cancel') }}
+                    <label class="label is-inline-block">
-                </button>
+                        {{ $i18n.get('label_name') }}
+                        <span
+                                class="required-metadatum-asterisk"
+                                :class="formErrors['name'] != undefined ? 'is-danger' : ''">*</span>
+                        <help-button
+                                :title="$i18n.getHelperTitle('metadata', 'name')"
+                                :message="$i18n.getHelperMessage('metadata', 'name')"/>
+                    </label>
+                    <b-input
+                            v-model="editForm.name"
+                            name="name"
+                            @focus="clearErrors('name')"/>
+                </b-field>
+
+                <!-- Hook for extra Form options -->
+                <template 
+                        v-if="formHooks != undefined && 
+                            formHooks['metadatum'] != undefined &&
+                            formHooks['metadatum']['begin-left'] != undefined">  
+                    <form 
+                        id="form-metadatum-begin-left"
+                        class="form-hook-region"
+                        v-html="formHooks['metadatum']['begin-left'].join('')"/>
+                </template>
+
+                <b-field
+                        :addons="false"
+                        :type="formErrors['description'] != undefined ? 'is-danger' : ''"
+                        :message="formErrors['description'] != undefined ? formErrors['description'] : ''">
+                    <label class="label is-inline-block">
+                        {{ $i18n.get('label_description') }}
+                        <help-button
+                                :title="$i18n.getHelperTitle('metadata', 'description')"
+                                :message="$i18n.getHelperMessage('metadata', 'description')"/>
+                    </label>
+                    <b-input
+                            type="textarea"
+                            name="description"
+                            rows="3"
+                            v-model="editForm.description"
+                            @focus="clearErrors('description')"/>
+                </b-field>
+
+                <b-field
+                        v-if="editForm.parent == 0"
+                        :addons="false"
+                        :type="formErrors['status'] != undefined ? 'is-danger' : ''"
+                        :message="formErrors['status'] != undefined ? formErrors['status'] : ''">
+                    <label class="label is-inline-block">
+                        {{ $i18n.get('label_status') }}
+                        <help-button
+                                :title="$i18n.getHelperTitle('metadata', 'status')"
+                                :message="$i18n.getHelperMessage('metadata', 'status')"/>
+                    </label>
+                    <div class="is-flex is-justify-content-space-between">
+                        <b-radio
+                                @focus="clearErrors('label_status')"
+                                id="tainacan-select-status-publish"
+                                name="status"
+                                v-model="editForm.status"
+                                native-value="publish">
+                            <span class="icon has-text-gray3">
+                                <i class="tainacan-icon tainacan-icon-public"/>
+                            </span>
+                            {{ $i18n.get('status_public') }}
+                        </b-radio>
+                        <b-radio
+                                @focus="clearErrors('label_status')"
+                                id="tainacan-select-status-private"
+                                name="status"
+                                v-model="editForm.status"
+                                native-value="private">
+                            <span class="icon has-text-gray3">
+                                <i class="tainacan-icon tainacan-icon-private"/>
+                            </span>
+                            {{ $i18n.get('status_private') }}
+                        </b-radio>
+                    </div>
+                </b-field>
+
+                <!-- Display on listing -->
+                <b-field
+                        v-if="editForm.parent == 0"
+                        :type="formErrors['display'] != undefined ? 'is-danger' : ''"
+                        :message="formErrors['display'] != undefined ? formErrors['display'] : ''" 
+                        :addons="false">
+                    <label class="label is-inline-block">
+                        {{ $i18n.get('label_display') }}
+                        <help-button
+                                :title="$i18n.getHelperTitle('metadata', 'display')"
+                                :message="$i18n.getHelperMessage('metadata', 'display')"/>
+                    </label>
+                    <b-select 
+                            expanded
+                            v-model="editForm.display"
+                            @input="clearErrors('display')">
+                        <option value="yes">
+                            {{ $i18n.get('label_display_default') }}
+                        </option>
+                        <option value="no">
+                            {{ $i18n.get('label_not_display') }}
+                        </option>
+                        <option value="never">
+                            {{ $i18n.get('label_display_never') }}
+                        </option>
+                    </b-select>
+                </b-field>
+
+                <b-field 
+                        :addons="false">
+                    <label class="label is-inline-block">{{ $i18n.get('label_insert_options') }}</label>
+                    
+                    <b-field
+                            v-if="editForm.metadata_type_object.component != 'tainacan-compound' && (editForm.parent == 0 || (editForm.parent != 0 && !isParentMultiple))"
+                            :type="formErrors['required'] != undefined ? 'is-danger' : ''"
+                            :message="formErrors['required'] != undefined ? formErrors['required'] : ''">
+                        <b-checkbox
+                                @input="clearErrors('required')"
+                                v-model="editForm.required"
+                                true-value="yes"
+                                false-value="no"
+                                class="is-inline-block"
+                                name="required">
+                            {{ $i18n.get('label_required') }}
+                            <help-button
+                                    :title="$i18n.getHelperTitle('metadata', 'required')"
+                                    :message="$i18n.getHelperMessage('metadata', 'required')"/>
+                        </b-checkbox>
+                    </b-field>
+
+                    <b-field
+                            v-if="editForm.metadata_type_object.component != 'tainacan-compound'"
+                            :type="formErrors['collection_key'] != undefined ? 'is-danger' : ''"
+                            :message="formErrors['collection_key'] != undefined ? formErrors['collection_key'] : ''">
+                        <b-checkbox
+                                @input="clearErrors('collection_key')"
+                                v-model="editForm.collection_key"
+                                true-value="yes"
+                                false-value="no"
+                                class="is-inline-block"
+                                name="collecion_key">
+                            {{ $i18n.get('label_unique_value') }}
+                            <help-button
+                                    :title="$i18n.getHelperTitle('metadata', 'collection_key')"
+                                    :message="$i18n.getHelperMessage('metadata', 'collection_key')"/>
+                        </b-checkbox>
+                    </b-field>
+
+                    <b-field
+                            v-if="!originalMetadatum.metadata_type_object.core && editForm.parent == 0"
+                            :type="formErrors['multiple'] != undefined ? 'is-danger' : ''"
+                            :message="formErrors['multiple'] != undefined ? formErrors['multiple'] : ''">
+                        <b-checkbox
+                                @input="clearErrors('multiple')"
+                                v-model="editForm.multiple"
+                                true-value="yes"
+                                false-value="no"
+                                class="is-inline-block"
+                                name="multiple">
+                            {{ $i18n.get('label_allow_multiple') }}
+                            <help-button
+                                    :title="$i18n.getHelperTitle('metadata', 'multiple')"
+                                    :message="$i18n.getHelperMessage('metadata', 'multiple')"/>
+                        </b-checkbox>
+                        
+                    </b-field>
+                </b-field>
+
+                <b-field
+                        v-if="!originalMetadatum.metadata_type_object.core && editForm.parent == 0"
+                        :type="formErrors['cardinality'] != undefined ? 'is-danger' : ''"
+                        :message="formErrors['cardinality'] != undefined ? formErrors['cardinality'] : ''"
+                        :addons="false">
+                    <label class="label is-inline-block">
+                        {{ $i18n.getHelperTitle('metadata', 'cardinality') }}
+                        <help-button
+                                :title="$i18n.getHelperTitle('metadata', 'cardinality')"
+                                :message="$i18n.getHelperMessage('metadata', 'cardinality')"/>
+                    </label>
+                    <b-input
+                            :disabled="editForm.multiple != 'yes'"
+                            name="cardinality"
+                            type="number"
+                            step="1" 
+                            v-model="editForm.cardinality"/>
+                </b-field>
+
+                <b-field v-if="!isRepositoryLevel && isInsideImporterFlow">
+                    <b-checkbox
+                            class="is-inline-block"
+                            v-model="editForm.repository_level"
+                            @input="clearErrors('repository_level')"
+                            name="repository_level"
+                            true-value="yes"
+                            false-value="no">
+                        {{ $i18n.get('label_repository_metadata') }}
+                        <help-button
+                                    :title="$i18n.getHelperTitle('metadata', 'repository_level')"
+                                    :message="$i18n.getHelperMessage('metadata', 'repository_level')"/>
+                    </b-checkbox>
+                </b-field>
             </div>
-            <div class="control">
+
-                <b-button
+            <div 
-                        :loading="isLoading"
+                    v-if="(editForm.metadata_type_object && editForm.metadata_type_object.form_component) || editForm.edit_form != ''"
-                        class="button is-success"
+                    class="metadata-form-section"
-                        native-type="submit">
+                    @click="hideMetadataTypeOptions = !hideMetadataTypeOptions;">
-                    {{ $i18n.get('save') }}
+                <span class="icon">
-                </b-button>
+                    <i 
+                            class="tainacan-icon"
+                            :class="!hideMetadataTypeOptions ? 'tainacan-icon-arrowdown' : 'tainacan-icon-arrowright'" />
+                </span>
+                <strong>{{ $i18n.getWithVariables('label_options_of_the_%s_metadata_type', [ editForm.metadata_type_object.name ]) }}</strong>
+                <hr>
             </div>
+
+            <transition name="filter-item">
+                <div 
+                        v-show="!hideMetadataTypeOptions"
+                        class="options-columns">
+                    <component
+                            :errors="formErrors['metadata_type_options']"
+                            v-if="(editForm.metadata_type_object && editForm.metadata_type_object.form_component) || editForm.edit_form != ''"
+                            :is="editForm.metadata_type_object.form_component"
+                            :metadatum="editForm"
+                            v-model="editForm.metadata_type_options"/>
+                    <div
+                            v-html="editForm.edit_form"
+                            v-else/>
+
+                    <!-- Hook for extra Form options -->
+                    <template 
+                            v-if="formHooks != undefined && 
+                                formHooks['metadatum'] != undefined &&
+                                formHooks['metadatum']['end-left'] != undefined">  
+                        <form 
+                            id="form-metadatum-end-left"
+                            class="form-hook-region"
+                            v-html="formHooks['metadatum']['end-left'].join('')"/>
+                    </template>
+                </div>
+            </transition>
+
+             <div 
+                    @click="showAdvancedOptions = !showAdvancedOptions;"
+                    class="metadata-form-section">
+                <span class="icon">
+                    <i 
+                            class="tainacan-icon"
+                            :class="showAdvancedOptions ? 'tainacan-icon-arrowdown' : 'tainacan-icon-arrowright'" />
+                </span>
+                <strong>{{ $i18n.get('label_advanced_metadata_options') }}</strong>
+                <hr>
+
+            </div>
+            
+            <transition name="filter-item">
+                <div 
+                        v-if="showAdvancedOptions"
+                        class="options-columns">
+                    <b-field :addons="false">
+                        <label class="label is-inline-block">
+                            {{ $i18n.get('label_semantic_uri') }}
+                            <help-button
+                                    :title="$i18n.getHelperTitle('metadata', 'semantic_uri')"
+                                    :message="$i18n.getHelperMessage('metadata', 'semantic_uri')"/>
+                        </label>
+                        <b-input
+                                v-model="editForm.semantic_uri"
+                                name="semantic_uri"
+                                type="url"
+                                @focus="clearErrors('semantic_uri')"/>
+                    </b-field>
+                </div>
+            </transition>
+        </div>
+    </div>
+    <div class="field is-grouped form-submit">
+        <div class="control">
+            <button
+                    type="button"
+                    class="button is-outlined"
+                    @click.prevent="cancelEdition()"
+                    slot="trigger">{{ $i18n.get('cancel') }}
+            </button>
         </div>
         <p class="help is-danger">{{ formErrorMessage }}</p>
-    </form>
+        <div class="control">
+            <b-button
+                    :loading="isLoading"
+                    class="button is-success"
+                    native-type="submit">
+                {{ $i18n.get('save') }}
+            </b-button>
+        </div>
+    </div>
+</form>
 </template>
 
 <script>
@@ -281,29 +333,32 @@
         mixins: [ formHooks ],
         props: {
             index: '',
-            editedMetadatum: Object,
             originalMetadatum: Object,
             isRepositoryLevel: false,
             collectionId: '',
-            isOnModal: false,
+            isParentMultiple: false,
-            isParentMultiple: false
+            isInsideImporterFlow: false
         },
         data() {
             return {
                 editForm: {},
-                oldForm: {},
                 formErrors: {},
                 formErrorMessage: '',
                 closedByForm: false,
                 entityName: 'metadatum',
-                isUpdating: false
+                isUpdating: false,
+                hideMetadataTypeOptions: false,
+                showAdvancedOptions: false
             }
         },
         created() {
-            this.editForm = this.editedMetadatum;
+            this.editForm = JSON.parse(JSON.stringify(this.originalMetadatum));
+     
+            if (this.editForm.status == 'auto-draft')
+                this.editForm.status = 'publish';
+
             this.formErrors = this.editForm.formErrors != undefined ? this.editForm.formErrors : {};
             this.formErrorMessage = this.editForm.formErrors != undefined ? this.editForm.formErrorMessage : '';
-            this.oldForm = JSON.parse(JSON.stringify(this.originalMetadatum));
         },
         mounted() {
             // Fills hook forms with it's real values 
@@ -312,27 +367,16 @@
                     this.updateExtraFormData(this.editForm);
                 });
         },
-        beforeDestroy() {
-            if (this.closedByForm) {
-                this.editedMetadatum.saved = true;
-            } else {
-                this.$set(this.oldForm, 'saved', this.editForm.saved);
-                if (!_.isEqual(this.editForm, this.oldForm))
-                    this.editedMetadatum.saved = false;
-                else
-                    this.editedMetadatum.saved = true;
-            }
-        },
         methods: {
             ...mapActions('metadata', [
                 'updateMetadatum'
             ]),
-            saveEdition(metadatum) {                
+            saveEdition(metadatum) {
-                if ((metadatum.metadata_type_object && metadatum.metadata_type_object.form_component) || metadatum.edit_form == '') {                    
+
+                if ( (metadatum.metadata_type_object && metadatum.metadata_type_object.form_component) || metadatum.edit_form == '') {
                     let repository = this.editForm.repository_level;
-                    if (repository && repository === 'yes') {                        
+                    if (repository && repository === 'yes')
                         this.isRepositoryLevel = true;
-                    }
 
                     this.fillExtraFormData(this.editForm);
                     this.isUpdating = true;
@@ -361,7 +405,6 @@
                                     this.formErrors[attribute] = error[attribute];
                             }
                             this.formErrorMessage = errors.error_message;
-                            this.$emit('onErrorFound');
 
                             this.editForm.formErrors = this.formErrors;
                             this.editForm.formErrorMessage = this.formErrorMessage;
@@ -424,24 +467,19 @@
 
     form#metadatumEditForm {
 
-        &.inCollapse {
-            padding: 1.5em var(--tainacan-one-column) 0.5em var(--tainacan-one-column);
-            border-top: 1px solid var(--tainacan-gray2);
-            border-bottom: 1px solid var(--tainacan-gray2);
-            margin-top: 1.0em;
-            font-size: 1.1em;
-        }
         .options-columns {
             -moz-column-count: 2;
             -moz-column-gap: 0;
-            -moz-column-rule: none;
+            -moz-column-rule: 1px solid var(--tainacan-gray1);
             -webkit-column-count: 2;
             -webkit-column-gap: 0;
-            -webkit-column-rule: none;
+            -webkit-column-rule: 1px solid var(--tainacan-gray1);
             column-count: 2;
             column-gap: 4em;
-            column-rule: none;
+            column-rule: 1px solid var(--tainacan-gray1);
-            padding-bottom: 0.25em;
+            padding-left: 0.25em;
+            padding-right: 0.25em;
+            padding-bottom: 0.5em;
 
             &>.field, &>section {
                 -webkit-column-break-inside: avoid;
@@ -451,6 +489,14 @@
             .field > .field:not(:last-child) {
                 margin-bottom: 0em;
             }
+            /deep/ .field {
+                -webkit-column-break-inside: avoid;
+                page-break-inside: avoid;
+                break-inside: avoid;
+            }
+            section {
+                display: grid;
+            }
             .field:first-child {
                 -webkit-column-span: all;
                 column-span: all;
@@ -459,10 +505,60 @@
                 font-size: 1.25em;
             }
         }
-
+        .tainacan-form .field:not(:last-child) {
-        .form-submit {
+            margin-bottom: 1em;
-            margin-bottom: 0.75em;
         }
+        .tainacan-form /deep/ .control-label {
+            white-space: normal;
+        }
+        .metadata-form-section {
+            margin: 0.75em 0 0.5em 0;
+            position: relative;
+            cursor: pointer;
+
+            .icon {
+                background: var(--tainacan-background-color);
+                z-index: 1;
+                position: relative;
+            }
+            strong {
+                background: var(--tainacan-background-color);
+                color: var(--tainacan-gray4);
+                font-size: 0.875em;
+                z-index: 1;
+                position: relative;
+                padding-right: 12px;
+            }
+            hr {
+                position: absolute;
+                top: -0.75em;
+                width: calc(100% - 42px);
+                height: 1px;
+                background-color: var(--tainacan-gray2);
+                margin-left: 42px;
+            }
+        }
+        .metadata-form-section+.options-columns {
+            padding-left: 1.75em;
+        }
+
+        @media screen and (max-width: 768px) {
+            .options-columns {
+                -moz-column-count: 1;
+                -webkit-column-count: 1;
+                column-count: 1;
+            }
+        }
+    }
+    .form-submit {
+        background-color: var(--tainacan-gray1);
+        position: sticky;
+        bottom: 0;
+        padding: 16px 4.166666667vw;
+        display: flex;
+        justify-content: space-between;
+        z-index: 2;
+        font-size: 1.125em;
     }
 
 </style>

src/views/admin/components/filter-types/checkbox/Checkbox.vue

@@ -47,7 +47,8 @@
                     :collection-id="collectionId"
                     :metadatum_type="metadatumType"
                     :is-repository-level="isRepositoryLevel"
-                    :query="query" />
+                    :query="query"
+                    :current-collection-id="currentCollectionId" />
         </template>
     </div>
 </template>

src/views/admin/components/filter-types/taxonomy/Checkbox.vue

@@ -55,7 +55,8 @@
                     :taxonomy="taxonomy"
                     :collection-id="collectionId"
                     :is-taxonomy="true"
-                    :query="query" />
+                    :query="query"
+                    :current-collection-id="currentCollectionId" />
         </template>
     </div>
 </template>

src/views/admin/components/lists/related-items-list.vue

@@ -208,7 +208,7 @@
                 const message = event.message ? 'message' : 'data';
                 const data = event[message];
 
-                if (data.type == 'itemCreationMessage') {
+                if (data.type == 'itemEditionMessage') {
                     this.editItemModal = false;
                 }  
             }

src/views/admin/components/metadata-types/compound/Compound.vue

@@ -85,15 +85,15 @@
             class="empty-label">
         {{ $i18n.get('info_no_value_compound_metadata') }}
     </p>
-    <a 
+    <a
-            v-if="isMultiple"
+            v-if="isMultiple && (maxMultipleValues === undefined || maxMultipleValues === 0 || (maxMultipleValues !== 1 && maxMultipleValues > childItemMetadataGroups.length))"
             :disabled="itemMetadatum.item.id && (childItemMetadataGroups.length > 0 && !someValueOnLastInput)"
             @click="addGroup"
             class="is-inline-block add-link">
         <span class="icon is-small">
             <i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
         </span>
-        &nbsp;{{ $i18n.get('label_add_value') }}  
+        &nbsp;{{ $i18n.get('label_add_value') }}
     </a>
 
 </div>
@@ -124,7 +124,10 @@
             },
             someValueOnLastInput() {
                 return this.childItemMetadataGroups && this.childItemMetadataGroups[this.childItemMetadataGroups.length - 1] && this.childItemMetadataGroups[this.childItemMetadataGroups.length - 1].findIndex((childItemMetadatum) => childItemMetadatum.value) >= 0;
-            }
+            },
+            maxMultipleValues() {
+                return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.cardinality && !isNaN(this.itemMetadatum.metadatum.cardinality)) ? this.itemMetadatum.metadatum.cardinality : undefined;
+            },
         },
         watch: {
             /*  This will create the input object structure for 
@@ -356,5 +359,21 @@
             font-size: 0.875em;
             font-style: italic;
         }
+
+        @media screen and (max-width: 769px) {
+            margin-left: 0px;
+            padding-left: 22px;
+
+            .field {
+                padding-left: 12px;
+                
+                /deep/ .label {
+                    margin-left: 0;
+                }
+                /deep/ .collapse-handle {
+                    margin-left: -28px;
+                }
+            }
+        }
     }
 </style>

src/views/admin/components/metadata-types/compound/child-metadata-list.vue

@@ -66,9 +66,7 @@
                         <i class="tainacan-icon tainacan-icon-18px tainacan-icon-drag"/>
                     </span>
                      
-                    <span 
+                    <span class="metadatum-name">
-                            class="metadatum-name"
-                            :class="{'is-danger': formWithErrors == metadatum.id }">
                             {{ metadatum.name }}
                     </span>
                     <span   
@@ -86,11 +84,6 @@
                                     metadatum.metadata_type_object.related_mapped_prop == 'description'">
                                 {{ $i18n.get('label_core_description') }}
                         </em>
-                        <span 
-                            class="not-saved" 
-                            v-if="(editForms[metadatum.id] != undefined && editForms[metadatum.id].saved != true) || metadatum.status == 'auto-draft'">
-                        {{ $i18n.get('info_not_saved') }}
-                        </span>
                         <span 
                                 v-if="metadatum.status == 'private'"
                                 class="icon"
@@ -182,20 +175,22 @@
                             v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
                             :metadatum="metadatum" />
                 </transition>
-                <transition name="form-collapse">
+                <b-modal 
-                    <div v-if="openedMetadatumId == metadatum.id">
+                        @close="onEditionCanceled()"
-                        <metadatum-edition-form
+                        :active="openedMetadatumId == metadatum.id"
-                                :collection-id="collectionId"
+                        trap-focus
-                                :is-repository-level="isRepositoryLevel"
+                        aria-modal
-                                @onEditionFinished="onEditionFinished()"
+                        aria-role="dialog"
-                                @onEditionCanceled="onEditionCanceled()"
+                        custom-class="tainacan-modal">
-                                @onErrorFound="formWithErrors = metadatum.id"
+                    <metadatum-edition-form
-                                :index="index"
+                            :collection-id="collectionId"
-                                :original-metadatum="metadatum"
+                            :original-metadatum="metadatum"
-                                :edited-metadatum="editForms[metadatum.id]"
+                            :is-parent-multiple="isParentMultiple"
-                                :is-parent-multiple="isParentMultiple"/>
+                            :is-repository-level="isRepositoryLevel"
-                    </div>
+                            @onEditionFinished="onEditionFinished()"
-                </transition>
+                            @onEditionCanceled="onEditionCanceled()"
+                            :index="index" />
+                </b-modal>
             </div>
         </draggable>
     </div>
@@ -236,9 +231,7 @@
                 isLoadingMetadata: false,
                 isUpdatingMetadataOrder: false,
                 openedMetadatumId: '',
-                formWithErrors: '',
                 hightlightedMetadatum: '',
-                editForms: {},
                 metadataSearchCancel: undefined,
                 childrenMetadata: [],
                 collapses: {}
@@ -269,33 +262,6 @@
                 this.childrenMetadata.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed));
             }
         },
-        beforeRouteLeave ( to, from, next ) {
-            
-            let hasUnsavedForms = false;
-            for (let editForm in this.editForms) {
-                if (!this.editForms[editForm].saved) 
-                    hasUnsavedForms = true;
-            }
-            if ((this.openedMetadatumId != '' && this.openedMetadatumId != undefined) || hasUnsavedForms ) {
-                this.$buefy.modal.open({
-                    parent: this,
-                    component: CustomDialog,
-                    props: {
-                        icon: 'alert',
-                        title: this.$i18n.get('label_warning'),
-                        message: this.$i18n.get('info_warning_metadata_not_saved'),
-                        onConfirm: () => {
-                            this.onEditionCanceled();
-                            next();
-                        },
-                    },
-                    trapFocus: true,
-                    customClass: 'tainacan-modal'
-                });  
-            } else {
-                next();
-            }  
-        },
         mounted() {
             if (this.isRepositoryLevel)
                 this.collectionId = 'default';
@@ -400,34 +366,12 @@
             },
             editMetadatum(metadatum) {
                 this.openedMetadatumId = metadatum.id;
-
-                // Scroll to opened metadata form
-                this.$nextTick(() => { 
-                    if (this.$refs['metadatum-handler-' + metadatum.id] && this.$refs['metadatum-handler-' + metadatum.id][0])
-                        this.$refs['metadatum-handler-' + metadatum.id][0].scrollIntoView({ behavior: 'smooth', block: 'start' });
-                });
-
-                // First time opening
-                if (this.editForms[this.openedMetadatumId] == undefined) {
-                    this.editForms[this.openedMetadatumId] = JSON.parse(JSON.stringify(metadatum));
-                    this.editForms[this.openedMetadatumId].saved = true;
-
-                    // Metadatum inserted now
-                    if (this.editForms[this.openedMetadatumId].status == 'auto-draft') {
-                        this.editForms[this.openedMetadatumId].status = 'publish';
-                        this.editForms[this.openedMetadatumId].saved = false;
-                    }
-                }      
             },
             onEditionFinished() {
-                this.formWithErrors = '';
-                delete this.editForms[this.openedMetadatumId];
                 this.openedMetadatumId = '';
                 this.$router.push({ query: {}});
             },
             onEditionCanceled() {
-                this.formWithErrors = '';
-                delete this.editForms[this.openedMetadatumId];
                 this.openedMetadatumId = '';
                 this.$router.push({ query: {}});
             },

src/views/admin/components/metadata-types/compound/class-tainacan-compound.php

@@ -231,7 +231,20 @@ class Compound extends Metadata_Type {
 	private function get_meta_html(Item_Metadata_Entity $meta) {
 		$html = '';
 		if ($meta instanceof Item_Metadata_Entity && !empty($meta->get_value_as_html())) {
-			$html = '<div class="tainacan-metadatum"><label class="label">' . $meta->get_metadatum()->get_name() . '</label> <p>' . $meta->get_value_as_html() . "</p></div>";
+			ob_start();
+			?>
+				<div class="tainacan-metadatum">
+					<h4 class="label">
+						<?php echo $meta->get_metadatum()->get_name(); ?>
+					</h4>
+					<p>
+						<?php echo $meta->get_value_as_html(); ?>
+					</p>
+				</div>
+			<?php
+			$html = ob_get_contents();
+			ob_end_clean();
+
 		}
 
 		return $html;

src/views/admin/components/metadata-types/relationship/FormRelationship.vue

@@ -32,6 +32,8 @@
             <div
                 v-if="loadingMetadata"
                 class="loading-spinner"/>
+        </transition>
+        <transition name="filter-item">
             <b-field
                     v-if="hasMetadata"
                     :addons="false">
@@ -55,6 +57,37 @@
                 </b-select>
             </b-field>
         </transition>
+        <transition name="filter-item">
+            <b-field 
+                    v-if="hasMetadata"
+                    :addons="false">
+                <label class="label">
+                    {{ $i18n.getHelperTitle('tainacan-relationship', 'display_related_item_metadata') }}
+                    <help-button
+                            :title="$i18n.getHelperTitle('tainacan-relationship', 'display_related_item_metadata')"
+                            :message="$i18n.getHelperMessage('tainacan-relationship', 'display_related_item_metadata')"/>
+                </label>
+                <div :class="'displayed-metadata-options' + (metadata.length > 5 ? ' has-more-than-5-metadata' : '')">
+                    <b-checkbox
+                            native-value="thumbnail"
+                            name="metadata_type_relationship[display_related_item_metadata]"
+                            @input="emitValues()"
+                            v-model="displayRelatedItemMetadata">
+                        {{ $i18n.get('label_thumbnail') }}
+                    </b-checkbox>
+                    <b-checkbox
+                            v-for="(metadatumOption, index) in metadata"
+                            :key="index"
+                            :native-value="metadatumOption.id"
+                            name="metadata_type_relationship[display_related_item_metadata]"
+                            @input="emitValues()"
+                            v-model="displayRelatedItemMetadata"
+                            :disabled="metadatumOption.id == modelSearch">
+                        {{ metadatumOption.name }}
+                    </b-checkbox>
+                </div>
+            </b-field>
+        </transition>
 
         <b-field
                 :addons="false"
@@ -97,7 +130,8 @@
                 modelDisplayInRelatedItems: 'no',
                 modelSearch:'',
                 collectionType: '',
-                collectionMessage: ''
+                collectionMessage: '',
+                displayRelatedItemMetadata: []
             }
         },
         computed: {
@@ -124,28 +158,30 @@
                 }
             },
             modelSearch( value ){
-                this.modelSearch = value;
+                if ( !this.displayRelatedItemMetadata.includes(value) )
+                    this.displayRelatedItemMetadata.push(value);
                 this.emitValues();
             }
         },
         created(){
-           this.fetchCollections().then(() => {
+            this.fetchCollections().then(() => {
-               if( this.collection_id && this.collection_id !== '' ){
+                if( this.collection_id && this.collection_id !== '' ){
-                   this.collection = this.collection_id;
+                    this.collection = this.collection_id;
-               } else if ( this.value ) {
+                } else if ( this.value ) {
-                   this.collection = this.value.collection_id;
+                    this.collection = this.value.collection_id;
-               }
+                }
-           });
+            });
 
-           this.modelDisplayInRelatedItems = this.value && this.value.display_in_related_items ? this.value.display_in_related_items : 'no';
+            this.displayRelatedItemMetadata = this.value && this.value.display_related_item_metadata && Array.isArray(this.value.display_related_item_metadata) ? this.value.display_related_item_metadata : [];
+            this.modelDisplayInRelatedItems = this.value && this.value.display_in_related_items ? this.value.display_in_related_items : 'no';
         },
-        methods:{
+        methods: {
             setErrorsAttributes( type, message ){
                 this.collectionType = type;
                 this.collectionType = message;
             },
-            fetchCollections(){
+            async fetchCollections(){
-                return axios.get('/collections?nopaging=1')
+                return await axios.get('/collections?nopaging=1')
                     .then(res => {
                         const collections = res.data;
 
@@ -169,14 +205,13 @@
                             this.metadata = [];
 
                             for (let metadatum of metadata) {
-                                
                                if (metadatum.metadata_type_object.component !== 'tainacan-relationship' && metadatum.metadata_type_object.component !== 'tainacan-compound') {
                                    this.metadata.push( metadatum );
                                    this.hasMetadata = true;
-                                   this.checkMetadata()
+                                   this.checkMetadata();
                                }
                             }
-
+                    
                             if (this.metadata.length <= 0) {
                                 this.$buefy.toast.open({
                                     duration: 4000,
@@ -225,7 +260,8 @@
                 this.$emit('input',{
                     collection_id: this.collection,
                     search: this.modelSearch,
-                    display_in_related_items: this.modelDisplayInRelatedItems
+                    display_in_related_items: this.modelDisplayInRelatedItems,
+                    display_related_item_metadata: this.displayRelatedItemMetadata
                 });
             }
         }
@@ -239,4 +275,11 @@
     .switch.is-small {
         margin-top: -0.5em;
     }
+    .displayed-metadata-options.has-more-than-5-metadata {
+        max-height: 125px;
+        overflow-y: auto;
+        border: 1px solid var(--tainacan-gray2);
+        overflow-x: hidden;
+        padding: 6px 12px;
+    }
 </style>

src/views/admin/components/metadata-types/relationship/Relationship.vue

@@ -1,60 +1,118 @@
 <template>
     <div :class="{ 'is-flex is-flex-wrap-wrap': itemMetadatum.metadatum.multiple != 'yes' || maxtags != undefined }">
-        <b-taginput
+        <b-tabs
-                expanded
-                :disabled="disabled"
-                :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
                 size="is-small"
-                icon="magnify"
+                animated
-                :value="selected"
+                v-model="activeTab">
-                @input="onInput"
+            <b-tab-item :label="$i18n.get('label_insert_items')">
-                @blur="onBlur"
+                <b-taginput
-                :data="options"
+                        expanded
-                :maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? null : 1)"
+                        :disabled="disabled"
-                autocomplete
+                        :id="relationshipInputId"
-                :remove-on-keys="[]"
+                        size="is-small"
-                :dropdown-position="isLastMetadatum ? 'top' :'auto'"
+                        icon="magnify"
-                attached
+                        :value="selected"
-                :placeholder="$i18n.get('instruction_type_existing_item')"
+                        @input="onInput"
-                :loading="isLoading"
+                        @blur="onBlur"
-                :aria-close-label="$i18n.get('remove_value')"
+                        @add="onAdd"
-                :class="{'has-selected': selected != undefined && selected != []}"
+                        @remove="onRemove"
-                field="label"
+                        :data="options"
-                @typing="search"
+                        :maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : 1)"
-                check-infinite-scroll
+                        autocomplete
-                @infinite-scroll="searchMore"
+                        :remove-on-keys="[]"
-                :has-counter="false">
+                        :dropdown-position="isLastMetadatum ? 'top' :'auto'"
-            <template slot-scope="props">
+                        attached
-                <div class="media">
+                        :placeholder="$i18n.get('instruction_type_existing_item')"
+                        :loading="isLoading"
+                        :aria-close-label="$i18n.get('remove_value')"
+                        :class="{'has-selected': selected != undefined && selected != []}"
+                        field="label"
+                        @typing="search"
+                        check-infinite-scroll
+                        @infinite-scroll="searchMore"
+                        :has-counter="false">
+                    <template slot-scope="props">
+                        <div 
+                                v-if="!isDisplayingRelatedItemMetadata"
+                                class="media">
+                            <div 
+                                    v-if="props.option.img"
+                                    class="media-left">
+                                <img 
+                                        width="28"
+                                        :src="props.option.img">
+                            </div>
+                            <div class="media-content">
+                                {{ props.option.label }}
+                            </div>
+                        </div>
+                        <div 
+                                v-else
+                                class="tainacan-relationship-group">
+                            <div v-html="props.option.valuesAsHtml" />
+                        </div>
+                    </template>
+                    <template 
+                            v-if="!isLoading"
+                            slot="empty">
+                        {{ $i18n.get('info_no_item_found') }}
+                    </template>
+                    <template
+                            v-if="currentUserCanEditItems && !($route && $route.query.iframemode)" 
+                            slot="footer">
+                        <a @click="editItemModalOpen = true">
+                            {{ $i18n.get('label_crate_new_item') + ' "' + searchQuery + '"' }}
+                        </a>
+                    </template>
+                </b-taginput>
+            </b-tab-item>
+            <b-tab-item
+                    v-if="itemMetadatum"
+                    style="min-height: 56px;"
+                    :label="( itemMetadatum.value.length == 1 || itemMetadatum.metadatum.multiple != 'yes' ) ? $i18n.get('label_selected_item') : ( $i18n.get('label_selected_items') + ' (' + itemMetadatum.value.length + ')' )">
+                <div class="tainacan-relationship-results-container">
                     <div 
-                            v-if="props.option.img"
+                            v-if="itemMetadatum.value && itemMetadatum.value.length"
-                            class="media-left">
+                            class="tainacan-relationship-group">
-                        <img 
+                        <div 
-                                width="28"
+                                v-for="(itemValue, index) of selected"
-                                :src="props.option.img">
+                                :key="index"
+                                style="position: relative;">
+                            <div v-html="itemValue.valuesAsHtml" />
+                            <a 
+                                    v-if="currentUserCanEditItems && $route && !$route.query.iframemode"
+                                    @click="editSelected(itemValue.value)"
+                                    class="relationship-value-button--edit">
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-edit" />
+                                </span>
+                            </a>
+                            <a 
+                                    @click="removeFromSelected(itemValue.value)"
+                                    class="relationship-value-button--remove">
+                                <span class="icon">
+                                    <i class="tainacan-icon tainacan-icon-close" />
+                                </span>
+                            </a>
+                            <span
+                                    v-if="index < selected.length - 1"
+                                    class="multivalue-separator"> | </span>
+                        </div>
                     </div>
-                    <div class="media-content">
+                    <div v-else>
-                        {{ props.option.label }}
+                        <p
+                                class="has-text-gray"
+                                style="font-size: 0.875em;">
+                            {{ $i18n.get('info_no_item_found') }}
+                        </p>
                     </div>
                 </div>
-            </template>
+            </b-tab-item>
-            <template 
+        </b-tabs>
-                    v-if="!isLoading"
-                    slot="empty">
-                {{ $i18n.get('info_no_item_found') }}
-            </template>
-            <template
-                    v-if="currentUserCanEditItems && !($route && $route.query.iframemode)" 
-                    slot="footer">
-                 <a @click="createNewItemModal = true">
-                    {{ $i18n.get('label_crate_new_item') + ' "' + searchQuery + '"' }}
-                </a>
-            </template>
-        </b-taginput>
         <a
-                v-if="currentUserCanEditItems && itemMetadatum.item && itemMetadatum.item.id"
+                v-if="currentUserCanEditItems && itemMetadatum.item && itemMetadatum.item.id && (maxMultipleValues === undefined || maxMultipleValues > selected.length)"
                 :disabled="!$route || $route.query.iframemode"
-                @click="createNewItemModal = !createNewItemModal"
+                @click="editItemModalOpen = !editItemModalOpen"
                 class="add-link">
             <span class="icon is-small">
                 <i class="tainacan-icon has-text-secondary tainacan-icon-add"/>
@@ -63,15 +121,14 @@
         </a>
         <b-modal 
                 :width="1200"
-                :active.sync="createNewItemModal"
+                :active.sync="editItemModalOpen"
-                custom-class="tainacan-modal">
+                :custom-class="'tainacan-modal' + (collection && collection.id ? ' tainacan-modal-item-edition--collection-' + collection.id : '')">
             <iframe 
-                    :id="newItemFrame"
+                    :id="relationshipInputId + '_item-edition-modal'"
                     width="100%"
                     style="height: 85vh"
-                    :src="adminFullURL + $routerHelper.getNewItemPath(collectionId) + '?iframemode=true&newmetadatumid=' + itemMetadatum.metadatum.metadata_type_options.search + '&newitemtitle=' + searchQuery" />
+                    :src="itemModalSrc" />
         </b-modal>
-        
     </div>
 </template>
 
@@ -80,7 +137,7 @@
     import { mapGetters } from 'vuex';
     import qs from 'qs';
 
-    export default {       
+    export default {
         props: {
             itemMetadatum: Object,
             maxtags: undefined,
@@ -95,41 +152,74 @@
                 isLoading: false,
                 collectionId: '',
                 searchQuery: '',
+                editingItemId: '',
                 totalItems: 0,
                 page: 1,
-                createNewItemModal: false,
+                activeTab: 0,
+                editItemModalOpen: false,
                 adminFullURL: tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#',
-                currentUserCanEditItems: false
+                currentUserCanEditItems: false,
+                selectedValuesAsHtml: []
             }
         },
         computed: {
             collection() {
                 return this.getCollection();
+            },
+            maxMultipleValues() {
+                return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.cardinality && !isNaN(this.itemMetadatum.metadatum.cardinality)) ? this.itemMetadatum.metadatum.cardinality : undefined;
+            },
+            itemModalSrc() {
+                if (this.editingItemId)
+                    return this.adminFullURL + this.$routerHelper.getItemEditPath(this.collectionId, this.editingItemId) + '?iframemode=true';
+                else
+                    return this.adminFullURL + this.$routerHelper.getNewItemPath(this.collectionId) + '?iframemode=true&newmetadatumid=' + this.itemMetadatum.metadatum.metadata_type_options.search + '&newitemtitle=' + this.searchQuery;
+            },
+            relationshipInputId() {
+                if (this.itemMetadatum && this.itemMetadatum.metadatum)
+                    return 'tainacan-item-metadatum_id-' + this.itemMetadatum.metadatum.id + (this.itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + this.itemMetadatum.parent_meta_id) : '');
+                else
+                    return '';
+            },
+            isDisplayingRelatedItemMetadata() {
+                return this.itemMetadatum &&
+                       this.itemMetadatum.metadatum &&
+                       this.itemMetadatum.metadatum.metadata_type_options &&
+                       this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata &&
+                       this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.length &&
+                       this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.length > 1;
             }
         },
         watch: {
-            createNewItemModal() {
+            editItemModalOpen() {
-                if (this.createNewItemModal)
+                if (this.editItemModalOpen)
-                    window.addEventListener('message', this.createNewItemFromModal, false);
+                    window.addEventListener('message', this.updateItemFromModal, false);
                 else
-                    window.removeEventListener('message', this.createNewItemFromModal);
+                    window.removeEventListener('message', this.updateItemFromModal);
             }
         },
         created() {
             this.collectionId = ( this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.collection_id ) ? this.itemMetadatum.metadatum.metadata_type_options.collection_id : '';
-            
+
             if (this.itemMetadatum.value && (Array.isArray( this.itemMetadatum.value ) ? this.itemMetadatum.value.length > 0 : true )) {
-                let query = qs.stringify({ postin: ( Array.isArray( this.itemMetadatum.value ) ) ? this.itemMetadatum.value : [ this.itemMetadatum.value ]  });
+                let query = [];
-                query += this.itemMetadatum.metadatum.metadata_type_options.search ? '&fetch_only_meta=' + this.itemMetadatum.metadatum.metadata_type_options.search : '';
+                
-                axios.get('/collection/' + this.collectionId + '/items?' + query + '&nopaging=1&fetch_only=title,document_mimetype,thumbnail&order=asc')
+                query['postin'] = Array.isArray( this.itemMetadatum.value ) ? this.itemMetadatum.value : [ this.itemMetadatum.value ];
+                query['nopaging'] = 1;
+                query['order'] = 'asc';
+                query['fetch_only'] = 'title,document_mimetype,thumbnail';
+                query['fetch_only_meta'] = this.isDisplayingRelatedItemMetadata ? (this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.filter(metadatumId => metadatumId !== 'thumbnail') + '') : (this.itemMetadatum.metadatum.metadata_type_options.search ? this.itemMetadatum.metadatum.metadata_type_options.search : '');
+                axios.get('/collection/' + this.collectionId + '/items?' + qs.stringify(query) )
                     .then( res => {
                         if (res.data.items) {
-                            for (let item of res.data.items)
+                            for (let item of res.data.items) {
                                 this.selected.push({
                                     label: this.getItemLabel(item),
                                     value: item.id,
+                                    valuesAsHtml: this.getItemMetadataValuesAsHtml(item),
                                     img: this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)
                                 });
+                            }
                         }
                     })
                     .catch(error => {
@@ -191,12 +281,14 @@
                         .then( res => {
 
                             if (res.data.items) {
-                                for (let item of res.data.items)
+                                for (let item of res.data.items) {
                                     this.options.push({
                                         label: this.getItemLabel(item),
                                         value: item.id,
+                                        valuesAsHtml: this.getItemMetadataValuesAsHtml(item),
                                         img: this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)
-                                    })
+                                    });
+                                }
                             }
                             if (res.headers['x-wp-total'])
                                 this.totalItems = res.headers['x-wp-total'];
@@ -272,8 +364,8 @@
                 } else {
                     query['search'] = search;
                 }
-                query['fetch_only'] = 'title,thumbnail';
+                query['fetch_only'] = 'title,thumbnail,document_mimetype';
-                query['fetch_only_meta'] = this.itemMetadatum.metadatum.metadata_type_options.search;
+                query['fetch_only_meta'] = this.isDisplayingRelatedItemMetadata ? (this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.filter(metadatumId => metadatumId !== 'thumbnail') + '') : (this.itemMetadatum.metadatum.metadata_type_options.search ? this.itemMetadatum.metadatum.metadata_type_options.search : '');
                 query['perpage'] = 12;
                 query['paged'] = this.page;
                 query['order'] = 'asc';
@@ -283,33 +375,200 @@
 
                 return qs.stringify(query);
             },
-            createNewItemFromModal(event) {
+            updateItemFromModal(event) {
                 const message = event.message ? 'message' : 'data';
                 const data = event[message];
 
-                if (data.type == 'itemCreationMessage') {
+                if (data.type == 'itemEditionMessage') {
-                    this.createNewItemModal = false;
+                    this.editItemModalOpen = false;
 
-                    if (data.itemId) {
+                    // An item is being edited from the modal
-                        this.searchQuery = '';
+                    if (this.editingItemId) {
-                        this.selected.push({
+                        if (data.item && data.item.id) {
-                            label: data.itemTitle,
+                            const existingItemIndex = this.selected.findIndex(anItemValue => anItemValue.value == data.item.id); 
-                            value: data.itemId,
+                            
-                            img: data.itemThumbnail ? data.itemThumbnail : ''
+                            if (existingItemIndex >= 0) {
-                        });
+                                this.selected.splice(existingItemIndex, 1, {
-                        this.onInput(this.selected);
+                                    label: this.getItemLabel(data.item),
+                                    value: data.item.id,
+                                    valuesAsHtml: this.getItemMetadataValuesAsHtml(data.item),
+                                    img: data.item.thumbnail ? data.item.thumbnail : ''
+                                });
+                            }
+                            this.onInput(this.selected);
+                        }
+                        this.editingItemId = '';
+
+                    // An item is being created from the modal
+                    } else {
+                        
+                        if (data.item && data.item.id) {
+                            this.searchQuery = '';
+
+                            this.selected.push({
+                                label: this.getItemLabel(data.item),
+                                value: data.item.id,
+                                valuesAsHtml: this.getItemMetadataValuesAsHtml(data.item),
+                                img: data.item.thumbnail ? data.item.thumbnail : ''
+                            });
+
+                            this.onInput(this.selected);
+                        }
                     }
-                }  
+                }
+            },
+            getItemMetadataValuesAsHtml(item) {
+                
+                let valuesAsHtml = '';
+                valuesAsHtml += `<div class="tainacan-relationship-metadatum" data-item-id="${ item.id }">
+                    <div class="tainacan-relationship-metadatum-header">`;
+                    if (this.isDisplayingRelatedItemMetadata && this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.indexOf('thumbnail') >= 0)
+                        valuesAsHtml += `<img src="${ this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype) }" class="attachment-tainacan-small size-tainacan-small" alt="${ item.thumbnail_alt }" loading="lazy" width="40" height="40">`;
+                
+                    valuesAsHtml += `<h4 class="label">
+                        ${ this.getItemLabel(item) }
+                    </h4>`;
+                valuesAsHtml += `</div>`;
+                
+                Object.values(item.metadata).forEach(metadatumValue => {
+                    if (
+                        metadatumValue.id != this.itemMetadatum.metadatum.metadata_type_options.search &&
+                        this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.indexOf(metadatumValue.id) >= 0 &&
+                        metadatumValue.value_as_html
+                    ) {
+                        valuesAsHtml += `<div class="tainacan-metadatum">
+                            <h5 class="label">
+                                ${ metadatumValue.name }
+                            </h5>
+                            <p>
+                                ${ metadatumValue.value_as_html }
+                            </p>
+                        </div>`;
+                    }
+                });
+                valuesAsHtml += `</div>`;
+
+                return valuesAsHtml;
+            },
+            editSelected(itemId) {
+                this.editingItemId = itemId;
+                this.editItemModalOpen = true;
+            },
+            removeFromSelected(itemId) {
+                const indexOfRemovedItem = this.selected.findIndex(itemValue => itemValue.value == itemId);
+
+                if (indexOfRemovedItem >= 0) {
+                    this.selected.splice(indexOfRemovedItem, 1);
+                    this.onInput(this.selected);
+                }
             }
         }
     }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
     div.is-flex {
         justify-content: flex-start;
     }
     .add-link {
         font-size: 0.75em;
     }
+    .b-tabs {
+        margin-bottom: 0;
+        width: 100%;
+    }
+    /deep/ .b-tabs .tab-content {
+        padding: 0.5em 0px !important;
+    }
+    /deep/ .tabs {
+        margin-bottom: 0 !important;
+
+        ul {
+            padding: 0;
+        }
+    }
+    /deep/ .tainacan-relationship-results-container {
+        border: 1px solid var(--tainacan-gray1);
+        background-color: var(--tainacan-white);
+        margin-top: calc(-1 * (0.5em + 1px));
+        margin-bottom: calc(-1 * (0.5em + 1px));
+        display: flex;
+        overflow: auto;
+        padding: 12px;
+        max-height: 40vh;
+        transition: height 0.5s ease, min-height 0.5s ease;
+
+        .tainacan-relationship-group {
+            padding-bottom: 12px;
+            .tainacan-relationship-metadatum {
+                .tainacan-metadatum .label {
+                    font-size: 0.75em;
+                }
+                a {
+                    pointer-events: auto;
+                }
+                .tainacan-relationship-metadatum-header {
+                    padding-right: 64px;
+                    .label{
+                        font-size: 0.875em;
+                    }
+                }
+            }
+            &>div>.multivalue-separator {
+                display: block;
+                max-height: 1px;
+                width: calc(100% - 40px);
+                background: var(--tainacan-gray2);
+                content: none;
+                color: transparent;
+                margin: 0.5em 0 0.5em 40px;
+            }
+        }
+    }
+    /deep/ .tainacan-relationship-group {
+        width: 100%;
+        .tainacan-relationship-metadatum {
+            .label {
+                font-size: 1em;
+            }
+            a {
+                pointer-events: none;
+            }
+            p {
+                font-size: 0.875em;
+                margin-bottom: 0;
+                margin-top: 0;
+            }
+        }
+        .tainacan-relationship-metadatum-header {
+            .label {
+                font-size: 1.125em;
+                font-weight: normal;
+            }
+            img {
+                max-width: 28px;
+                max-height: 28px;
+                margin-right: 10px;
+            }
+        }
+        .relationship-value-button--edit,
+        .relationship-value-button--remove {
+            position: absolute;
+            top: 0px;
+        }
+    }
+    /deep/ .relationship-value-button--edit,
+    /deep/ .relationship-value-button--remove {
+        right: 4px;
+        background-color: var(--tainacan-white);
+        border-radius: 100%;
+        padding: 2px;
+
+        &:hover {
+            background-color: var(--tainacan-gray0);
+        }
+    }
+    /deep/ .relationship-value-button--edit {
+        right: 34px;
+    }
 </style>

src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php

@@ -59,6 +59,10 @@ class Relationship extends Metadata_Type {
 				'title' => __( 'Related Metadatum', 'tainacan' ),
 				'description' => __( 'Select the metadata to use as search criteria in the target collection and as a label when representing the relationship', 'tainacan' ),
 			],
+			'display_related_item_metadata' => [
+				'title' => __( 'Displayed related item metadata', 'tainacan' ),
+				'description' => __( 'Select the metadata that will be displayed from the related item.', 'tainacan' ),
+			],
 			'display_in_related_items' => [
 				'title' => __( 'Display in "Items related to this"', 'tainacan' ),
 				'description' => __( 'Include items linked by this metadata on a list of related items.', 'tainacan' ),
@@ -119,8 +123,24 @@ class Relationship extends Metadata_Type {
 								$readable_option_value = $option_value;
 						break;
 
+						case 'display_related_item_metadata':
+							if (  is_array($option_value) ) {
+								$metadata_list = [];
+								foreach($option_value as $metadata_id) {
+									if ($metadata_id == 'thumbnail') {
+										$metadata_list[] = __('Thumbnail', 'tainacan');
+									} else {
+										$metadata = \tainacan_metadata()->fetch( (int) $metadata_id );
+										if ( $metadata ) $metadata_list[] = $metadata;
+									}
+									
+								}
+								$readable_option_value = implode(", ", $metadata_list);
+							}
+						break;
+
 						default:
-							$readable_option_value = $option_value;
+							$readable_option_value = is_string($option_value) ? $option_value : json_encode($option_value);
 					}
 					$options_as_html .= '<div class="value">' . $readable_option_value . '</div></div>';
 				}
@@ -163,13 +183,13 @@ class Relationship extends Metadata_Type {
 	 * @param  Item_Metadata_Entity $item_metadata 
 	 * @return string The HTML representation of the value, containing one or multiple items names, linked to the item page
 	 */
-	public function get_value_as_html(\Tainacan\Entities\Item_Metadata_Entity $item_metadata) {		
+	public function get_value_as_html(\Tainacan\Entities\Item_Metadata_Entity $item_metadata) {
 		$value = $item_metadata->get_value();
+		$search_meta_id = $this->get_option('search');
+		$display_metas = $this->get_option('display_related_item_metadata');
 		
 		$return = '';
 		if ( $item_metadata->is_multiple() ) {
-			$count = 1;
-			$total = sizeof($value);
 			$prefix = $item_metadata->get_multivalue_prefix();
 			$suffix = $item_metadata->get_multivalue_suffix();
 			$separator = $item_metadata->get_multivalue_separator();
@@ -178,19 +198,11 @@ class Relationship extends Metadata_Type {
 				try {
 					$Tainacan_Items = \Tainacan\Repositories\Items::get_instance();
 					$item = $Tainacan_Items->fetch( (int) $item_id);
-					
+					if ( $this->can_display_item($item) ) {
-					$count++;
+						$return .= empty($return)
-					
+							? ($prefix . $this->get_item_html($item, $search_meta_id, $display_metas) . $suffix)
-					if ( $item instanceof \Tainacan\Entities\Item ) {
+							: ($separator . $prefix . $this->get_item_html($item, $search_meta_id, $display_metas) . $suffix);
-						$return .= $prefix;
-						$return .= $this->get_item_html($item);
-						$return .= $suffix;
-
-						if ( $count <= $total ) {
-							$return .= $separator;
-						}
 					}
-
 				} catch (\Exception $e) {
 					// item not found
 				}
@@ -198,55 +210,126 @@ class Relationship extends Metadata_Type {
 		} else {
 			try {
 				$item = new \Tainacan\Entities\Item($value);
-				if ( $item instanceof \Tainacan\Entities\Item ) {
+				if ( $this->can_display_item($item) ) {
-					$return .= $this->get_item_html($item);
+					$return .= $this->get_item_html($item, $search_meta_id, $display_metas);
 				}
 			} catch (\Exception $e) {
 				// item not found 
 			}
 		}
+		if(!empty($display_metas) && is_array($display_metas) && count($display_metas) > 1) {
+			return "<div class='tainacan-relationship-group'>{$return}</div>";
+		}
+		return $return;
+	}
+
+	private function can_display_item($item) {
+		return (
+			$item instanceof \Tainacan\Entities\Item && (
+				is_user_logged_in() ||
+				(
+					\is_post_status_viewable( $item->get_status() ) &&
+					\is_post_status_viewable( $item->get_collection()->get_status() )
+				)
+			)
+		);
+	}
+
+	private function get_item_html($item, $search_meta_id, $display_metas) {
+		$return = '';
+		$id = $item->get_id();
+		
+		if(!empty($display_metas) && is_array($display_metas) && count($display_metas) > 1) {
+			$has_thumbnail = array_search('thumbnail', $display_metas);
+			$thumbnail_id = false;
+			if($has_thumbnail !== false) {
+				unset($display_metas[$has_thumbnail]);
+				$thumbnail_id = $item->get__thumbnail_id();
+			}
+			$args = ['post__in' => $display_metas];
+			$metadatum = $item->get_metadata($args);
+
+			$metadata_value = [];
+			foreach ( $metadatum as $item_meta_id => $item_meta ) {
+				if ( $item_meta instanceof \Tainacan\Entities\Item_Metadata_Entity && $item_meta->get_value_as_html() != '' ) {
+					$meta_id = $item_meta->get_metadatum()->get_id();
+					$as_header = $search_meta_id == $meta_id ? $this->get_item_link($item, $search_meta_id) : false;
+					$html = $this->get_meta_html($item_meta, $item, $as_header, $thumbnail_id);
+					if($as_header === false) {
+						$metadata_value[] = $html;
+					} else {
+						array_unshift($metadata_value, $html);
+					}
+				}
+				$return = implode("\n", $metadata_value);
+			}
+			$return = "<div class='tainacan-relationship-metadatum' data-item-id='$id'>{$return}</div>";
+		} else if ( $id && $search_meta_id ) {
+			$as_link = $this->get_item_link($item, $search_meta_id);
+			$return = "$as_link";
+		}
 
 		return $return;
 	}
 
-	private function get_item_html($item) {
+	private function get_item_link($item, $search_meta_id) {
 		$return = '';
 		$id = $item->get_id();
-		
+		$link = get_permalink( (int) $id );
-		$search_meta_id = $this->get_option('search');
+		$metadatum = \Tainacan\Repositories\Metadata::get_instance()->fetch((int) $search_meta_id);
-		
+		$value = '';
-		if ( $id && $search_meta_id ) {
+		if ($metadatum instanceof \Tainacan\Entities\Metadatum) {
-			$link = get_permalink( (int) $id );
+			$item_meta = new \Tainacan\Entities\Item_Metadata_Entity($item, $metadatum);
-			
+			$value = $item_meta->get_value_as_string();
-			$search_meta_id = $this->get_option('search');
+		}
-			
+		if ( empty($value) ) {
-			$metadatum = \Tainacan\Repositories\Metadata::get_instance()->fetch((int) $search_meta_id);
+			$value = $item->get_title();
-			
+		}
-			$label = '';
+		if (is_string($link)) {
-			
+			$return = "<a data-linkto='item' data-id='$id' href='$link'>$value</a>";
-			if ($metadatum instanceof \Tainacan\Entities\Metadatum) {
+		}
-				$item_meta = new \Tainacan\Entities\Item_Metadata_Entity($item, $metadatum);
+		return $return;
-				$label = $item_meta->get_value_as_string();
+	}
-			}
+
-			
+	private function get_item_thumbnail($thumbnail_id, $item) {
-			if ( empty($label) ) {
+		if($thumbnail_id !== false && !empty($thumbnail_id)){
-				$label = $item->get_title();
+			return \wp_get_attachment_image($thumbnail_id, 'tainacan-small');
-			}
+		}
-			
+		$media_type = $item->get_document_mimetype();
-			if (is_string($link)) {
+		$placeholder_image = '<img src="' . \tainacan_get_the_mime_type_icon($media_type, 'tainacan-small') . '" />';
-				if ( is_user_logged_in() ||
+		return $placeholder_image;
-					\is_post_status_viewable( $item->get_status() ) &&
+	}
-					\is_post_status_viewable($item->get_collection()->get_status()) ) {
+
-					$return = "<a data-linkto='item' data-id='$id' href='$link'>";
+	private function get_meta_html(\Tainacan\Entities\Item_Metadata_Entity $meta, \Tainacan\Entities\Item $item, $value_link = false, $thumbnail_id = false) {
-					$return.= $label;
+		$html = '';
-					$return .= "</a>";
+		if ($meta instanceof \Tainacan\Entities\Item_Metadata_Entity && !empty($meta->get_value_as_html())) {
-				} else {
+			ob_start();
-					$return.= $label;
+			if ($value_link) {
-				}
+				?>
+					<div class="tainacan-relationship-metadatum-header">
+						<?php echo $this->get_item_thumbnail($thumbnail_id, $item); ?>
+						<h4 class="label">
+							<?php echo $value_link; ?>
+						</h4>
+					</div>
+				<?php
+			} else {
+				?>
+					<div class="tainacan-metadatum">
+						<h5 class="label">
+							<?php echo $meta->get_metadatum()->get_name(); ?>
+						</h5>
+						<p>
+							<?php echo ($value_link === false ? $meta->get_value_as_html() : $value_link); ?> 
+						</p>
+					</div>
+				<?php
 			}
+			$html = ob_get_contents();
+			ob_end_clean();
 		}
 
-		return $return;
+		return $html;
 	}
 
 	/**

src/views/admin/components/metadata-types/tainacan-form-item.vue

@@ -1,9 +1,6 @@
 <template>
     <b-field
-            :class="{
+            :class="metadatumFormClasses"
-                'has-collapses-hidden': hideCollapses,
-                'hightlighted-metadatum': isHighlightedMetadatum 
-            }"
             :ref="isHighlightedMetadatum ? 'hightlighted-metadatum': 'null'"
             :addons="false"
             :message="errorMessage"
@@ -83,7 +80,7 @@
                         </template>
                     </transition-group>
                 </template>
-                <template v-if="isMultiple">
+                <template v-if="isMultiple && (maxMultipleValues === undefined || maxMultipleValues === 0 || (maxMultipleValues !== 1 && maxMultipleValues > values.length))">
                     <a 
                             @click="addValue"
                             class="is-inline-block add-link">
@@ -144,9 +141,19 @@
             isMultiple() {
                 return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.multiple == 'yes') ? this.itemMetadatum.metadatum.multiple == 'yes' : false;
             },
+            maxMultipleValues() {
+                return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.cardinality && !isNaN(this.itemMetadatum.metadatum.cardinality)) ? this.itemMetadatum.metadatum.cardinality : undefined;
+            },
             isTextInputComponent() {
                 const array = ['tainacan-relationship','tainacan-taxonomy', 'tainacan-compound', 'tainacan-user'];
                 return !(array.indexOf(this.metadatumComponent) >= 0 );
+            },
+            metadatumFormClasses() {
+                return '' + 
+                    (this.hideCollapses ? ' has-collapses-hidden' : '') + 
+                    (this.isHighlightedMetadatum ? ' hightlighted-metadatum' : '') + 
+                    (this.metadatumComponent ? ' tainacan-metadatum-component--' + this.metadatumComponent : '') +
+                    (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.id ? ' tainacan-metadatum-id--' + this.itemMetadatum.metadatum.id : '');  
             }
         },
         created() {

src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue

@@ -4,7 +4,7 @@
                 v-if="getComponent == 'tainacan-taxonomy-tag-input'"
                 :disabled="disabled"
                 :is="getComponent"
-                :maxtags="maxtags"
+                :maxtags="maxtags != undefined ? maxtags : (itemMetadatum.metadatum.multiple == 'yes' || allowNew === true ? (maxMultipleValues !== undefined ? maxMultipleValues : null) : 1)"
                 v-model="valueComponent"
                 :allow-select-to-create="allowSelectToCreate"
                 :allow-new="allowNewFromOptions"
@@ -25,6 +25,7 @@
                 :taxonomy="taxonomy"
                 :collection-id="itemMetadatum.metadatum.collection_id"
                 :is-taxonomy="true"
+                :max-multiple-values="maxMultipleValues"
                 :metadatum="itemMetadatum.metadatum"
                 :amount-selected="Array.isArray(valueComponent) ? valueComponent.length : (valueComponent ? '1' : '0')"
                 :is-checkbox="getComponent == 'tainacan-taxonomy-checkbox'"
@@ -124,6 +125,9 @@
             },
             isOnItemSubmissionForm() {
                 return !this.itemMetadatum.item || !this.itemMetadatum.item.id;
+            },
+            maxMultipleValues() {
+                return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.cardinality && !isNaN(this.itemMetadatum.metadatum.cardinality)) ? this.itemMetadatum.metadatum.cardinality : undefined;
             }
         },
         watch: {
@@ -202,7 +206,7 @@
 
 <style scoped>
     .add-new-term {
-        margin: 6px 0;
+        margin: 3px 0;
         font-size: 0.75em;
     }
 </style>

src/views/admin/components/metadata-types/taxonomy/TaxonomyTaginput.vue

@@ -7,7 +7,6 @@
                 size="is-small"
                 icon="magnify"
                 :allow-new="false"
-                :maxtags="maxtags"
                 @add="emitAdd"
                 @remove="emitRemove"
                 v-model="selected"

src/views/admin/components/metadata-types/taxonomy/class-tainacan-taxonomy.php

@@ -122,10 +122,10 @@ class Taxonomy extends Metadata_Type {
 				unset($options['visible_options_list']);
 
 			$form_labels = $this->get_form_labels();
-				
+			
 			foreach($options as $option_label => $option_value) {
 
-				if ( $option_value != '' ) {
+				if ( $option_value != '' && $option_label != 'taxonomy' ) {
 					$options_as_html .= '<div class="field"><div class="label">' . ( isset($form_labels[$option_label]) && isset($form_labels[$option_label]['title']) ? $form_labels[$option_label]['title'] : $option_label ) .'</div>';
 					
 					$readable_option_value = '';

src/views/admin/components/modals/exposers-modal.vue

@@ -524,7 +524,7 @@ export default {
 
                 h4 {
                     color: var(--tainacan-heading-color);
-                    font-size: 1em;
+                    font-size: 1em !important;
                     font-weight: 500;
                     padding: 0em 0.5em;
                     margin: 0;

src/views/admin/components/other/checkbox-radio-filter-input.vue

@@ -21,13 +21,15 @@
                     animated
                     @input="fetchSelectedLabels()"
                     v-model="activeTab"
-                    :class="{ 'hidden-tabs-section': !isModal }">
+                    :class="{ 'hidden-tabs-section': !isModal || !hasToDisplaySearchBar }">
                 <b-tab-item 
-                        :style="{ margin: isModal ? '0' : '0 -1.5rem' }"
+                        :style="{ margin: isModal ? '0' : '0 0 1rem 0' }"
                         :label="isTaxonomy ? $i18n.get('label_all_terms') : $i18n.get('label_all_metadatum_values')">
                     
                     <!-- Search input -->
-                    <b-field class="is-clearfix tainacan-checkbox-search-section">
+                    <b-field 
+                            v-if="hasToDisplaySearchBar"
+                            class="is-clearfix tainacan-checkbox-search-section">
                         <b-input
                                 expanded
                                 autocomplete="on"
@@ -42,7 +44,6 @@
                     <!-- Search Results -->
                     <div
                             v-if="isSearching"
-                            :style="{ height: isModal ? 'auto' : '0px' }"
                             class="modal-card-body tainacan-checkbox-list-container">
                         <a
                                 v-if="isUsingElasticSearch ? previousLastTerms.length && previousLastTerms[0] != checkboxListOffset : checkboxListOffset"
@@ -53,20 +54,13 @@
                                 <i class="tainacan-icon tainacan-icon-previous"/>
                             </span>
                         </a>
-                        <ul 
+                        <ul class="tainacan-modal-checkbox-list-body">
-                                :class="{
-                                    'tainacan-modal-checkbox-list-body-dynamic-m-l': !checkboxListOffset,
-                                    'tainacan-modal-checkbox-list-body-dynamic-m-r': noMoreSearchPage,
-                                }"
-                                class="tainacan-modal-checkbox-list-body">
                             <template v-if="searchResults.length">
                                 <li
                                         class="tainacan-li-checkbox-list"
                                         v-for="(option, key) in searchResults"
                                         :key="key">
-                                    <label 
+                                    <label class="b-checkbox checkbox">
-                                            v-if="isCheckbox"
-                                            class="b-checkbox checkbox">
                                         <input                                     
                                                 v-model="selected"
                                                 :value="option.id ? (isNaN(Number(option.id)) ? option.id : Number(option.id)) : (isNaN(Number(option.value)) ? option.value : Number(option.value))"
@@ -83,23 +77,6 @@
                                             </span>
                                         </span>
                                     </label>
-                                    <b-radio
-                                            v-tooltip="{
-                                                content: (option.name ? option.name : option.label) + (option.total_items != undefined ? ('(' + option.total_items + ' ' + $i18n.get('items') + ')') : ''),
-                                                autoHide: false,
-                                            }"
-                                            v-else
-                                            v-model="selected"
-                                            :native-value="option.id ? (isNaN(Number(option.id)) ? option.id : Number(option.value)) : (isNaN(Number(option.value)) ? option.value : Number(option.value))">
-                                        <span 
-                                                    class="checkbox-label-text"
-                                                    v-html="`${ option.name ? option.name : (option.label ? (option.hierarchy_path ? renderHierarchicalPath(option.hierarchy_path, option.label) : option.label) : '') }`" />
-                                        <span 
-                                                v-if="option.total_items != undefined"
-                                                class="has-text-gray">
-                                            &nbsp;{{ "(" + option.total_items + ")" }}
-                                        </span>
-                                    </b-radio>
                                 </li>
                             </template>
                             <template v-if="!isLoadingSearch && !searchResults.length">
@@ -125,7 +102,6 @@
                     <!-- Non-hierarchical lists -->
                     <div
                             v-if="!isSearching && !isTaxonomy"
-                            :style="{ height: isModal ? 'auto' : '0px' }"
                             class="modal-card-body tainacan-checkbox-list-container">
                         <a
                                 v-if="isUsingElasticSearch ? previousLastTerms.length && previousLastTerms[0] != checkboxListOffset : checkboxListOffset"
@@ -136,11 +112,8 @@
                                 <i class="tainacan-icon tainacan-icon-previous"/>
                             </span>
                         </a>
-                        <ul
+                        <ul 
-                                :class="{
+                                :style="isCheckboxListLoading ? 'min-height: 84px' : ''"
-                                    'tainacan-modal-checkbox-list-body-dynamic-m-l': !checkboxListOffset,
-                                    'tainacan-modal-checkbox-list-body-dynamic-m-r': noMorePage,
-                                }"
                                 class="tainacan-modal-checkbox-list-body">
                             <template v-if="options.length">
                                 <li
@@ -168,7 +141,7 @@
                                 </li>
                             </template>
                             <template v-if="!isCheckboxListLoading && !options.length">
-                                <li class="tainacan-li-checkbox-list result-info">
+                                <li class="tainacan-li-checkbox-list result-info warning-no-more-terms">
                                     {{ $i18n.get('info_no_terms_found') }}
                                 </li>
                             </template>
@@ -191,13 +164,15 @@
                     <transition-group
                             v-if="!isSearching && isTaxonomy"
                             class="modal-card-body tainacan-finder-columns-container"
-                            :style="{ height: isModal ? 'auto' : '0px' }"
                             name="page-left">
                         <div 
                                 v-for="(finderColumn, key) in finderColumns"
                                 class="tainacan-finder-column"
+                                :class="!hasToDisplaySearchBar ? 'has-only-one-column' : ''"
                                 :key="finderColumn.label + '-' + key">
-                            <p class="column-label">
+                            <p 
+                                    v-if="hasToDisplaySearchBar"
+                                    class="column-label">
                                 {{ finderColumn.label ? finderColumn.label : $i18n.get('label_root_terms') }}
                             </p>
                             <ul v-if="finderColumn.children.length">
@@ -208,9 +183,7 @@
                                         :id="`${key}.${index}-tainacan-li-checkbox-model`"
                                         :ref="`${key}.${index}-tainacan-li-checkbox-model`"
                                         :key="index">
-                                    <label 
+                                    <label class="b-checkbox checkbox">
-                                            v-if="isCheckbox"
-                                            class="b-checkbox checkbox">
                                         <input 
                                                 v-model="selected"
                                                 :value="(isNaN(Number(option.value)) ? option.value : Number(option.value))"
@@ -230,21 +203,6 @@
                                             </span>
                                         </span>
                                     </label>
-                                    <b-radio
-                                            v-tooltip="{
-                                                content: option.label,
-                                                autoHide: false,
-                                            }" 
-                                            v-else
-                                            v-model="selected"
-                                            :native-value="(isNaN(Number(option.value)) ? option.value : Number(option.value))">
-                                        {{ `${option.label}` }}
-                                        <span 
-                                                v-if="option.total_items != undefined"
-                                                class="has-text-gray">
-                                            &nbsp;{{ "(" + option.total_items + ")" }}
-                                        </span>
-                                    </b-radio>
                                     <a
                                             v-if="option.total_children > 0"
                                             @click="getOptionChildren(option, key, index)">
@@ -329,18 +287,7 @@
                     </div>
                 </b-tab-item>
             </b-tabs>
-            <!-- <pre>{{ hierarchicalPath }}</pre>
+            
-            <pre>{{ finderColumns }}</pre> -->
-            <!--<pre>{{ totalRemaining }}</pre>-->
-            <!-- <pre>{{ selected }}</pre> -->
-            <!--<pre>{{ options }}</pre>-->
-            <!--<pre>{{ searchResults }}</pre>-->
-            <!--<pre>{{ selectedTagsName }}</pre>-->
-            <!-- <pre>{{ checkboxListOffset }}</pre>
-            <pre>{{ previousLastTerms }}</pre> -->
-            <!-- <pre>{{ isLoadingSearch }}</pre>
-            <pre>{{ isCheckboxListLoading }}</pre>
-            <pre>{{ isColumnLoading }}</pre> -->
             <footer 
                     class="field is-grouped"
                     :class="{ 'form-submit': isModal }">
@@ -382,6 +329,7 @@
             metadatumId: Number,
             metadatum: Object,
             selected: Array,
+            currentCollectionId: String,
             isTaxonomy: {
                 type: Boolean,
                 default: false,
@@ -389,10 +337,6 @@
             metadatum_type: String,
             query: Object,
             isRepositoryLevel: Boolean,
-            isCheckbox: {
-                type: Boolean,
-                default: true,
-            },
             isModal: {
                 type: Boolean,
                 default: true,
@@ -410,8 +354,8 @@
                 optionName: '',
                 isSearching: false,
                 options: [],
-                maxNumOptionsCheckboxList: 20,
                 maxNumSearchResultsShow: 20,
+                maxNumOptionsCheckboxList: 20,
                 maxNumOptionsCheckboxFinderColumns: 100,
                 checkboxListOffset: 0,
                 isCheckboxListLoading: false,
@@ -422,7 +366,8 @@
                 selectedTagsName: {},
                 isSelectedTermsLoading: false,
                 isUsingElasticSearch: tainacan_plugin.wp_elasticpress == "1" ? true : false,
-                previousLastTerms: []
+                previousLastTerms: [],
+                hasToDisplaySearchBar: false
             }
         },
         watch: {
@@ -506,7 +451,7 @@
 
                     axios.get(`/items/?${qs.stringify({ fetch_only: 'title', postin: selected})}`)
                         .then((res) => {
-                            for (const item of res.data)
+                            for (const item of res.data.items)
                                 this.saveSelectedTagName(item.id, item.title, item.url);
 
                             this.isSelectedTermsLoading = false;
@@ -622,9 +567,11 @@
                     .then((res) => {
                         this.isCheckboxListLoading = false;
                         this.isLoadingSearch = false;
-
+                        
+                        this.hasToDisplaySearchBar = !this.isSearching && (this.isUsingElasticSearch || this.hasToDisplaySearchBar || res.headers['x-wp-totalpages'] > 1);
+                        
                         if (!this.isUsingElasticSearch && res.headers && res.headers['x-wp-total'])
-                            this.noMorePage = res.headers['x-wp-total'] <= this.checkboxListOffset + res.data.values.length;
+                            this.noMorePage = res.headers['x-wp-total'] <= (this.checkboxListOffset + res.data.values.length);
 
                         if (this.isUsingElasticSearch) {
                             this.checkboxListOffset = res.data.last_term.es_term;
@@ -785,6 +732,9 @@
                 
                 axios.get(route)
                     .then(res => {
+
+                        this.hasToDisplaySearchBar = !this.isSearching && (this.isUsingElasticSearch || this.hasToDisplaySearchBar || res.headers['x-wp-totalpages'] > 1 || res.data.values.some((aValue) => aValue.total_children != undefined && aValue.total_children != 0));
+
                         this.removeLevelsAfter(key);
                         this.createColumn(res, key, option ? option.label : null);
 
@@ -819,6 +769,8 @@
                     axios.get(route)
                         .then(res => {
                             this.appendMore(res.data.values, key, res.data.last_term.es_term);
+                            
+                            this.hasToDisplaySearchBar = !this.isSearching && (this.isUsingElasticSearch || this.hasToDisplaySearchBar || res.headers['x-wp-totalpages'] > 1 || res.data.values.some((aValue) => aValue.total_children != undefined && aValue.total_children != 0));
 
                             this.totalRemaining = Object.assign({}, this.totalRemaining, {
                                 [`${key}`]: {
@@ -873,34 +825,12 @@
 
 <style lang="scss" scoped>
 
-    .tainacan-modal-title {
+    /deep/ .tainacan-modal-title {
         margin-bottom: 16px;
     }
 
-    @media screen and (max-width: 768px) {
-        .tainacan-modal-content {
-            flex-direction: column;
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-        }
-
-        .tainacan-modal-checkbox-list-body {
-            flex-wrap: nowrap !important;
-        }
-
-        .tainacan-modal-checkbox-search-results-body {
-            column-count: 1;
-        }
-
-        .tainacan-li-checkbox-list {
-            max-width: calc(100% - (2 * var(--tainacan-one-column))) !important;
-        }
-    }
-
     .tainacan-modal-content {
         width: auto;
-        min-height: 550px;
     }
 
     /deep/ .tabs {
@@ -914,9 +844,10 @@
         display: none;
         visibility: hidden;
     }
-    .tab-content {
+    /deep/ .tab-content {
         transition: height 0.2s ease;
-        padding: 0.5em var(--tainacan-one-column) !important;
+        padding: 0px !important;
+        min-height: 86px;
     }
 
     .tainacan-modal-title {
@@ -959,12 +890,12 @@
         align-items: center;
         padding: 0;
 
-        .b-checkbox, .b-radio {
+        .b-checkbox {
             max-width: 100%;
+            min-height: 1.5em;
             margin-left: 0.7em;
-            margin-bottom: 0;
+            margin-right: 2em !important;
-            height: 24px;
+            margin-bottom: 0px !important;
-            overflow: hidden;
         }
 
         &:hover {
@@ -976,10 +907,11 @@
     .tainacan-li-checkbox-list {
         flex-grow: 0;
         flex-shrink: 1;
-        max-width: calc(50% - (2 * var(--tainacan-one-column)));
+        max-width: calc(100% - 0.5em);
         padding-left: 0.5em;
+        margin: 0;
 
-        .b-checkbox, .b-radio {
+        .b-checkbox {
             margin-right: 0px;
             margin-bottom: 0;
         }
@@ -993,6 +925,8 @@
             max-width: 100%;
             column-span: all;
             font-size: 0.75em;
+            color: var(--tainacan-info-color);
+            text-align: center;
         }
     }
 
@@ -1001,6 +935,7 @@
         border: 1px solid var(--tainacan-gray1);
         border-top: 0px;
         margin-top: -1px;
+        height: auto;
         display: flex;
         overflow: auto;
         padding: 0 !important;
@@ -1022,6 +957,22 @@
         padding: 0em;
         transition: width 0.2s ease;
 
+        &.has-only-one-column {
+            max-width: 100%;
+
+            ul {
+                -moz-column-count: 2;
+                -moz-column-gap: 0;
+                -moz-column-rule: none;
+                -webkit-column-count: 2;
+                -webkit-column-gap: 0;
+                -webkit-column-rule: none;
+                column-count: 2;
+                column-gap: 2em;
+                column-rule: none;
+            }
+        }
+
         ul {
             max-height: calc(253px - 20px - 0.7em);
             min-height: inherit;
@@ -1101,6 +1052,7 @@
 
     .tainacan-checkbox-search-section {
         margin-bottom: 0;
+
         .control {
             margin: 0;
         }
@@ -1124,16 +1076,23 @@
     }
 
     .tainacan-checkbox-list-container {
-        padding: 0 20px !important;
+        height: auto;
-        min-height: 232px;
         display: flex;
         align-items: center;
-        padding-right: 0 !important;
+        position: relative;
-        padding-left: 0 !important;
+        padding: 6px 20px !important;
+
+        &>ul+.tainacan-checkbox-list-page-changer {
+            right: 0;
+            left: auto;
+        }
     }
 
     .tainacan-checkbox-list-page-changer {
-        height: 253px;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        right: auto;
         align-items: center;
         display: flex;
         background-color: var(--tainacan-gray1);
@@ -1144,34 +1103,31 @@
     }
 
     .tainacan-modal-checkbox-list-body {
+        -moz-column-count: 2;
+        -moz-column-gap: 0;
+        -moz-column-rule: none;
+        -webkit-column-count: 2;
+        -webkit-column-gap: 0;
+        -webkit-column-rule: none;
+        column-count: 2;
+        column-gap: 2em;
+        column-rule: none;
         list-style: none;
         width: 100%;
-        align-self: baseline;
-        margin: 0 10px;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        padding: 0 !important;
         max-height: 253px;
+        padding: 0 !important;
+        margin: 0;
         overflow: auto;
     }
 
-    .tainacan-modal-checkbox-list-body-dynamic-m-l {
-        margin-left: var(--tainacan-one-column) !important;
-    }
-
-    .tainacan-modal-checkbox-list-body-dynamic-m-r {
-        margin-right: var(--tainacan-one-column) !important;
-    }
-
     .tainacan-search-results-container {
         padding: 0.25em !important;
     }
 
     .tainacan-tags-container {
         min-height: 64px;
-        padding: 0px !important;
+        padding: 6px 20px !important;
-        display: inline;
+        display: block;
 
         .control {
             margin-bottom: 0.25rem;
@@ -1189,7 +1145,15 @@
 
     .tainacan-modal-checkbox-search-results-body {
         list-style: none;
+        -moz-column-count: 2;
+        -moz-column-gap: 0;
+        -moz-column-rule: none;
+        -webkit-column-count: 2;
+        -webkit-column-gap: 0;
+        -webkit-column-rule: none;
         column-count: 2;
+        column-gap: 2em;
+        column-rule: none;
     }
 
     .tainacan-li-no-children {
@@ -1207,13 +1171,14 @@
     .b-checkbox .control-label {
         display: flex;
         flex-wrap: nowrap;
+        align-items: center;
         width: 100%;
+        overflow: visible !important;
+        white-space: normal !important;
 
         .checkbox-label-text {
-            white-space: nowrap;
+            line-height: 1.25em;
-            text-overflow: ellipsis;
+            padding-right: 3px;
-            overflow: hidden;
-            line-height: 1.45em;
         }
     }
 
@@ -1224,8 +1189,25 @@
         text-align: center;
     }
 
+    @media screen and (max-width: 768px) {
+        .tainacan-modal-content {
+            flex-direction: column;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+        }
+
+        .tainacan-modal-checkbox-list-body,
+        .tainacan-finder-column.has-only-one-column,
+        .tainacan-modal-checkbox-search-results-body {
+            -moz-column-count: auto;
+            -webkit-column-count: auto;
+            column-count: auto;
+        }
+
+        .tainacan-li-checkbox-list {
+            max-width: calc(100% - (2 * var(--tainacan-one-column))) !important;
+        }
+    }
 
 </style>
-
-
- 

src/views/admin/components/other/checkbox-radio-metadata-input.vue

@@ -4,13 +4,14 @@
                 size="is-small"
                 animated
                 @input="fetchSelectedLabels()"
-                v-model="activeTab">
+                v-model="activeTab"
-            <b-tab-item 
+                :class="{ 'hidden-tabs-section': (shouldBeginWithListExpanded && !hasToDisplaySearchBar) }">
-                    style="margin: 0 -0.75rem;"
+            <b-tab-item :label="isTaxonomy ? $i18n.get('label_all_terms') : $i18n.get('label_all_metadatum_values')">
-                    :label="isTaxonomy ? $i18n.get('label_all_terms') : $i18n.get('label_all_metadatum_values')">
                 
                 <!-- Search input -->
-                <b-field class="is-clearfix tainacan-checkbox-search-section">
+                <b-field 
+                        v-if="!shouldBeginWithListExpanded || hasToDisplaySearchBar"
+                        class="is-clearfix tainacan-checkbox-search-section">
                     <p 
                             v-if="!shouldBeginWithListExpanded"
                             class="control">
@@ -52,12 +53,7 @@
                             <i class="tainacan-icon tainacan-icon-previous"/>
                         </span>
                     </a>
-                    <ul 
+                    <ul class="tainacan-modal-checkbox-list-body">
-                            :class="{
-                                'tainacan-modal-checkbox-list-body-dynamic-m-l': !checkboxListOffset,
-                                'tainacan-modal-checkbox-list-body-dynamic-m-r': noMoreSearchPage,
-                            }"
-                            class="tainacan-modal-checkbox-list-body">
                         <template v-if="searchResults.length">
                             <li
                                     class="tainacan-li-checkbox-list"
@@ -66,7 +62,8 @@
                                 <label 
                                         v-if="isCheckbox"
                                         class="b-checkbox checkbox">
-                                    <input                                     
+                                    <input
+                                            :disabled="(selected.indexOf((isNaN(Number(option.value)) ? option.value : Number(option.value))) < 0) && maxMultipleValues !== undefined && maxMultipleValues - 1 < selected.length"
                                             v-model="selected"
                                             :value="option.id ? (isNaN(Number(option.id)) ? option.id : Number(option.id)) : (isNaN(Number(option.value)) ? option.value : Number(option.value))"
                                             type="checkbox"> 
@@ -132,18 +129,14 @@
                             <i class="tainacan-icon tainacan-icon-previous"/>
                         </span>
                     </a>
-                    <ul
+                    <ul class="tainacan-modal-checkbox-list-body">
-                            :class="{
-                                'tainacan-modal-checkbox-list-body-dynamic-m-l': !checkboxListOffset,
-                                'tainacan-modal-checkbox-list-body-dynamic-m-r': noMorePage,
-                            }"
-                            class="tainacan-modal-checkbox-list-body">
                         <li
                                 class="tainacan-li-checkbox-list"
                                 v-for="(option, key) in options"
                                 :key="key">
                             <label class="b-checkbox checkbox">
                                 <input 
+                                        :disabled="(selected.indexOf((isNaN(Number(option.value)) ? option.value : Number(option.value))) < 0) && maxMultipleValues !== undefined && maxMultipleValues - 1 < selected.length"
                                         v-model="selected"
                                         :value="option.value"
                                         type="checkbox"> 
@@ -182,8 +175,11 @@
                     <div 
                             v-for="(finderColumn, key) in finderColumns"
                             class="tainacan-finder-column"
+                            :class="!hasToDisplaySearchBar ? 'has-only-one-column' : ''"
                             :key="finderColumn.label + '-' + key">
-                        <p class="column-label">
+                        <p 
+                                v-if="hasToDisplaySearchBar"
+                                class="column-label">
                             {{ finderColumn.label ? finderColumn.label : $i18n.get('label_root_terms') }}
                         </p>
                         <ul v-if="finderColumn.children.length">
@@ -196,8 +192,10 @@
                                     :key="index">
                                 <label 
                                         v-if="isCheckbox"
-                                        class="b-checkbox checkbox">
+                                        class="b-checkbox checkbox"
+                                        :class="{ 'is-disabled': (selected.indexOf((isNaN(Number(option.value)) ? option.value : Number(option.value))) < 0) && maxMultipleValues !== undefined && maxMultipleValues - 1 < selected.length }">
                                     <input 
+                                            :disabled="(selected.indexOf((isNaN(Number(option.value)) ? option.value : Number(option.value))) < 0) && maxMultipleValues !== undefined && maxMultipleValues - 1 < selected.length"
                                             v-model="selected"
                                             :value="(isNaN(Number(option.value)) ? option.value : Number(option.value))"
                                             type="checkbox"> 
@@ -253,6 +251,20 @@
                         </ul>
                     </div>
                 </transition-group>
+                <section 
+                        v-if="( (isTaxonomy && (finderColumns instanceof Array ? finderColumns.length <= 0 : !finderColumns) ) || (!isTaxonomy && options instanceof Array ? options.length <= 0 : !options) ) && expandResultsSection && !isSearching && !isLoadingSearch && !isColumnLoading"
+                        class="section">
+                    <div class="content has-text-grey has-text-centered">
+                        <p>
+                            <span class="icon is-medium">
+                                <i  
+                                        class="tainacan-icon tainacan-icon-30px"
+                                        :class="{ 'tainacan-icon-terms': isTaxonomy, 'tainacan-icon-metadata': !isTaxonomy }"/>
+                            </span>
+                        </p>
+                        <p>{{ isTaxonomy ? $i18n.get('info_no_terms_found') : $i18n.get('label_nothing_selected') }}</p>
+                    </div>
+                </section>
 
                 <b-loading
                         :is-full-page="false"
@@ -340,7 +352,8 @@
                 type: Boolean,
                 default: true,
             },
-            amountSelected: 0
+            amountSelected: 0,
+            maxMultipleValues: undefined
         },
         data() {
             return {
@@ -365,12 +378,13 @@
                 activeTab: 0,
                 selectedTagsName: {},
                 isSelectedTermsLoading: false,
-                expandResultsSection: false
+                expandResultsSection: false,
+                hasToDisplaySearchBar: false // Different from the checkbox filter component, we cannot hide search bar as it affects the first loading
             }
         },
         computed: {
             shouldBeginWithListExpanded() {
-                return  this.isTaxonomy && this.metadatum && this.metadatum.metadata_type_options && this.metadatum.metadata_type_options.visible_options_list;
+                return this.isTaxonomy && this.metadatum && this.metadatum.metadata_type_options && this.metadatum.metadata_type_options.visible_options_list;
             }
         },
         watch: {
@@ -460,7 +474,7 @@
 
                     axios.get(`/items/?${qs.stringify({ fetch_only: 'title', postin: selected})}`)
                         .then((res) => {
-                            for (const item of res.data)
+                            for (const item of res.data.items)
                                 this.saveSelectedTagName(item.id, item.title, item.url);
 
                             this.isSelectedTermsLoading = false;
@@ -557,9 +571,11 @@
                     });
                 
                 promise.request
-                    .then(() => {
+                    .then((res) => {
                         this.isCheckboxListLoading = false;
                         this.isLoadingSearch = false;
+
+                        this.hasToDisplaySearchBar = !this.isSearching && (this.hasToDisplaySearchBar || res.headers['x-wp-totalpages'] > 1);
                     })
                     .catch(error => {
                         if (isCancel(error))
@@ -721,6 +737,9 @@
                 
                 axios.get(route)
                     .then(res => {
+                        
+                        this.hasToDisplaySearchBar = !this.isSearching && (this.hasToDisplaySearchBar || res.headers['x-wp-totalpages'] > 1 || res.data.values.some((aValue) => aValue.total_children != undefined && aValue.total_children != 0));
+
                         this.removeLevelsAfter(key);
                         this.createColumn(res, key, option ? option.label : null);
 
@@ -755,6 +774,8 @@
                         .then(res => {
                             this.appendMore(res.data.values, key, res.data.last_term.es_term);
 
+                            this.hasToDisplaySearchBar = !this.isSearching && (this.hasToDisplaySearchBar || res.headers['x-wp-totalpages'] > 1 || res.data.values.some((aValue) => aValue.total_children != undefined && aValue.total_children != 0));
+
                             this.totalRemaining = Object.assign({}, this.totalRemaining, {
                                 [`${key}`]: {
                                     remaining: res.headers['x-wp-total'],
@@ -778,32 +799,6 @@
 
 <style lang="scss" scoped>
 
-    @media screen and (max-width: 768px) {
-        .tainacan-modal-content {
-            flex-direction: column;
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-        }
-
-        .tainacan-modal-checkbox-list-body {
-            flex-wrap: nowrap !important;
-        }
-
-        .tainacan-modal-checkbox-search-results-body {
-            column-count: 1;
-        }
-
-        .tainacan-li-checkbox-list {
-            max-width: calc(100% - 20px) !important;
-        }
-    }
-
-    .tainacan-modal-content {
-        width: auto;
-        min-height: 550px;
-    }
-
     /deep/ .tabs {
         margin-bottom: 0 !important;
 
@@ -815,9 +810,14 @@
         display: none;
         visibility: hidden;
     }
-    .tab-content {
+    .hidden-tabs-section /deep/ .tab-content {
+        .tainacan-finder-columns-container {
+            border: none;
+        }
+    }
+    /deep/ .tab-content {
         transition: height 0.2s ease;
-        padding: 0.5em 20px !important;
+        padding: 0.5em 0px !important;
     }
 
     // In theme, the bootstrap removes the style of <a> without href
@@ -856,10 +856,16 @@
 
         .b-checkbox, .b-radio {
             max-width: 100%;
+            min-height: 1.5em;
             margin-left: 0.7em;
-            margin-bottom: 0;
+            margin-bottom: 0px !important;
             height: 24px;
             overflow: hidden;
+
+            &.is-disabled {
+                cursor: not-allowed;
+                opacity: 0.5;
+            }
         }
 
         &:hover {
@@ -871,13 +877,17 @@
     .tainacan-li-checkbox-list {
         flex-grow: 0;
         flex-shrink: 1;
-        max-width: calc(50% - 20px);
+        max-width: calc(100% - 0.5em);
-        width: 100%;
         padding-left: 0.5em;
+        margin: 0;
 
         .b-checkbox, .b-radio {
             margin-right: 0px;
             margin-bottom: 0;
+            &.is-disabled {
+                cursor: not-allowed;
+                opacity: 0.5;
+            }
         }
 
         &:hover:not(.result-info) {
@@ -889,6 +899,8 @@
             max-width: 100%;
             column-span: all;
             font-size: 0.75em;
+            color: var(--tainacan-info-color);
+            text-align: center;
         }
     }
 
@@ -918,6 +930,22 @@
         padding: 0em;
         transition: width 0.2s ease;
 
+        &.has-only-one-column {
+            max-width: 100%;
+
+            ul {
+                -moz-column-count: 2;
+                -moz-column-gap: 0;
+                -moz-column-rule: none;
+                -webkit-column-count: 2;
+                -webkit-column-gap: 0;
+                -webkit-column-rule: none;
+                column-count: 2;
+                column-gap: 2em;
+                column-rule: none;
+            }
+        }
+
         ul {
             max-height: calc(253px - 20px - 0.7em);
             min-height: inherit;
@@ -1025,13 +1053,21 @@
         min-height: 232px;
         display: flex;
         align-items: center;
+        position: relative;
         padding: 0 20px !important;
-        padding-right: 0 !important;
+
-        padding-left: 0 !important;
+        &>ul+.tainacan-checkbox-list-page-changer {
+            right: 0;
+            left: auto;
+        }
     }
 
     .tainacan-checkbox-list-page-changer {
-        height: 253px;
+        height: calc(100% - 1px);
+        top: 1px;
+        position: absolute;
+        left: 0;
+        right: auto;
         align-items: center;
         display: flex;
         background-color: var(--tainacan-gray1);
@@ -1042,26 +1078,23 @@
     }
 
     .tainacan-modal-checkbox-list-body {
+        -moz-column-count: 2;
+        -moz-column-gap: 0;
+        -moz-column-rule: none;
+        -webkit-column-count: 2;
+        -webkit-column-gap: 0;
+        -webkit-column-rule: none;
+        column-count: 2;
+        column-gap: 2em;
+        column-rule: none;
         list-style: none;
         width: 100%;
-        align-self: baseline;
+        margin: 0;
-        margin: 0 10px;
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
         padding: 0 !important;
         max-height: 253px;
         overflow: auto;
     }
 
-    .tainacan-modal-checkbox-list-body-dynamic-m-l {
-        margin-left: 2px !important;
-    }
-
-    .tainacan-modal-checkbox-list-body-dynamic-m-r {
-        margin-right: 2px !important;
-    }
-
     .tainacan-tags-container {
         min-height: 64px;
         padding: 0px !important;
@@ -1083,7 +1116,15 @@
 
     .tainacan-modal-checkbox-search-results-body {
         list-style: none;
+        -moz-column-count: 2;
+        -moz-column-gap: 0;
+        -moz-column-rule: none;
+        -webkit-column-count: 2;
+        -webkit-column-gap: 0;
+        -webkit-column-rule: none;
         column-count: 2;
+        column-gap: 2em;
+        column-rule: none;
     }
 
     .tainacan-li-no-children {
@@ -1101,13 +1142,14 @@
     .b-checkbox .control-label {
         display: flex;
         flex-wrap: nowrap;
+        align-items: center;
         width: 100%;
+        overflow: visible !important;
+        white-space: normal !important;
 
         .checkbox-label-text {
-            white-space: nowrap;
+            line-height: 1.25em;
-            text-overflow: ellipsis;
+            padding-right: 3px;
-            overflow: hidden;
-            line-height: 1.45em;
         }
     }
 
@@ -1118,6 +1160,20 @@
         text-align: center;
     }
 
+    @media screen and (max-width: 768px) {
+
+        .tainacan-modal-checkbox-list-body,
+        .tainacan-finder-column.has-only-one-column,
+        .tainacan-modal-checkbox-search-results-body {
+            -moz-column-count: auto;
+            -webkit-column-count: auto;
+            column-count: auto;
+        }
+
+        .tainacan-li-checkbox-list {
+            max-width: calc(100% - 20px) !important;
+        }
+    }
 
 </style>
 

src/views/admin/components/other/metadatum-details.vue

@@ -24,7 +24,16 @@
             v-if="insertOptions != ''"
             class="field">
         <div class="label">{{ $i18n.get('label_insert_options') }}</div>
-        <div class="value">{{ insertOptions }}</div>
+        <div class="value">
+            {{ insertOptions }}
+            <span 
+                    v-if="metadatum.multiple === 'yes' &&
+                        metadatum.cardinality != undefined &&
+                        metadatum.cardinality != 0 &&
+                        metadatum.cardinality != ''">
+                &nbsp;({{ $i18n.getWithVariables('label_maximum_of_%s_values', [ metadatum.cardinality ]) }})
+            </span>
+        </div>
     </div>
     <div
             v-if="metadatum.options_as_html"
@@ -94,6 +103,9 @@ export default {
         .value {
             font-size: 0.9em;
         }
+        &:only-child {
+            column-span: all;
+        }
     }
 }
 </style>

src/views/admin/js/filter-types-mixin.js

@@ -76,7 +76,6 @@ export const dynamicFilterTypeMixin = {
                 let query_items = { 'current_query': currentQuery };
 
                 let url = '';
-                
                 if (isRepositoryLevel)
                     url = `/facets/${metadatumId}?getSelected=${getSelected}&`;
                 else {

src/views/admin/js/store/modules/item/actions.js

@@ -182,12 +182,16 @@ export const duplicateItem = ({ commit }, { collectionId, itemId, copies }) => {
     }); 
 };
 
-export const updateItemDocument = ({ commit }, { item_id, document, document_type }) => {
+export const updateItemDocument = ({ commit }, { item_id, document, document_type, document_options }) => {
+    let params = {
+        document: document,
+        document_type: document_type,
+    }
+    if (document_options)
+        params['document_options'] = document_options;
+        
     return new Promise((resolve, reject) => {
-        axios.tainacan.patch('/items/' + item_id, {
+        axios.tainacan.patch('/items/' + item_id, params).then( res => {
-            document: document,
-            document_type: document_type
-        }).then( res => {
             let item = res.data;
 
             commit('setItem', item);

src/views/admin/pages/lists/filters-page.vue

@@ -190,8 +190,25 @@
                 <div 
                         v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_filters') || !isRepositoryLevel)"
                         class="column available-metadata-area">
+                    <div class="tainacan-form sub-header">
+                        <h3>{{ $i18n.get('label_available_metadata') }}</h3>
+
+                        <template v-if="availableMetadata && availableMetadata.length > 5 && !isLoadingMetadatumTypes">
+                                
+                            <b-field class="header-item">
+                                <b-input 
+                                        :placeholder="$i18n.get('instruction_type_search_metadata_filter')"
+                                        v-model="metadatumNameFilterString"
+                                        icon="magnify"
+                                        size="is-small"
+                                        icon-right="close-circle"
+                                        icon-right-clickable
+                                        @icon-right-click="metadatumNameFilterString = ''" />
+                            </b-field>
+                        </template>
+                    </div>
                     <div class="field" >
-                        <h3 class="label"> {{ $i18n.get('label_available_metadata') }}</h3>
+
                         <draggable
                                 @change="handleChangeOnMetadata"
                                 v-if="availableMetadata.length > 0 && !isLoadingMetadatumTypes"
@@ -209,6 +226,7 @@
                                             'disabled-metadatum': isSelectingFilterType
                                         }"
                                         v-if="metadatum.enabled"
+                                        v-show="metadatumNameFilterString == '' || metadatum.name.toString().toLowerCase().indexOf(metadatumNameFilterString.toString().toLowerCase()) >= 0"
                                         :key="index"
                                         @click.prevent="addMetadatumViaButton(metadatum, index)">
                                     <span 
@@ -409,7 +427,8 @@ export default {
             columnsTopY: 0,
             filtersSearchCancel: undefined,
             metadataSearchCancel: undefined,
-            filterNameFilterString: ''
+            filterNameFilterString: '',
+            metadatumNameFilterString: ''
         }
     },
     computed: {
@@ -902,7 +921,8 @@ export default {
         .active-filters-area {
             font-size: 0.875em;
             margin-left: -0.8em;
-            padding-right: 3em;
+            padding-right: 1em;
+            padding-top: 1em;
             min-height: 330px;
 
             @media screen and (max-width: 769px) {
@@ -1043,11 +1063,10 @@ export default {
         }
 
         .available-metadata-area {
-            padding: 10px 0px 10px 10px;
+            padding: 0px 0px 10px 10px;
             margin: 0;
-            max-width: 500px;
+            max-width: 600px;
-            min-width: 20.8333333%;
+            min-width: 41.66666667%;
-            font-size: 0.875em;
 
             @media screen and (max-width: 769px) {
                 max-width: 100%;
@@ -1066,6 +1085,12 @@ export default {
                 font-weight: 500;
             }
 
+            &>.field {
+                font-size: 0.875em;
+                padding-right: 1em;
+                padding-left: 1em;
+            }
+
             .available-metadatum-item {
                 padding: 0.6em;
                 margin: 4px 4px 4px 1.2em;

src/views/admin/pages/lists/metadata-page.vue

@@ -1,5 +1,7 @@
 <template>
-    <div :class="{ 'repository-level-page page-container': isRepositoryLevel }">
+    <div
+            :class="{ 'repository-level-page page-container': isRepositoryLevel }"
+            style="padding-bottom: 0;">
         <tainacan-title 
                 :bread-crumb-items="[{ path: '', label: this.$i18n.get('metadata') }]"/>
         
@@ -152,9 +154,7 @@
                                                     class="icon grip-icon">
                                                 <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-drag"/>
                                             </span>
-                                            <span 
+                                            <span class="metadatum-name">
-                                                    class="metadatum-name"
-                                                    :class="{'is-danger': formWithErrors == metadatum.id }">
                                                     {{ metadatum.name }}
                                             </span>
                                             <span   
@@ -163,11 +163,6 @@
                                                     :class="{ 'has-text-weight-bold': metadatum.metadata_type_object.core }">  
                                                 ({{ metadatum.metadata_type_object.name }}) 
                                                 <em v-if="metadatum.inherited">{{ $i18n.get('label_inherited') }}</em>
-                                                <span 
-                                                    class="not-saved" 
-                                                    v-if="(editForms[metadatum.id] != undefined && editForms[metadatum.id].saved != true) || metadatum.status == 'auto-draft'">
-                                                {{ $i18n.get('info_not_saved') }}
-                                                </span>
                                                 <span 
                                                         v-if="metadatum.status === 'private'"
                                                         class="icon"
@@ -226,7 +221,7 @@
                                                                 metadatum.collection_id != collectionId
                                                                 ? 'hidden' : 'visible'
                                                             }" 
-                                                        @click.prevent="toggleMetadatumEdition(metadatum.id)">
+                                                        @click.prevent="toggleMetadatumEdition(metadatum)">
                                                     <span 
                                                             v-tooltip="{
                                                                 content: $i18n.get('edit'),
@@ -260,33 +255,36 @@
                                                     v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
                                                     :metadatum="metadatum" />
                                         </transition>
-                                        <transition name="form-collapse">
-                                            <div v-if="openedMetadatumId == metadatum.id">
-                                                <metadatum-edition-form
-                                                        :collection-id="collectionId"
-                                                        :is-repository-level="isRepositoryLevel"
-                                                        @onEditionFinished="onEditionFinished()"
-                                                        @onEditionCanceled="onEditionCanceled()"
-                                                        @onErrorFound="formWithErrors = metadatum.id"
-                                                        :index="index"
-                                                        :original-metadatum="metadatum"
-                                                        :edited-metadatum="editForms[metadatum.id]"/>
-                                            </div>
-                                        </transition>
                                     </div>
+                                    
                                     <child-metadata-list
                                             v-if="metadatum.metadata_type_object && metadatum.metadata_type_object.component == 'tainacan-compound'"
                                             :parent.sync="metadatum"
                                             :metadata-name-filter-string="metadataNameFilterString"
                                             :metadata-type-filter-options="metadataTypeFilterOptions"
                                             :has-some-metadata-type-filter-applied="hasSomeMetadataTypeFilterApplied"
-                                            :is-parent-multiple="metadatum.multiple == 'yes' || (editForms[metadatum.id] && editForms[metadatum.id].multiple == 'yes')"
+                                            :is-parent-multiple="metadatum.multiple == 'yes'"
                                             :is-repository-level="isRepositoryLevel"
                                             :collapse-all="collapseAll" />
+                                    
+                                    <b-modal 
+                                            @close="onEditionCanceled()"
+                                            :active="openedMetadatumId == metadatum.id"
+                                            trap-focus
+                                            aria-modal
+                                            aria-role="dialog"
+                                            custom-class="tainacan-modal">
+                                        <metadatum-edition-form
+                                                :collection-id="collectionId"
+                                                :original-metadatum="metadatum"
+                                                :is-repository-level="isRepositoryLevel"
+                                                @onEditionFinished="onEditionFinished()"
+                                                @onEditionCanceled="onEditionCanceled()"
+                                                :index="index" />
+                                    </b-modal>
                                 </div>
-                            </draggable> 
+                            </draggable>
                         </div>
-                        
                         <div 
                                 v-if="(isRepositoryLevel && $userCaps.hasCapability('tnc_rep_edit_metadata')) || !isRepositoryLevel"
                                 class="column available-metadata-area" >
@@ -382,9 +380,7 @@ export default {
             isLoadingMetadata: false,
             isUpdatingMetadataOrder: false,
             openedMetadatumId: '',
-            formWithErrors: '',
             hightlightedMetadatum: '',
-            editForms: {},
             collapses: {},
             columnsTopY: 0,
             collapseAll: false,
@@ -431,33 +427,6 @@ export default {
             this.activeMetadatumList.forEach((metadatum) => this.$set(this.collapses, metadatum.id, isCollapsed));
         }
     },
-    beforeRouteLeave ( to, from, next ) {
-        
-        let hasUnsavedForms = false;
-        for (let editForm in this.editForms) {
-            if (!this.editForms[editForm].saved) 
-                hasUnsavedForms = true;
-        }
-        if ((this.openedMetadatumId != '' && this.openedMetadatumId != undefined) || hasUnsavedForms ) {
-            this.$buefy.modal.open({
-                parent: this,
-                component: CustomDialog,
-                props: {
-                    icon: 'alert',
-                    title: this.$i18n.get('label_warning'),
-                    message: this.$i18n.get('info_warning_metadata_not_saved'),
-                    onConfirm: () => {
-                        this.onEditionCanceled();
-                        next();
-                    },
-                },
-                trapFocus: true,
-                customClass: 'tainacan-modal'
-            });  
-        } else {
-            next();
-        }  
-    },
     created() {
         this.isRepositoryLevel = (this.$route.params.collectionId === undefined);
     },
@@ -570,7 +539,7 @@ export default {
                 if (!this.isRepositoryLevel)
                     this.updateMetadataOrder();
 
-                this.toggleMetadatumEdition(metadatum.id)
+                this.toggleMetadatumEdition(metadatum)
                 this.hightlightedMetadatum = '';
             })
             .catch((error) => {
@@ -602,48 +571,17 @@ export default {
                 customClass: 'tainacan-modal'
             }); 
         },
-        toggleMetadatumEdition(metadatumId) {
+        toggleMetadatumEdition(metadatum) {
-            // Closing collapse
+            this.$router.push({ query: { edit: metadatum.id } });
-            if (this.openedMetadatumId == metadatumId) {
-                this.openedMetadatumId = '';
-                this.$router.push({ query: {}});
-
-            // Opening collapse
-            } else {
-                this.$router.push({ query: { edit: metadatumId}})
-            }
         },
         editMetadatum(metadatum) {
-
             this.openedMetadatumId = metadatum.id;
-            
-            // Scroll to opened metadata form
-            this.$nextTick(() => { 
-                if (this.$refs['metadatum-handler-' + metadatum.id] && this.$refs['metadatum-handler-' + metadatum.id][0])
-                    this.$refs['metadatum-handler-' + metadatum.id][0].scrollIntoView({ behavior: 'smooth', block: 'start' });
-            });
-            
-            // First time opening
-            if (this.editForms[this.openedMetadatumId] == undefined) {
-                this.editForms[this.openedMetadatumId] = JSON.parse(JSON.stringify(metadatum));
-                this.editForms[this.openedMetadatumId].saved = true;
-
-                // Metadatum inserted now
-                if (this.editForms[this.openedMetadatumId].status == 'auto-draft') {
-                    this.editForms[this.openedMetadatumId].status = 'publish';
-                    this.editForms[this.openedMetadatumId].saved = false;
-                }
-            }      
         },
         onEditionFinished() {
-            this.formWithErrors = '';
-            delete this.editForms[this.openedMetadatumId];
             this.openedMetadatumId = '';
             this.$router.push({ query: {}});
         },
         onEditionCanceled() {
-            this.formWithErrors = '';
-            delete this.editForms[this.openedMetadatumId];
             this.openedMetadatumId = '';
             this.$router.push({ query: {}});
         },
@@ -879,7 +817,7 @@ export default {
         .active-metadata-area {
             font-size: 0.875em;
             margin-left: -0.8em;
-            padding-right: 3em;
+            padding-right: 1em;
             min-height: 330px;
 
             @media screen and (max-width: 769px) {

src/views/admin/pages/singles/item-page.vue

@@ -24,7 +24,7 @@
         <div class="tainacan-form">
             <div class="columns">
 
-<div class="column is-7">
+                <div class="column is-7">
 
                     <!-- Hook for extra Form options -->
                     <template
@@ -173,11 +173,18 @@
                                     <div
                                             :class="{ 
                                                 'metadata-type-textarea': itemMetadatum.metadatum.metadata_type_object.component == 'tainacan-textarea',
-                                                'metadata-type-compound': itemMetadatum.metadatum.metadata_type_object.component == 'tainacan-compound'
+                                                'metadata-type-compound': itemMetadatum.metadatum.metadata_type_object.component == 'tainacan-compound',
+                                                'metadata-type-relationship': itemMetadatum.metadatum.metadata_type_object.component == 'tainacan-relationship'
                                             }"
                                             class="content">
                                         <component 
-                                                :is="itemMetadatum.metadatum.metadata_type_object.component == 'tainacan-compound' ? 'div' : 'p'" 
+                                                :is="
+                                                    itemMetadatum.metadatum.metadata_type_object.component == 'tainacan-compound' ||
+                                                    (itemMetadatum.metadatum.metadata_type_object.component == 'tainacan-relationship' &&
+                                                     itemMetadatum.metadatum.metadata_type_object.options &&
+                                                     itemMetadatum.metadatum.metadata_type_object.options.display_related_item_metadata &&
+                                                     itemMetadatum.metadatum.metadata_type_object.options.display_related_item_metadata.length > 1
+                                                    ) ? 'div' : 'p'" 
                                                 v-html="itemMetadatum.value_as_html != '' ? itemMetadatum.value_as_html : `<p><span class='has-text-gray is-italic'>` + $i18n.get('label_value_not_provided') + `</span></p>`"/>
                                     </div>
                                 </div>
@@ -348,8 +355,8 @@
                         <!-- Hook for extra Form options -->
                         <template
                                 v-if="formHooks != undefined &&
-                            formHooks['view-item'] != undefined &&
+                                    formHooks['view-item'] != undefined &&
-                            formHooks['view-item']['end-left'] != undefined">
+                                    formHooks['view-item']['end-left'] != undefined">
                             <div
                                     id="view-item-end-left"
                                     class="form-hook-region"
@@ -592,46 +599,56 @@
             margin-bottom: 70px;
             margin-left: var(--tainacan-one-column);
             margin-right: var(--tainacan-one-column);
-        }
 
-        .column.is-5 {
+            .column.is-5 {
-            padding-left: var(--tainacan-one-column);
+                padding-left: var(--tainacan-one-column);
-            padding-right: var(--tainacan-one-column);
+                padding-right: var(--tainacan-one-column);
 
-            .sticky-container {
+                .sticky-container {
-                position: relative;
+                    position: relative;
-                position: sticky;
+                    position: sticky;
-                top: -25px;
+                    top: -25px;
-                margin: 3px 0;
+                    margin: 3px 0;
-                max-height: calc(100vh - 202px);
+                    max-height: calc(100vh - 202px);
-                overflow-y: auto;
+                    overflow-y: auto;
-                overflow-x: hidden;
+                    overflow-x: hidden;
-            }
+                }
 
-            @media screen and (max-width: 769px) {
+                @media screen and (max-width: 769px) {
-                width: 100%;
+                    width: 100%;
-            }
-        }
-        .column.is-7 {
-            padding-left: var(--tainacan-one-column);
-            padding-right: 0;
-
-            .columns {
-                flex-wrap: wrap;
-                justify-content: space-between;
-
-                .column {
-                    padding: 1em 12px 0 12px;
                 }
             }
-            .field { 
+            .column.is-7 {
-                padding: 10px 0 14px 0px;
+                padding-left: var(--tainacan-one-column);
-                margin-left: -3px;
+                padding-right: 0;
+
+                .columns {
+                    flex-wrap: wrap;
+                    justify-content: space-between;
+
+                    .column {
+                        padding: 1em 12px 0 12px;
+                    }
+                }
+                .field { 
+                    padding: 10px 0 14px 0px;
+                    margin-left: -3px;
+                }
+
+                @media screen and (max-width: 769px) {
+                    padding-right: var(--tainacan-one-column);
+                    width: 100%;
+                }
             }
 
             @media screen and (max-width: 769px) {
-                padding-right: var(--tainacan-one-column);
+                margin-left: 0;
-                width: 100%;
+                margin-right: 0;
+
+                 &>.column {
+                    padding-left: 0;
+                    padding-right: 0;
+                }
             }
         }
     
@@ -658,6 +675,10 @@
                     margin-right: 18px;
                 }
             }
+            p:empty {
+                display: none;
+                visibility: hidden;
+            }
         } 
         
     }

src/views/admin/scss/_buttons.scss

@@ -36,7 +36,7 @@ button.link-style:active {
         background: var(--tainacan-secondary) !important;
         color: var(--tainacan-white) !important;
     }
-    &.is-primary, &:hover, &.is-primary:focus {
+    &.is-primary, &.is-primary:hover, &.is-primary:focus {
         background: var(--tainacan-primary) !important;
         color: var(--tainacan-white) !important;
     }
@@ -47,6 +47,11 @@ button.link-style:active {
     &.is-white, &.is-white:hover, &.is-white:focus, &.is-outlined:hover, &.is-outlined:focus {
         background-color: transparent !important;
     }
+    &.is-loading, &.is-loading:hover, &.is-loading:focus,
+    &.is-loading.is-success, &.is-loading.is-success:hover, &.is-loading.is-success:focus,
+    &.is-loading.is-secondary, &.is-loading.is-secondary:hover, &.is-loading.is-secondary:focus {
+        color: transparent !important;
+    }
     &:active {
         -webkit-transform: none !important;
         transform: none !important;
@@ -96,6 +101,7 @@ button.link-style:active {
 kbd {
     padding: 0.25rem 0.5rem 0.25rem 0.35rem;
     background: radial-gradient(var(--tainacan-white, #ffffff), var(--tainacan-gray1, #f2f2f2) );
+    color: inherit;
     display: inline-block;
     position: relative;
     top: -0.15rem;

src/views/admin/scss/_checkboxes.scss

@@ -11,10 +11,18 @@
         flex-shrink: 0;
         border-radius: 2px;
         display: inline-block;
-        border: 1px solid var(--tainacan-gray4);
         transition: background 150ms ease-out;
+        border-style: solid;
+        border-width: 1px;
         box-shadow: none !important;
     }
+    input[type="checkbox"]:not([disabled=disabled]) + .check {
+        border-color: var(--tainacan-gray4);
+    }
+    input[type="checkbox"][disabled=disabled] + .check {
+        border-color: var(--tainacan-gray2);
+        cursor: not-allowed;
+    }
 
     &:focus input[type="checkbox"] + .check, 
     &:active input[type="checkbox"] + .check, 

src/views/admin/scss/_custom_variables.scss

@@ -149,6 +149,11 @@
         background-color: transparent !important;
         color: var(--tainacan-black) !important;
     }
+    .button.is-loading, .button.is-loading:hover, .button.is-loading:focus,
+    .button.is-loading.is-success, .button.is-loading.is-success:hover, .button.is-loading.is-success:focus,
+    .button.is-loading.is-secondary, .button.is-loading.is-secondary:hover, .button.is-loading.is-secondary:focus {
+        color: transparent !important;
+    }
 
     a,
     a:hover,

src/views/admin/scss/_filters-menu-modal.scss

@@ -20,6 +20,7 @@
 
         h3 {
             font-size: 1em;
+            padding-top: 0;
             color: var(--tainacan-heading-color);
             margin-bottom: 1em;
         }

src/views/admin/scss/_modals.scss

@@ -17,7 +17,7 @@
 .tainacan-modal .modal-close {
     z-index: 99999;
     @media only screen and (max-width: 768px) {
-        &:before, &:after { background-color: #298596; }
+        &:before, &:after { background-color: var(--tainacan-white, white); }
     }
 }
 
@@ -29,7 +29,7 @@
     align-items: flex-end;
 
     h1, h2 {
-        font-size: 1.25em;
+        font-size: 1.25em !important;
         font-weight: normal;
         font-weight: 500;
         color: var(--tainacan-heading-color);
@@ -39,12 +39,12 @@
         margin-bottom: 0px;
         margin: 0 auto 0 0;
     }
-    a.back-link{
+    a.back-link {
         font-weight: 500;
         float: right;
         margin-top: 5px;
     }
-    hr{
+    hr {
         margin: 3px 0 4px 0;
         height: 1px;
         background-color: var(--tainacan-secondary);
@@ -86,7 +86,7 @@
     }
 
     .form-submit {
-        padding: 40px 0em 0.4em 0em !important;
+        padding: 40px 0em 0em 0em !important;
     }
 
     @media only screen and (max-width: 768px) {
@@ -223,6 +223,19 @@
             display: none !important;
         }
     }
+
+    @media screen and (max-width: 769px) {
+        left: 1.5em;
+        right: 1.5em;
+        top: 1.5em;
+        bottom: 1.5em;
+
+        .media-frame-title h1 {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+        }
+    }
 }
 .media-modal .tainacan-item-attachments-modal button.check {
     display: none !important;

src/views/admin/scss/_tabs.scss

@@ -43,4 +43,10 @@
     .tabs a:hover:not([href]) {
         text-decoration: none;
     }
+    @media screen and (max-width: 769px) {
+        .tab-content {         
+            padding-left: 0.5em;
+            padding-right: 00.5em;
+        }
+    }
 }

src/views/admin/scss/_tooltips.scss

@@ -229,7 +229,7 @@
         .tainacan-compound-metadatum .label {
             text-align: left;
             margin-bottom: 0.25em;
-            font-size: 1em;
+            font-size: 1em !important;
             color: var(--tainacan-info-color);
         }
         .tainacan-compound-metadatum p {
@@ -246,6 +246,49 @@
             color: transparent;
             margin: 1em auto 1em -0.875em;
         }
-        
+    }
+    .tainacan-relationship-group {
+        text-align: left;
+        .tainacan-relationship-metadatum {
+            text-align: left;
+            .tainacan-relationship-metadatum-header {
+                text-align: left;
+                display: flex;
+                align-items: center;
+                img {
+                    margin-right: 12px;
+                    max-width: 28px;
+                    max-height: 28px;
+                }
+                .label {
+                    font-weight: normal;
+                    font-size: 1em !important;
+                    margin-top: 0;
+                    margin-left: 0;
+                    margin-bottom: 0;
+                    margin-right: 0;
+                }
+            }
+             .tainacan-metadatum {
+                text-align: left;
+                margin-left: 40px;
+                .label {
+                    color: var(--tainacan-gray4);
+                    font-size: 1em !important;
+                    line-height: 1em;
+                    margin-top: 8px;
+                    margin-bottom: 2px;
+                }
+            }
+        }
+        &>.multivalue-separator {
+            display: block;
+            max-height: 1px;
+            width: calc(100% - 40px);
+            background: var(--tainacan-gray2);
+            content: none;
+            color: transparent;
+            margin: 0.5em 0 0.5em 40px;
+        }
     }
 }

src/views/admin/scss/tainacan-admin.scss

@@ -196,6 +196,7 @@ a:hover {
     }
 }
 
+// Inside one of the view modes
 .metadata-value {
     .tainacan-compound-group {
         margin-left: 2px;
@@ -220,9 +221,29 @@ a:hover {
             color: transparent;
             margin: 1em auto 1em -0.875em;
         }
-        
+    }
+    .tainacan-relationship-group {
+        .tainacan-relationship-metadatum {
+            .tainacan-relationship-metadatum-header {
+                .label {
+                    font-size: 1em;
+                }
+                img {
+                    max-width: 22px;
+                    max-height: 22px;
+                }
+            }
+            .tainacan-metadatum {
+                margin-left: 40px;
+                font-size: 1.125em;
+                &>*{
+                    font-size: 0.875em;
+                }
+            }
+        }
     }
 }
+// Inside the admin item page
 .metadata-type-textarea,
 .metadata-type-compound {
     .multivalue-separator {
@@ -251,6 +272,44 @@ a:hover {
         }
     }
 }
+.tainacan-relationship-group {
+    .tainacan-relationship-metadatum {
+        .tainacan-relationship-metadatum-header {
+            display: flex;
+            align-items: center;
+            img {
+                margin-right: 12px;
+                max-width: 28px;
+                max-height: 28px;
+            }
+            .label {
+                font-weight: normal;
+                margin-top: 0;
+                margin-left: 0;
+                margin-bottom: 0;
+                margin-right: 0;
+            }
+        }
+        .tainacan-metadatum {
+            margin-left: 40px;
+            .label {
+                font-size: 0.8125em;
+                line-height: 1em;
+                margin-top: 8px;
+                margin-bottom: 2px;
+            }
+        }
+    }
+    &>.multivalue-separator {
+        display: block;
+        max-height: 1px;
+        width: calc(100% - 40px);
+        background: var(--tainacan-gray2);
+        content: none;
+        color: transparent;
+        margin: 0.5em 0 0.5em 40px;
+    }
+}
 .taginput-container .input:hover {
     border: none !important;
 }

src/views/class-tainacan-admin.php

@@ -285,6 +285,7 @@ class Admin {
 			'user_caps'              	=> $user_caps,
 			'user_prefs'             	=> $prefs,
 			'base_url'               	=> $TAINACAN_BASE_URL,
+			'plugin_dir_url'			=> plugin_dir_url( __DIR__ ),
 			'admin_url'              	=> admin_url(),
 			'theme_items_list_url' 		=> esc_url_raw( get_site_url() ) . '/' . \Tainacan\Theme_Helper::get_instance()->get_items_list_slug(),
 			'theme_collection_list_url' => get_post_type_archive_link( 'tainacan-collection' ),

src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/block.json

@@ -1,6 +1,7 @@
 {
     "name": "tainacan/carousel-collections-list",
     "title": "Tainacan Collections Carousel",
+    "apiVersion": 2,
     "category": "tainacan-blocks",
     "keywords": [ "collections", "carousel", "slider" ],
     "description": "List collections on a Carousel, displaying either its thumbnail or a preview of its items.",
@@ -11,6 +12,12 @@
         "multiple": true,
         "typography": {
             "fontSize": true
+        },
+        "color": {
+            "text": true,
+            "background": false,
+            "gradients": false,
+            "link": true
         }
     },
     "example": {

src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/edit.js

@@ -1,6 +1,6 @@
 const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components;
 
-const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
 const { __ } = wp.i18n;
 
@@ -31,6 +31,9 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
         showCollectionThumbnail
     } = attributes;
 
+    // Gets blocks props from hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+    console.log(blockProps)
     // Obtains block's client id to render it on save function
     setAttributes({ blockId: clientId });
 
@@ -189,7 +192,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
                         src={ `${tainacan_blocks.base_url}/assets/images/carousel-collections-list.png` } />
             </div>
         : (
-        <div className={className}>
+        <div { ...blockProps }>
 
             { collections.length ?
                 <BlockControls>

src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/save.js

@@ -1,3 +1,5 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
 export default function ({ attributes, className }) {
     const {
         content, 
@@ -14,9 +16,12 @@ export default function ({ attributes, className }) {
         hideName,
         showCollectionThumbnail
     } = attributes;
+
+    // Gets attributes such as style, that are automatically added by the editor hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
     return <div 
+                { ...blockProps }
                 data-module="carousel-collections-list"
-                className={ className }
                 selected-collections={ JSON.stringify(selectedCollections.map((collection) => { return collection.id })) }
                 arrows-position={ arrowsPosition }
                 auto-play={ '' + autoPlay }

src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/style.scss

@@ -139,7 +139,7 @@
 
             a>span,
             a:hover>span {
-                color: var(--tainacan-block-gray5, $gray5);
+                color: inherit;
                 font-weight: bold;
                 text-decoration: none;
                 padding: 8px 12px;
@@ -151,7 +151,9 @@
                 width: 100%;
                 height: auto;
             }
+            a,
             a:hover {
+                color: inherit;
                 text-decoration: none;
             }
 
@@ -191,7 +193,7 @@
         width: 100%;
         font-size: 0.875em;
         font-style: italic;
-        color: var(--tainacan-block-gray4, $gray4);
+        color: inherit;
         text-align: center;
         margin: 0 auto;
         padding: 8px 2px 2px 2px;
@@ -279,7 +281,7 @@
         li.collection-list-item {
             position: relative;
             display: block;
-            margin: 16px 32px 16px 0px;
+            margin: 8px 32px 8px 0px;
             width: calc(16.666% - 32px); 
             min-width: calc(16.666% - 32px);
             scroll-snap-align: start;
@@ -292,7 +294,7 @@
             }
 
             a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit; 
                 font-weight: bold;
                 line-height: normal;
             }
@@ -306,7 +308,7 @@
             }
 
             &:hover a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit; 
                 text-decoration: none;
             }
         
@@ -575,5 +577,13 @@
             }
         }
     }
-
+}
+.block-editor-block-list__block:not(.has-text-color)>.wp-block-tainacan-carousel-collections-list {
+    .swiper-container,
+    li.collection-list-item {
+        a>span,
+        a:hover>span {
+            color: var(--tainacan-block-gray5, $gray5)
+        }
+    }
 }

src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/theme.js

@@ -39,7 +39,8 @@ export default (element) => {
                         showCollectionThumbnail: false,
                         tainacanApiRoot: '',
                         tainacanBaseUrl: '',
-                        className: ''
+                        className: '',
+                        style: ''
                     },
                     render(h){ 
                         return h(CarouselCollectionsListTheme, {
@@ -59,6 +60,7 @@ export default (element) => {
                                 tainacanApiRoot: this.tainacanApiRoot,
                                 tainacanBaseUrl: this.tainacanBaseUrl,
                                 className: this.className,
+                                style: this.style
                             }
                         });
                     },
@@ -77,6 +79,7 @@ export default (element) => {
                         this.showCollectionThumbnail = this.$el.attributes['show-collection-thumbnail'] != undefined ? this.$el.attributes['show-collection-thumbnail'].value == 'true' : false;
                         this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
                         this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
+                        this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
                     },
                     methods: {
                         __(text, domain) {

src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/theme.vue

@@ -1,5 +1,7 @@
 <template>
-    <div :class="className + ' has-mounted'">
+    <div 
+            :style="style"
+            :class="className + ' has-mounted'">
         <div v-if="!isLoading">
             <div  
                     :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
@@ -200,7 +202,8 @@ export default {
         showCollectionThumbnail: Boolean,
         tainacanApiRoot: String,
         tainacanBaseUrl: String,
-        className: String
+        className: String,
+        style: String
     },
     data() {
         return {

src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/block.json

@@ -1,6 +1,7 @@
 {
     "name": "tainacan/carousel-items-list",
     "title": "Tainacan Collection's Items Carousel",
+    "apiVersion": 2,
     "category": "tainacan-blocks",
     "keywords": [ "items", "carousel", "slider" ],
     "description": "List items on a Carousel, using search or item selection.",
@@ -119,6 +120,12 @@
         "multiple": true,
         "typography": {
             "fontSize": true
+        },
+        "color": {
+            "text": true,
+            "background": false,
+            "gradients": false,
+            "link": true
         }
     },
     "editorScript": "carousel-items-list",

src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/dynamic-and-carousel-items-modal.js

@@ -47,7 +47,8 @@ export default class CarouselItemsModal extends React.Component {
         if (this.props.existingCollectionId) {
             this.fetchCollection(this.props.existingCollectionId);
             this.setState({ 
-                searchURL: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId +  (this.props.loadStrategy == 'search' ? '/items/?iframemode=true&readmode=true&status=publish' : '/items/?iframemode=true&status=publish') });
+                searchURL: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId +  (this.props.loadStrategy == 'search' ? '/items/?iframemode=true&readmode=true&status=publish' : '/items/?iframemode=true&status=publish')
+            });
         } else {
             this.setState({ collectionPage: 1 });
             this.fetchModalCollections();

src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/edit.js

@@ -2,9 +2,9 @@ const { __ } = wp.i18n;
 
 const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
 
-const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
-import CarouselItemsModal from './carousel-items-modal.js';
+import CarouselItemsModal from './dynamic-and-carousel-items-modal.js';
 import tainacan from '../../js/axios.js';
 import axios from 'axios';
 import qs from 'qs';
@@ -12,7 +12,6 @@ import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js';
 import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 import 'swiper/css/swiper.min.css';
 
-
 export default function({ attributes, setAttributes, className, isSelected, clientId }){
     let {
         items, 
@@ -41,6 +40,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         collectionTextColor
     } = attributes;
 
+    // Gets blocks props from hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+
     // Obtains block's client id to render it on save function
     setAttributes({ blockId: clientId });
     const thumbHelper = ThumbnailHelperFunctions();
@@ -247,7 +249,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                         src={ `${tainacan_blocks.base_url}/assets/images/carousel-items-list.png` } />
             </div>
         : (
-        <div className={className}>
+        <div { ...blockProps }>
 
             { items.length ?
                 <BlockControls>

src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/save.js

@@ -1,3 +1,5 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
 export default function ({ attributes, className }) {
     const {
         content, 
@@ -20,10 +22,12 @@ export default function ({ attributes, className }) {
         collectionBackgroundColor,
         collectionTextColor
     } = attributes;
-    
+
+    // Gets attributes such as style, that are automatically added by the editor hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
     return <div 
+                { ...blockProps }
                 data-module="carousel-items-list"
-                className={ className }
                 search-url={ searchURL }
                 selected-items={ JSON.stringify(selectedItems) }
                 arrows-position={ arrowsPosition }

src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/style.scss

@@ -151,7 +151,7 @@
 
             a>span,
             a:hover>span {
-                color: var(--tainacan-block-gray5, $gray5);
+                color: inherit;
                 font-weight: bold;
                 text-decoration: none;
                 padding: 8px 12px;
@@ -163,7 +163,9 @@
                 width: 100%;
                 height: auto;
             }
+            a,
             a:hover {
+                color: inherit;
                 text-decoration: none;
             }
         }
@@ -173,7 +175,8 @@
         width: 100%;
         font-size: 0.875em;
         font-style: italic;
-        color: var(--tainacan-block-gray4, $gray4);
+        color: inherit;
+        opacity: 0.5;
         text-align: center;
         margin: 0 auto;
         padding: 8px 2px 2px 2px;
@@ -257,14 +260,14 @@
         li.item-list-item {
             position: relative;
             display: block;
-            margin: 16px;
+            margin: 8px 16px;
             width: calc(14.285% - 32px); 
             min-width: calc(14.285% - 32px);
             scroll-snap-align: start;
             scroll-margin: 0 16px;
 
             a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit;
                 font-weight: bold;
                 line-height: normal;
             }
@@ -277,7 +280,7 @@
             }
 
             &:hover a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit;
                 text-decoration: none;
             }
         
@@ -528,5 +531,13 @@
             }
         }
     }
-
+}
+.block-editor-block-list__block:not(.has-text-color)>.wp-block-tainacan-carousel-items-list {
+    .swiper-container,
+    li.item-list-item {
+        a>span,
+        a:hover>span {
+            color: var(--tainacan-block-gray5, $gray5)
+        }
+    }
 }

src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.js

@@ -45,7 +45,8 @@ export default (element) => {
                         collectionTextColor: '#ffffff',
                         tainacanApiRoot: '',
                         tainacanBaseUrl: '',
-                        className: ''
+                        className: '',
+                        style: ''
                     },
                     render(h){ 
                         return h(CarouselItemsListTheme, {
@@ -70,7 +71,8 @@ export default (element) => {
                                 collectionTextColor: this.collectionTextColor,
                                 tainacanApiRoot: this.tainacanApiRoot,
                                 tainacanBaseUrl: this.tainacanBaseUrl,
-                                className: this.className
+                                className: this.className,
+                                style: this.style
                             }
                         });
                     },
@@ -95,6 +97,7 @@ export default (element) => {
                         this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
                         this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
                         this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
+                        this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
                     },
                     methods: {
                         __(text, domain) {

src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.vue

@@ -1,5 +1,7 @@
 <template>
-    <div :class="className + ' has-mounted'">
+    <div 
+            :style="style"
+            :class="className + ' has-mounted'">
         <div v-if="showCollectionHeader">
             <div
                     v-if="isLoadingCollection"
@@ -76,9 +78,6 @@
                                     :alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : $root.__( 'Thumbnail', 'tainacan' ))"
                                     :transition-duration="500" />
                             <span v-if="!hideTitle">{{ item.title ? item.title : '' }}</span>
-                            <div 
-                                    v-if="maxItemsPerScreen <= 4"
-                                    class="swiper-lazy-preloader swiper-lazy-preloader-white"/>
                         </a>
                     </swiper-slide>
                 </swiper>
@@ -209,7 +208,8 @@ export default {
         collectionTextColor: String,
         tainacanApiRoot: String,
         tainacanBaseUrl: String,
-        className: String
+        className: String,
+        style: String
     },
     data() {
         return {
@@ -224,7 +224,6 @@ export default {
             paged: undefined,
             totalItems: 0,
             swiperOptions: {
-                lazy: this.maxItemsPerScreen <= 4,
                 watchOverflow: true,
                 mousewheel: true,
                 observer: true,

src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/block.json

@@ -1,6 +1,7 @@
 {
     "name": "tainacan/carousel-terms-list",
     "title": "Tainacan Terms Carousel",
+    "apiVersion": 2,
     "category": "tainacan-blocks",
     "keywords": [ "carousel", "slider", "taxonomy" ],
     "description": "List terms on a Carousel, showing their thumbnails or a preview of items.",
@@ -103,6 +104,12 @@
         "multiple": true,
         "typography": {
             "fontSize": true
+        },
+        "color": {
+            "text": true,
+            "background": false,
+            "gradients": false,
+            "link": true
         }
     },
     "editorScript": "carousel-terms-list",

src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/edit.js

@@ -2,7 +2,7 @@ const { __ } = wp.i18n;
 
 const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components;
 
-const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
 import TermsModal from '../terms-list/terms-modal.js';
 import tainacan from '../../js/axios.js';
@@ -31,6 +31,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         taxonomyId
     } = attributes;
 
+    // Gets blocks props from hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+
     // Obtains block's client id to render it on save function
     setAttributes({ blockId: clientId });
     
@@ -175,7 +178,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                         src={ `${tainacan_blocks.base_url}/assets/images/carousel-terms-list.png` } />
             </div>
         : (
-        <div className={className}>
+        <div { ...blockProps }>
 
             { terms.length ?
                 <BlockControls>

src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/save.js

@@ -1,3 +1,5 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
 export default function({ attributes, className }) {
     const {
         content, 
@@ -14,9 +16,12 @@ export default function({ attributes, className }) {
         showTermThumbnail,
         taxonomyId
     } = attributes;
+    
+    // Gets attributes such as style, that are automatically added by the editor hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
     return <div 
+                { ...blockProps }
                 data-module="carousel-terms-list"
-                className={ className }
                 selected-terms={ JSON.stringify(selectedTerms.map((term) => { return term.id; })) }
                 arrows-position={ arrowsPosition }
                 auto-play={ '' + autoPlay }

src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/style.scss

@@ -139,7 +139,7 @@
 
             a>span,
             a:hover>span {
-                color: var(--tainacan-block-gray5, $gray5);
+                color: inherit;
                 font-weight: bold;
                 text-decoration: none;
                 padding: 8px 12px;
@@ -151,7 +151,9 @@
                 width: 100%;
                 height: auto;
             }
+            a,
             a:hover {
+                color: inherit;
                 text-decoration: none;
             }
 
@@ -191,7 +193,7 @@
         width: 100%;
         font-size: 0.875em;
         font-style: italic;
-        color: var(--tainacan-block-gray4, $gray4);
+        color: inherit;
         text-align: center;
         margin: 0 auto;
         padding: 8px 2px 2px 2px;
@@ -279,7 +281,7 @@
         li.term-list-item {
             position: relative;
             display: block;
-            margin: 16px 32px 16px 0px;
+            margin: 8px 32px 8px 0px;
             width: calc(16.666% - 32px); 
             min-width: calc(16.666% - 32px);
             scroll-snap-align: start;
@@ -292,7 +294,7 @@
             }
 
             a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit;
                 font-weight: bold;
                 line-height: normal;
             }
@@ -306,7 +308,7 @@
             }
 
             &:hover a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit;
                 text-decoration: none;
             }
         
@@ -439,7 +441,6 @@
             min-width: calc(100% - 32px);
         }
     }
-
     @media only screen and (max-width: 1452px) { 
         
         ul.terms-list-edit li.terms-list-item { 
@@ -574,5 +575,13 @@
             }
         }
     }
-
+}
+.block-editor-block-list__block:not(.has-text-color)>.wp-block-tainacan-carousel-terms-list {
+    .swiper-container,
+    li.term-list-item {
+        a>span,
+        a:hover>span {
+            color: var(--tainacan-block-gray5, $gray5)
+        }
+    }
 }

src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/theme.js

@@ -39,7 +39,8 @@ export default (element) => {
                         tainacanApiRoot: '',
                         tainacanBaseUrl: '',
                         className: '',
-                        taxonomyId: ''
+                        taxonomyId: '',
+                        style: ''
                     },
                     render(h){ 
                         return h(CarouselTermsListTheme, {
@@ -58,7 +59,8 @@ export default (element) => {
                                 tainacanApiRoot: this.tainacanApiRoot,
                                 tainacanBaseUrl: this.tainacanBaseUrl,
                                 className: this.className,
-                                taxonomyId: this.taxonomyId
+                                taxonomyId: this.taxonomyId,
+                                style: this.style
                             }
                         });
                     },
@@ -77,6 +79,7 @@ export default (element) => {
                         this.showTermThumbnail = this.$el.attributes['show-term-thumbnail'] != undefined ? this.$el.attributes['show-term-thumbnail'].value == 'true' : false;
                         this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
                         this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
+                        this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
                     },
                     methods: {
                         __(text, domain) {

src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/theme.vue

@@ -1,5 +1,7 @@
 <template>
-    <div :class="className + ' has-mounted'">
+    <div 
+            :style="style"
+            :class="className + ' has-mounted'">
         <div v-if="!isLoading">
             <div  
                     :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '')"
@@ -175,7 +177,8 @@ export default {
         tainacanApiRoot: String,
         tainacanBaseUrl: String,
         className: String,
-        taxonomyId: String
+        taxonomyId: String,
+        style: String
     },
     data() {
         return {

src/views/gutenberg-blocks/tainacan-blocks/collections-list/block.json

@@ -1,6 +1,7 @@
 {
     "name": "tainacan/collections-list",
     "title": "Tainacan Collections List",
+    "apiVersion": 2,
     "category": "tainacan-blocks",
     "keywords": [ "Tainacan", "collections", "repository", "tainacan" ],
     "description": "Expose collections from your Tainacan repository",
@@ -86,6 +87,12 @@
         "html": false,
         "typography": {
             "fontSize": true
+        },
+        "color": {
+            "text": true,
+            "background": false,
+            "gradients": false,
+            "link": true
         }
     },
     "editorScript": "collections-list",

src/views/gutenberg-blocks/tainacan-blocks/collections-list/edit.js

@@ -2,7 +2,7 @@ const { __ } = wp.i18n;
 
 const { RangeControl, IconButton, Button, ToggleControl, Placeholder, PanelBody } = wp.components;
 
-const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
 import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 import CollectionsModal from './collections-modal.js';
@@ -19,6 +19,9 @@ export default function({ attributes, setAttributes, className, isSelected }) {
         gridMargin
     } = attributes;
     
+    // Gets blocks props from hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+
     function prepareCollection(collection) {
         return (
             <li 
@@ -131,7 +134,7 @@ export default function({ attributes, setAttributes, className, isSelected }) {
                     src={ `${tainacan_blocks.base_url}/assets/images/collections-list.png` } />
         </div>
     : (
-        <div className={className}>
+        <div { ...blockProps }>
 
             <div>
                 <BlockControls>

src/views/gutenberg-blocks/tainacan-blocks/collections-list/save.js

@@ -1,4 +1,10 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
 export default function({ attributes, className }) {
     const { content } = attributes;
-    return <div data-module="collections-list" className={ className }>{ content }</div>
+    
+    // Gets attributes such as style, that are automatically added by the editor hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
+    
+    return <div { ...blockProps } data-module="collections-list">{ content }</div>
 };

src/views/gutenberg-blocks/tainacan-blocks/collections-list/style.scss

@@ -54,7 +54,7 @@
             width: 185px;
 
             a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit; 
                 border: none;
                 font-weight: bold;
                 line-height: normal;
@@ -72,8 +72,9 @@
                 display: none;
             }
 
+            a,
             &:hover a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit; 
                 text-decoration: none;
             }
         }
@@ -147,7 +148,7 @@
             width: calc(20% - 24px);
 
             a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit; 
                 height: auto;
                 display: flex;
                 align-items: center;
@@ -168,8 +169,9 @@
                 display: none;
             }
 
+            a,
             &:hover a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit; 
                 text-decoration: none;
             }
 
@@ -195,3 +197,12 @@
         }
     }
 }
+.block-editor-block-list__block:not(.has-text-color)>.wp-block-tainacan-collections-list {
+    li.collection-list-item {
+        a>span,
+        a:hover>span {
+            color: inherit;
+        }
+    }
+}
+

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/block.json

@@ -1,6 +1,7 @@
 {
     "name": "tainacan/dynamic-items-list",
     "title": "Tainacan Collection's Items List",
+    "apiVersion": 2,
     "category": "tainacan-blocks",
     "keywords": [ "items", "search", "collection" ],
     "description": "Dynamically list items from a Tainacan items search",
@@ -84,6 +85,14 @@
             "type": "String",
             "default": ""
         },
+        "selectedItems": {
+            "type": "Array",
+            "default": []
+        },
+        "loadStrategy": {
+            "type": "String",
+            "value": "search"
+        },
         "order": {
             "type": "String",
             "default": ""
@@ -141,6 +150,12 @@
         "html": false,
         "typography": {
             "fontSize": true
+        },
+        "color": {
+            "text": true,
+            "background": false,
+            "gradients": false,
+            "link": true
         }
     },
     "editorScript": "dynamic-items-list",

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/deprecated.js

@@ -1,4 +1,206 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
 export default [
+    /* Deprecated when new selection strategy was added */
+    {
+        "attributes": {
+            "content": {
+                "type": "Array",
+                "source": "children",
+                "selector": "div"
+            },
+            "collectionId": {
+                "type": "String",
+                "default": ""
+            },
+            "items": {
+                "type": "Array",
+                "default": []
+            },
+            "showImage": {
+                "type": "Boolean",
+                "default": true
+            },
+            "showName": {
+                "type": "Boolean",
+                "default": true
+            },
+            "layout": {
+                "type": "String",
+                "default": "grid"
+            },
+            "isModalOpen": {
+                "type": "Boolean",
+                "default": false
+            },
+            "gridMargin": {
+                "type": "Number",
+                "default": 0
+            },
+            "searchURL": {
+                "type": "String",
+                "default": ""
+            },
+            "itemsRequestSource": {
+                "type": "String",
+                "default": ""
+            },
+            "maxItemsNumber": {
+                "type": "Number",
+                "value": 12
+            },
+            "isLoading": {
+                "type": "Boolean",
+                "value": false
+            },
+            "isLoadingCollection": {
+                "type": "Boolean",
+                "value": false
+            },
+            "showSearchBar": {
+                "type": "Boolean",
+                "value": false
+            },
+            "showCollectionHeader": {
+                "type": "Boolean",
+                "value": false
+            },
+            "showCollectionLabel": {
+                "type": "Boolean",
+                "value": false
+            },
+            "collection": {
+                "type": "Object",
+                "value": {}
+            },
+            "searchString": {
+                "type": "String",
+                "default": ""
+            },
+            "order": {
+                "type": "String",
+                "default": ""
+            },
+            "blockId": {
+                "type": "String",
+                "default": ""
+            },
+            "collectionBackgroundColor": {
+                "type": "String",
+                "default": "#454647"
+            },
+            "collectionTextColor": {
+                "type": "String",
+                "default": "#ffffff"
+            },
+            "mosaicHeight": {
+                "type": "Number",
+                "value": 280
+            },
+            "mosaicGridColumns": {
+                "type": "Number",
+                "value": 3
+            },
+            "mosaicGridRows": {
+                "type": "Number",
+                "value": 3
+            },
+            "sampleBackgroundImage": {
+                "type": "String",
+                "default": ""
+            },
+            "mosaicItemFocalPoint": {
+                "type": "Object",
+                "default": {
+                    "x": 0.5,
+                    "y": 0.5
+                }
+            },
+            "mosaicDensity": {
+                "type": "Number",
+                "default": 5
+            },
+            "maxColumnsCount": {
+                "type": "Number",
+                "default": 4
+            },
+            "cropImagesToSquare": {
+                "type": "Boolean",
+                "value": true
+            }
+        },
+        "supports": {
+            "align": ["full", "wide"],
+            "html": false,
+            "typography": {
+                "fontSize": true
+            },
+            "color": {
+                "text": true,
+                "background": false,
+                "gradients": false,
+                "link": true
+            }
+        },
+        save: function({ attributes, className }) {
+            const {
+                content, 
+                blockId,
+                collectionId,  
+                showImage,
+                showName,
+                layout,
+                gridMargin,
+                searchURL,
+                maxItemsNumber,
+                order,
+                showSearchBar,
+                showCollectionHeader,
+                showCollectionLabel,
+                collectionBackgroundColor,
+                collectionTextColor,
+                mosaicHeight,
+                mosaicGridRows,
+                mosaicGridColumns,
+                mosaicItemFocalPoint,
+                mosaicDensity,
+                maxColumnsCount,
+                cropImagesToSquare
+            } = attributes;
+        
+            // Gets attributes such as style, that are automatically added by the editor hook
+            const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
+            return <div
+                        { ...blockProps }
+                        data-module="dynamic-items-list"
+                        search-url={ searchURL }
+                        collection-id={ collectionId }
+                        show-image={ '' + showImage }
+                        show-name={ '' + showName }
+                        show-search-bar={ '' + showSearchBar }
+                        show-collection-header={ '' + showCollectionHeader }
+                        show-collection-label={ '' + showCollectionLabel }
+                        crop-images-to-square={ '' + cropImagesToSquare }
+                        layout={ layout }
+                        mosaic-height={ mosaicHeight }
+                        mosaic-density={ mosaicDensity }
+                        mosaic-grid-rows={ mosaicGridRows } 
+                        mosaic-grid-columns={ mosaicGridColumns }
+                        mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) } 
+                        mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) } 
+                        max-columns-count={ maxColumnsCount }
+                        collection-background-color={ collectionBackgroundColor }
+                        collection-text-color={ collectionTextColor }
+                        grid-margin={ gridMargin }
+                        max-items-number={ maxItemsNumber }
+                        order={ order }
+                        tainacan-api-root={ tainacan_blocks.root }
+                        tainacan-base-url={ tainacan_blocks.base_url }
+                        id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
+                            { content }
+                    </div>
+        }
+    },
     /* Deprecated on Tainacan 0.18.4, due to the new block.json strategy */
     {
         attributes: {

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/dynamic-items-modal.js

@@ -1,293 +0,0 @@
-import tainacan from '../../js/axios.js';
-import axios from 'axios';
-
-const { __ } = wp.i18n;
-
-const { TextControl, Button, Modal, RadioControl, Spinner } = wp.components;
-
-export default class DynamicItemsModal extends React.Component {
-    constructor(props) {
-        super(props);
-
-        // Initialize state
-        this.state = {
-            collectionsPerPage: 24,
-            collectionId: undefined,  
-            collectionName: '', 
-            isLoadingCollections: false, 
-            modalCollections: [],
-            totalModalCollections: 0, 
-            collectionPage: 1,
-            temporaryCollectionId: '',
-            searchCollectionName: '',
-            collections: [],
-            collectionsRequestSource: undefined,
-            searchURL: '',
-        };
-        
-        // Bind events
-        this.resetCollections = this.resetCollections.bind(this);
-        this.selectCollection = this.selectCollection.bind(this);
-        this.fetchCollections = this.fetchCollections.bind(this);
-        this.fetchModalCollections = this.fetchModalCollections.bind(this);
-        this.fetchCollection = this.fetchCollection.bind(this);
-        this.applySelectedSearchURL = this.applySelectedSearchURL.bind(this);
-    }
-
-    componentWillMount() {
-        
-        this.setState({ 
-            collectionId: this.props.existingCollectionId
-        });
-         
-        if (this.props.existingCollectionId) {
-            this.fetchCollection(this.props.existingCollectionId);
-            this.setState({ searchURL: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId + '/items/?readmode=true&iframemode=true&status=publish' });
-        } else {
-            this.setState({ collectionPage: 1 });
-            this.fetchModalCollections();
-        }
-    }
-
-    // COLLECTIONS RELATED --------------------------------------------------
-    fetchModalCollections() {
-
-        let someModalCollections = this.state.modalCollections;
-        if (this.state.collectionPage <= 1)
-            someModalCollections = [];
-
-        let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage + '&paged=' + this.state.collectionPage;
-
-        this.setState({ 
-            isLoadingCollections: true,
-            collectionPage: this.state.collectionPage + 1, 
-            modalCollections: someModalCollections
-        });
-
-        tainacan.get(endpoint)
-            .then(response => {
-
-                let otherModalCollections = this.state.modalCollections;
-                for (let collection of response.data) {
-                    otherModalCollections.push({ 
-                        name: collection.name, 
-                        id: collection.id
-                    });
-                }
-
-                this.setState({ 
-                    isLoadingCollections: false, 
-                    modalCollections: otherModalCollections,
-                    totalModalCollections: response.headers['x-wp-total']
-                });
-            
-                return otherModalCollections;
-            })
-            .catch(error => {
-                console.log('Error trying to fetch collections: ' + error);
-            });
-    }
-
-    fetchCollection(collectionId) {
-        tainacan.get('/collections/' + collectionId)
-            .then((response) => {
-                this.setState({ collectionName: response.data.name });
-            }).catch(error => {
-                console.log('Error trying to fetch collection: ' + error);
-            });
-    }
-
-    selectCollection(selectedCollectionId) {
-        this.setState({
-            collectionId: selectedCollectionId,
-            searchURL: tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/' + selectedCollectionId + '/items/?readmode=true&iframemode=true&status=publish'
-        });
-
-        this.props.onSelectCollection(selectedCollectionId);
-        this.fetchCollection(selectedCollectionId);
-    }
-
-    fetchCollections(name) {
-
-        if (this.state.collectionsRequestSource != undefined)
-            this.state.collectionsRequestSource.cancel('Previous collections search canceled.');
-
-        let aCollectionRequestSource = axios.CancelToken.source();
-
-        this.setState({ 
-            collectionsRequestSource: aCollectionRequestSource,
-            isLoadingCollections: true, 
-            collections: [],
-            items: []
-        });
-
-        let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage;
-        if (name != undefined && name != '')
-            endpoint += '&search=' + name;
-
-        tainacan.get(endpoint, { cancelToken: aCollectionRequestSource.token })
-            .then(response => {
-                let someCollections = response.data.map((collection) => ({ name: collection.name, id: collection.id + '' }));
-
-                this.setState({ 
-                    isLoadingCollections: false, 
-                    collections: someCollections
-                });
-                
-                return someCollections;
-            })
-            .catch(error => {
-                console.log('Error trying to fetch collections: ' + error);
-            });
-    }
-
-    applySelectedSearchURL() {    
-        this.props.onApplySearchURL(document.getElementById("itemsFrame").contentWindow.location.href);
-    }
-
-    resetCollections() {
-
-        this.setState({
-            collectionId: null,
-            collectionPage: 1,
-            modalCollections: []
-        });
-        this.fetchModalCollections(); 
-    }
-
-    cancelSelection() {
-
-        this.setState({
-            modalCollections: []
-        });
-
-        this.props.onCancelSelection();
-    }
-
-    render() {
-        return this.state.collectionId ? (
-            // Items modal
-        <Modal
-                className="wp-block-tainacan-modal dynamic-modal"
-                title={__('Configure the items search to be used on block', 'tainacan')}
-                onRequestClose={ () => this.cancelSelection() }
-                shouldCloseOnClickOutside={ false }
-                contentLabel={__('Configure your items search to be shown on block', 'tainacan')}>
-                <iframe
-                        id="itemsFrame"
-                        src={ this.state.searchURL } />
-                <div className="modal-footer-area">
-                    <Button 
-                        isSecondary
-                        onClick={ () => { this.resetCollections() }}>
-                        {__('Switch collection', 'tainacan')}
-                    </Button>
-                    <Button 
-                        isPrimary
-                        onClick={ () => this.applySelectedSearchURL() }>
-                        {__('Use this search', 'tainacan')}
-                    </Button>
-                </div>
-        </Modal>
-    ) : (
-        // Collections modal
-        <Modal
-                className="wp-block-tainacan-modal"
-                title={__('Select a collection to fetch items from', 'tainacan')}
-                onRequestClose={ () => this.cancelSelection() }
-                shouldCloseOnClickOutside={ false }
-                contentLabel={__('Select items', 'tainacan')}>
-                <div>
-                    <div className="modal-search-area">
-                        <TextControl 
-                                label={__('Search for a collection', 'tainacan')}
-                                value={ this.state.searchCollectionName }
-                                onChange={(value) => {
-                                    this.setState({ 
-                                        searchCollectionName: value
-                                    });
-                                    _.debounce(this.fetchCollections(value), 300);
-                                }}/>
-                    </div>
-                    {(
-                    this.state.searchCollectionName != '' ? (
-                        this.state.collections.length > 0 ?
-                        (
-                            <div>
-                                <div className="modal-radio-list">
-                                    {
-                                    <RadioControl
-                                        selected={ this.state.temporaryCollectionId }
-                                        options={
-                                            this.state.collections.map((collection) => {
-                                                return { label: collection.name, value: '' + collection.id }
-                                            })
-                                        }
-                                        onChange={ ( aCollectionId ) => { 
-                                            this.setState({ temporaryCollectionId: aCollectionId });
-                                        } } />
-                                    }                                      
-                                </div>
-                            </div>
-                        ) :
-                        this.state.isLoadingCollections ? (
-                            <Spinner />
-                        ) :
-                        <div className="modal-loadmore-section">
-                            <p>{ __('Sorry, no collection found.', 'tainacan') }</p>
-                        </div> 
-                    ):
-                    this.state.modalCollections.length > 0 ? 
-                    (   
-                        <div>
-                            <div className="modal-radio-list">
-                                {
-                                <RadioControl
-                                    selected={ this.state.temporaryCollectionId }
-                                    options={
-                                        this.state.modalCollections.map((collection) => {
-                                            return { label: collection.name, value: '' + collection.id }
-                                        })
-                                    }
-                                    onChange={ ( aCollectionId ) => { 
-                                        this.setState({ temporaryCollectionId: aCollectionId });
-                                    } } />
-                                }                                     
-                            </div>
-                            <div className="modal-loadmore-section">
-                                <p>{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>
-                                {
-                                    this.state.modalCollections.length < this.state.totalModalCollections ? (
-                                    <Button 
-                                        isSecondary
-                                        isSmall
-                                        onClick={ () => this.fetchModalCollections() }>
-                                        {__('Load more', 'tainacan')}
-                                    </Button>
-                                    ) : null
-                                }
-                            </div>
-                        </div>
-                    ) : this.state.isLoadingCollections ? <Spinner/> :
-                    <div className="modal-loadmore-section">
-                        <p>{ __('Sorry, no collection found.', 'tainacan') }</p>
-                    </div>
-                )}
-                <div className="modal-footer-area">
-                    <Button 
-                        isSecondary
-                        onClick={ () => { this.cancelSelection() }}>
-                        {__('Cancel', 'tainacan')}
-                    </Button>
-                    <Button
-                        isPrimary
-                        disabled={ this.state.temporaryCollectionId == undefined || this.state.temporaryCollectionId == null || this.state.temporaryCollectionId == ''}
-                        onClick={ () => { this.selectCollection(this.state.temporaryCollectionId);  } }>
-                        {__('Configure search', 'tainacan')}
-                    </Button>
-                </div>
-            </div>
-        </Modal> 
-        );
-    }
-}

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/edit.js

@@ -2,9 +2,9 @@ const { __ } = wp.i18n;
 
 const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Placeholder, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
 
-const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
-import DynamicItemsModal from './dynamic-items-modal.js';
+import DynamicItemsModal from '../carousel-items-list/dynamic-and-carousel-items-modal.js';
 import tainacan from '../../js/axios.js';
 import axios from 'axios';
 import qs from 'qs';
@@ -16,7 +16,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         items, 
         content, 
         collection,
-        collectionId,  
+        collectionId,
         showImage,
         showName,
         layout,
@@ -27,7 +27,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         maxItemsNumber,
         order,
         searchString,
+        selectedItems,
         isLoading,
+        loadStrategy,
         showSearchBar,
         showCollectionHeader,
         showCollectionLabel,
@@ -44,8 +46,12 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         cropImagesToSquare
     } = attributes;
 
+    // Gets blocks props from hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+
     // Obtains block's client id to render it on save function
     setAttributes({ blockId: clientId });
+    const thumbHelper = ThumbnailHelperFunctions();
     
     // Sets some defaults that were not working
     if (maxColumnsCount === undefined) {
@@ -56,8 +62,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         cropImagesToSquare = true;    
         setAttributes({ cropImagesToSquare: cropImagesToSquare });
     }
-            
+    if (loadStrategy === undefined) {
-    const thumbHelper = ThumbnailHelperFunctions();
+        loadStrategy = 'search';
+        setAttributes({ loadStrategy: loadStrategy });
+    }
     
     function prepareItem(item) {
         return (
@@ -68,15 +76,26 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                     backgroundImage: layout == 'mosaic' ? `url(${ thumbHelper.getSrc(item['thumbnail'], 'medium_large', item['document_mimetype']) })` : 'none',
                     backgroundPosition: layout == 'mosaic' ? `${ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) * 100 }% ${ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) * 100 }%` : 'none'
                 }}
-            >      
+            >
+                { loadStrategy == 'selection' ?
+                    ( tainacan_blocks.wp_version < '5.4' ?
+                        <IconButton
+                            onClick={ () => removeItemOfId(item.id) }
+                            icon="no-alt"
+                            label={__('Remove', 'tainacan')}/>
+                        :
+                        <Button
+                            onClick={ () => removeItemOfId(item.id) }
+                            icon="no-alt"
+                            label={__('Remove', 'tainacan')}/>
+                    )
+                    :null
+                }
                 <a 
                     id={ isNaN(item.id) ? item.id : 'item-id-' + item.id }
                     href={ item.url } 
                     onClick={ (event) => event.preventDefault() }
                     target="_blank"
-                    style={ {
-                        
-                    } }
                     className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
                     <img
                         src={ thumbHelper.getSrc(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
@@ -107,69 +126,69 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         )
     }
 
-    function setContent(){
+    function setContent() {
+        isLoading = true;
 
-        if (searchURL) {
+        setAttributes({
+            isLoading: isLoading
+        });
 
-            items = [];
+        items = [];
-            isLoading = true;
+        
+        if (loadStrategy == 'parent') {
+
+            if (layout !== 'mosaic') {
             
+                for (let item of selectedItems)
+                    items.push(prepareItem(item));
+
+                setAttributes({
+                    content: <div></div>,
+                    items: items,
+                    isLoading: false
+                });
+
+            } else {
+                // Initializes some variables
+                mosaicDensity = mosaicDensity ? mosaicDensity : 5;
+                mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
+                mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
+                mosaicHeight = mosaicHeight ? mosaicHeight : 280;
+                mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 };
+                sampleBackgroundImage = response.data.items && response.data.items[0] && response.data.items[0] ? getItemThumbnail(response.data.items[0], 'tainacan-medium') : ''; 
+
+                const mosaicGroups = mosaicPartition(response.data.items);
+                for (let mosaicGroup of mosaicGroups)
+                    items.push(prepareMosaicItem(mosaicGroup, mosaicGroups.length));
+
+                setAttributes({
+                    content: <div></div>,
+                    items: items,
+                    isLoading: false,
+                    itemsRequestSource: itemsRequestSource,
+                    mosaicDensity: mosaicDensity,
+                    mosaicHeight: mosaicHeight,
+                    mosaicGridRows: mosaicGridRows,
+                    mosaicGridColumns: mosaicGridColumns,
+                    mosaicItemFocalPoint: mosaicItemFocalPoint,
+                    sampleBackgroundImage: sampleBackgroundImage
+                });
+            }
+
+        } else if (loadStrategy == 'selection') {
+
             if (itemsRequestSource != undefined && typeof itemsRequestSource == 'function')
                 itemsRequestSource.cancel('Previous items search canceled.');
 
             itemsRequestSource = axios.CancelToken.source();
             
-            setAttributes({
+            let endpoint = '/collection/' + collectionId + '/items?'+ qs.stringify({ postin: selectedItems, perpage: selectedItems.length }) + '&fetch_only=title,url,thumbnail';
-                isLoading: isLoading
-            });
-
-            let endpoint = '/collection' + searchURL.split('#')[1].split('/collections')[1];
-            let query = endpoint.split('?')[1];
-            let queryObject = qs.parse(query);
-
-            // Set up max items to be shown
-            if (maxItemsNumber != undefined && maxItemsNumber > 0)
-                queryObject.perpage = maxItemsNumber;
-            else if (queryObject.perpage != undefined && queryObject.perpage > 0)
-                setAttributes({ maxItemsNumber: queryObject.perpage });
-            else {
-                queryObject.perpage = 12;
-                setAttributes({ maxItemsNumber: 12 });
-            }
-
-            // Set up sorting order
-            if (order != '' && showSearchBar)
-                queryObject.order = order;
-            else if (queryObject.order != '')
-                setAttributes({ order: queryObject.order });
-            else {
-                queryObject.order = 'asc';
-                setAttributes({ order: 'asc' });
-            }
-
-            // Set up sorting order
-            if (searchString != undefined)
-                queryObject.search = searchString;
-            else if (queryObject.search != undefined)
-                setAttributes({ searchString: queryObject.search });
-            else {
-                delete queryObject.search;
-                setAttributes({ searchString: undefined });
-            }
-
-            // Remove unecessary queries
-            delete queryObject.readmode;
-            delete queryObject.iframemode;
-            delete queryObject.admin_view_mode;
-            delete queryObject.fetch_only_meta;
-            
-            endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';
             
             tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
                 .then(response => {
-                    
+
                     if (layout !== 'mosaic') {
-                        
+
                         for (let item of response.data.items)
                             items.push(prepareItem(item));
 
@@ -206,7 +225,102 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                             sampleBackgroundImage: sampleBackgroundImage
                         });
                     }
+                        
                 });
+        } else {
+
+            if (searchURL) {
+
+                if (itemsRequestSource != undefined && typeof itemsRequestSource == 'function')
+                    itemsRequestSource.cancel('Previous items search canceled.');
+
+                itemsRequestSource = axios.CancelToken.source();
+                
+                let endpoint = '/collection' + searchURL.split('#')[1].split('/collections')[1];
+                let query = endpoint.split('?')[1];
+                let queryObject = qs.parse(query);
+
+                // Set up max items to be shown
+                if (maxItemsNumber != undefined && maxItemsNumber > 0)
+                    queryObject.perpage = maxItemsNumber;
+                else if (queryObject.perpage != undefined && queryObject.perpage > 0)
+                    setAttributes({ maxItemsNumber: queryObject.perpage });
+                else {
+                    queryObject.perpage = 12;
+                    setAttributes({ maxItemsNumber: 12 });
+                }
+
+                // Set up sorting order
+                if (order != '' && showSearchBar)
+                    queryObject.order = order;
+                else if (queryObject.order != '')
+                    setAttributes({ order: queryObject.order });
+                else {
+                    queryObject.order = 'asc';
+                    setAttributes({ order: 'asc' });
+                }
+
+                // Set up sorting order
+                if (searchString != undefined)
+                    queryObject.search = searchString;
+                else if (queryObject.search != undefined)
+                    setAttributes({ searchString: queryObject.search });
+                else {
+                    delete queryObject.search;
+                    setAttributes({ searchString: undefined });
+                }
+
+                // Remove unecessary queries
+                delete queryObject.readmode;
+                delete queryObject.iframemode;
+                delete queryObject.admin_view_mode;
+                delete queryObject.fetch_only_meta;
+                
+                endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';
+                
+                tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
+                    .then(response => {
+                        
+                        if (layout !== 'mosaic') {
+                            
+                            for (let item of response.data.items)
+                                items.push(prepareItem(item));
+
+                            setAttributes({
+                                content: <div></div>,
+                                items: items,
+                                isLoading: false,
+                                itemsRequestSource: itemsRequestSource
+                            });
+
+                        } else {
+                            // Initializes some variables
+                            mosaicDensity = mosaicDensity ? mosaicDensity : 5;
+                            mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
+                            mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
+                            mosaicHeight = mosaicHeight ? mosaicHeight : 280;
+                            mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 };
+                            sampleBackgroundImage = response.data.items && response.data.items[0] && response.data.items[0] ? getItemThumbnail(response.data.items[0], 'tainacan-medium') : ''; 
+
+                            const mosaicGroups = mosaicPartition(response.data.items);
+                            for (let mosaicGroup of mosaicGroups)
+                                items.push(prepareMosaicItem(mosaicGroup, mosaicGroups.length));
+
+                            setAttributes({
+                                content: <div></div>,
+                                items: items,
+                                isLoading: false,
+                                itemsRequestSource: itemsRequestSource,
+                                mosaicDensity: mosaicDensity,
+                                mosaicHeight: mosaicHeight,
+                                mosaicGridRows: mosaicGridRows,
+                                mosaicGridColumns: mosaicGridColumns,
+                                mosaicItemFocalPoint: mosaicItemFocalPoint,
+                                sampleBackgroundImage: sampleBackgroundImage
+                            });
+                        }
+                    });
+            }
         }
     }
 
@@ -258,13 +372,46 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         )
     }
 
-    function openDynamicItemsModal() {
+    function openDynamicItemsModal(aLoadStrategy) {
+        loadStrategy = aLoadStrategy;
         isModalOpen = true;
         setAttributes( { 
-            isModalOpen: isModalOpen
+            isModalOpen: isModalOpen,
+            loadStrategy: loadStrategy
         } );
     }
 
+    function removeItemOfId(itemId) {
+        
+        let existingItemIndex = -1;
+
+        let existingSelectedItemIndex = selectedItems.findIndex((existingSelectedItem) => existingSelectedItem == itemId);
+        if (existingSelectedItemIndex >= 0)
+            selectedItems.splice(existingSelectedItemIndex, 1);
+
+        if (layout == 'mosaic') {
+            existingItemIndex = items.findIndex((existingItem) => existingItem.key == itemId);
+
+            setAttributes({ 
+                selectedItems: selectedItems,
+                content: <div></div> 
+            });
+            // In the case of the mosaic layout, we need to re-render as the items array is organized in groups.
+            setContent();
+        } else {
+            existingItemIndex = items.findIndex((existingItem) => existingItem.key == itemId);
+
+            if (existingItemIndex >= 0)
+                items.splice(existingItemIndex, 1);
+            
+            setAttributes({ 
+                selectedItems: selectedItems,
+                items: items,
+                content: <div></div> 
+            });
+        }
+    }
+
     function updateLayout(newLayout) {
         layout = newLayout;
 
@@ -344,32 +491,49 @@ export default function({ attributes, setAttributes, className, isSelected, clie
     ];
 
     return content == 'preview' ? 
-            <div className={className}>
-                <img
-                        width="100%"
-                        src={ `${tainacan_blocks.base_url}/assets/images/dynamic-items-list.png` } />
-            </div>
-        : (
         <div className={className}>
+            <img
+                    width="100%"
+                    src={ `${tainacan_blocks.base_url}/assets/images/dynamic-items-list.png` } />
+        </div>
+        : (
+        <div { ...blockProps }>
 
-            <div>
+            { items.length ?
                 <BlockControls>
                     { TainacanBlocksCompatToolbar({ controls: layoutControls }) }
-                    { items.length ? 
+                    { loadStrategy != 'parent' ? 
-                        TainacanBlocksCompatToolbar({
+                        (
-                            label: __('Configure search', 'tainacan'),
+                            loadStrategy == 'selection' ?
-                            icon: <svg
+                            TainacanBlocksCompatToolbar({
-                                        xmlns="http://www.w3.org/2000/svg"
+                                label: __('Add more items', 'tainacan'),
-                                        viewBox="0 -2 24 24"
+                                icon: <svg
-                                        height="24px"
+                                            xmlns="http://www.w3.org/2000/svg"
-                                        width="24px">
+                                            viewBox="0 -2 24 24"
-                                    <path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
+                                            height="24px"
-                                </svg>,
+                                            width="24px">
-                            onClick: openDynamicItemsModal
+                                        <path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
-                        })
+                                    </svg>,
-                    : null }
+                                onClick: openDynamicItemsModal,
+                                onClickParams: 'selection'
+                            })
+                            :
+                            TainacanBlocksCompatToolbar({
+                                label: __('Configure a search', 'tainacan'),
+                                icon: <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            viewBox="0 -2 24 24"
+                                            height="24px"
+                                            width="24px">
+                                        <path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
+                                    </svg>,
+                                onClick: openDynamicItemsModal,
+                                onClickParams: 'search'
+                            })
+                        ) : null
+                    }
                 </BlockControls>
-            </div>
+            : null }
 
             <div>
                 <InspectorControls>
@@ -432,39 +596,43 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                             : null
                             }
                     </PanelBody> 
-                    <PanelBody
+                    { loadStrategy == 'search' ? 
-                            title={__('Search bar', 'tainacan')}
+                        <PanelBody
-                            initialOpen={ true }
+                                title={__('Search bar', 'tainacan')}
-                        >
+                                initialOpen={ true }
-                        <ToggleControl
+                            >
-                            label={__('Display bar', 'tainacan')}
+                            <ToggleControl
-                            help={ showSearchBar ? __('Toggle to show search bar on block', 'tainacan') : __('Do not show search bar', 'tainacan')}
+                                label={__('Display bar', 'tainacan')}
-                            checked={ showSearchBar }
+                                help={ showSearchBar ? __('Toggle to show search bar on block', 'tainacan') : __('Do not show search bar', 'tainacan')}
-                            onChange={ ( isChecked ) => {
+                                checked={ showSearchBar }
-                                    showSearchBar = isChecked;
+                                onChange={ ( isChecked ) => {
-                                    setAttributes({ showSearchBar: showSearchBar });
+                                        showSearchBar = isChecked;
-                                } 
+                                        setAttributes({ showSearchBar: showSearchBar });
-                            }
+                                    } 
-                        />
+                                }
-                    </PanelBody>
+                            />
+                        </PanelBody>
+                    : null }
                     <PanelBody
                             title={__('Items', 'tainacan')}
                             initialOpen={ true }
                         >
-                        <div>
+                        { loadStrategy == 'search' ?
-                            <RangeControl
+                            <div>
-                                label={__('Maximum number of items', 'tainacan')}
+                                <RangeControl
-                                value={ maxItemsNumber ? maxItemsNumber : 12 }
+                                    label={__('Maximum number of items', 'tainacan')}
-                                onChange={ ( aMaxItemsNumber ) => {
+                                    value={ maxItemsNumber ? maxItemsNumber : 12 }
-                                    maxItemsNumber = aMaxItemsNumber;
+                                    onChange={ ( aMaxItemsNumber ) => {
-                                    setAttributes( { maxItemsNumber: aMaxItemsNumber } ) 
+                                        maxItemsNumber = aMaxItemsNumber;
-                                    setContent();
+                                        setAttributes( { maxItemsNumber: aMaxItemsNumber } ) 
-                                }}
+                                        setContent();
-                                min={ 1 }
+                                    }}
-                                max={ 96 }
+                                    min={ 1 }
-                            />
+                                    max={ 96 }
+                                />
+                            <hr></hr>
                         </div>
-                        <hr></hr>
+                         : null }
                         <div>
                             { layout == 'list' ? 
                                 <div style={{ marginTop: '16px'}}>
@@ -591,6 +759,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                     { label: '4 x 3', value: '4x3' },
                                     { label: '4 x 5', value: '4x5' },
                                     { label: '5 x 4', value: '5x4' },
+                                    { label: '6 x 5', value: '6x5' },
                                 ] }
                                 onChange={ ( aGrid ) => { 
                                     mosaicGridRows = aGrid.split('x')[0];
@@ -625,21 +794,41 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                 <div>
                     { isModalOpen ? 
                         <DynamicItemsModal
+                            loadStrategy={ loadStrategy }
                             existingCollectionId={ collectionId } 
                             existingSearchURL={ searchURL } 
                             onSelectCollection={ (selectedCollectionId) => {
+                                if (collectionId != selectedCollectionId) {
+                                    items = [];
+                                    selectedItems = [];
+                                }
                                 collectionId = selectedCollectionId;
-                                setAttributes({ collectionId: collectionId });
+                                setAttributes({ 
+                                    collectionId: collectionId,
+                                    items: items,
+                                    selectedItems: selectedItems
+                                });
                                 fetchCollectionForHeader();
                             }}
                             onApplySearchURL={ (aSearchURL) =>{
-                                searchURL = aSearchURL
+                                searchURL = aSearchURL;
+                                loadStrategy = 'search';
                                 setAttributes({
                                     searchURL: searchURL,
                                     isModalOpen: false
                                 });
                                 setContent();
                             }}
+                            onApplySelectedItems={ (aSelectionOfItems) => {
+                                selectedItems = selectedItems.concat(aSelectionOfItems); 
+                                loadStrategy = 'selection';
+                                setAttributes({
+                                    selectedItems: selectedItems,
+                                    loadStrategy: loadStrategy,
+                                    isModalOpen: false
+                                });
+                                setContent();
+                            }}
                             onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/> 
                         : null
                     }
@@ -806,12 +995,25 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                     </svg>
                         {__('Dynamically list items from a Tainacan items search', 'tainacan')}
                     </p>
-                    <Button
+                    { 
-                        isPrimary
+                        loadStrategy != 'parent' ?
-                        type="button"
+                            <div>
-                        onClick={ () => openDynamicItemsModal() }>
+                                <Button
-                        {__('Configure search', 'tainacan')}
+                                    isPrimary
-                    </Button>   
+                                    type="button"
+                                    onClick={ () => openDynamicItemsModal('selection') }>
+                                    {__('Select Items', 'tainacan')}
+                                </Button> 
+                                <p style={{ margin: '0 12px' }}>{__('or', 'tainacan')}</p>
+                                <Button
+                                    isPrimary
+                                    type="button"
+                                    onClick={ () => openDynamicItemsModal('search') }>
+                                    {__('Configure a search', 'tainacan')}
+                                </Button>
+                            </div>
+                        : null
+                    }
                 </Placeholder>
                 ) : null
             }

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/save.js

@@ -1,3 +1,5 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
 export default function({ attributes, className }) {
     const {
         content, 
@@ -24,10 +26,12 @@ export default function({ attributes, className }) {
         cropImagesToSquare
     } = attributes;
 
+    // Gets attributes such as style, that are automatically added by the editor hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
     return <div
+                { ...blockProps }
                 data-module="dynamic-items-list"
                 search-url={ searchURL }
-                className={ className }
                 collection-id={ collectionId }
                 show-image={ '' + showImage }
                 show-name={ '' + showName }

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/style.scss

@@ -237,6 +237,7 @@
     ul.items-list-edit li.item-list-item {
         display: flex;
         align-items: flex-start;
+        position: relative;
 
         button {
             position: absolute !important;
@@ -387,7 +388,7 @@
             align-items: center;
 
             a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit; 
                 border: none;
                 font-weight: bold;
                 line-height: normal;
@@ -420,8 +421,9 @@
                 display: none;
             }
 
+            a,
             &:hover a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit; 
                 text-decoration: none;
             }
         }
@@ -502,7 +504,7 @@
             padding: 12px 12px 24px 12px;
 
             a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit; 
                 height: auto;
                 display: flex;
                 align-items: center;
@@ -531,8 +533,9 @@
                 display: none;
             }
 
+            a,
             &:hover a { 
-                color: var(--tainacan-block-gray5, $gray5); 
+                color: inherit; 
                 text-decoration: none;
             }
         }   
@@ -576,7 +579,7 @@
                     width: 100%;
                     height: 100%;
                     display: block;
-                    color: var(--tainacan-block-gray5, $gray5); 
+                    color: inherit; 
                     font-weight: bold;
                     line-height: normal;
                 }
@@ -601,8 +604,9 @@
                     display: none;
                 }
 
+                a,
                 &:hover a { 
-                    color: var(--tainacan-block-gray5, $gray5); 
+                    color: inherit; 
                     text-decoration: none;
                 }                
             }
@@ -1047,5 +1051,13 @@
         }
     }
 }
+.block-editor-block-list__block:not(.has-text-color)>.wp-block-tainacan-dynamic-items-list {
+    li.item-list-item {
+        a>span,
+        a:hover>span {
+            color: var(--tainacan-block-gray5, $gray5);
+        }
+    }
+}
 
 

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.js

@@ -32,6 +32,8 @@ export default (element) => {
                         layout: 'grid',
                         gridMargin: 0,
                         searchURL: '',
+                        selectedItems: [],
+                        loadStrategy: 'search',
                         maxItemsNumber: 12,
                         mosaicHeight: 40,
                         mosaicDensity: 5,
@@ -49,7 +51,8 @@ export default (element) => {
                         collectionTextColor: '#ffffff',
                         tainacanApiRoot: '',
                         tainacanBaseUrl: '',
-                        className: ''
+                        className: '',
+                        style: ''
                     },
                     render(h){ 
                         return h(DynamicItemsListTheme, {
@@ -68,6 +71,8 @@ export default (element) => {
                                 maxColumnsCount: this.maxColumnsCount,
                                 cropImagesToSquare: this.cropImagesToSquare,
                                 searchURL: this.searchURL,
+                                selectedItems: this.selectedItems,
+                                loadStrategy: this.loadStrategy,
                                 maxItemsNumber: this.maxItemsNumber,
                                 order: this.order,
                                 showSearchBar: this.showSearchBar,
@@ -77,13 +82,16 @@ export default (element) => {
                                 collectionTextColor: this.collectionTextColor,
                                 tainacanApiRoot: this.tainacanApiRoot,
                                 tainacanBaseUrl: this.tainacanBaseUrl,
-                                className: this.className    
+                                className: this.className,
+                                style: this.style    
                             }
                         });
                     },
                     beforeMount () {
                         this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
                         this.searchURL = this.$el.attributes['search-url'] != undefined ? this.$el.attributes['search-url'].value : undefined;
+                        this.selectedItems = this.$el.attributes['selected-items'] != undefined ? JSON.parse(this.$el.attributes['selected-items'].value) : undefined;
+                        this.loadStrategy = this.$el.attributes['load-strategy'] != undefined ? this.$el.attributes['load-strategy'].value : undefined;
                         this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
                         this.showImage = this.$el.attributes['show-image'] != undefined ? this.$el.attributes['show-image'].value == 'true' : true;
                         this.showName = this.$el.attributes['show-name'] != undefined ? this.$el.attributes['show-name'].value == 'true' : true;
@@ -106,6 +114,7 @@ export default (element) => {
                         this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
                         this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
                         this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
+                        this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
                     },
                     methods: {
                         __(text, domain) {

src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.vue

@@ -1,5 +1,7 @@
 <template>
-    <div :class="className + ' has-mounted'">
+    <div 
+            :style="style"
+            :class="className + ' has-mounted'">
         <div v-if="showCollectionHeader">
             <div
                     v-if="isLoadingCollection"
@@ -288,6 +290,8 @@ export default {
         layout: String,
         gridMargin: Number,
         searchURL: String,
+        selectedItems: Array,
+        loadStrategy: String,
         maxItemsNumber: Number,
         mosaicDensity: Number,
         mosaicHeight: Number,
@@ -305,7 +309,8 @@ export default {
         collectionTextColor: String,
         tainacanApiRoot: String,
         tainacanBaseUrl: String,
-        className: String
+        className: String,
+        style: String
     },    
     data() {
         return {
@@ -357,70 +362,98 @@ export default {
 
             this.itemsRequestSource = axios.CancelToken.source();
 
-            let endpoint = '/collection' + this.searchURL.split('#')[1].split('/collections')[1];
+            if (this.loadStrategy == 'parent') {
-            let query = endpoint.split('?')[1];
-            let queryObject = qs.parse(query);
 
-            // Set up max items to be shown
+                for (let item of this.selectedItems)
-            if (this.maxItemsNumber != undefined && Number(this.maxItemsNumber) > 0)
+                    this.items.push(item);
-                queryObject.perpage = this.maxItemsNumber;
-            else if (queryObject.perpage != undefined && queryObject.perpage > 0)
-                this.localMaxItemsNumber = queryObject.perpage;
-            else {
-                queryObject.perpage = 12;
-                this.localMaxItemsNumber = 12;
-            }
-
-            // Set up sorting order
-            if (this.localOrder != undefined)
-                queryObject.order = this.localOrder;
-            else if (queryObject.order != undefined)
-                this.localOrder = queryObject.order;
-            else {
-                queryObject.order = 'asc';
-                this.localOrder = 'asc';
-            }
-
-            // Set up sorting order
-            if (this.searchString != undefined)
-                queryObject.search = this.searchString;
-            else if (queryObject.search != undefined)
-                this.searchString = queryObject.search;
-            else {
-                delete queryObject.search;
-                this.searchString = undefined;
-            }
-
-            // Set up paging
-            if (this.paged != undefined)
-                queryObject.paged = this.paged;
-            else if (queryObject.paged != undefined)
-                this.paged = queryObject.paged;
-            else
-                this.paged = 1;
-
-            // emove unecessary queries
-            delete queryObject.readmode;
-            delete queryObject.iframemode;
-            delete queryObject.admin_view_mode;
-            delete queryObject.fetch_only_meta;
-            
-            endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';
-            
-            this.tainacanAxios.get(endpoint, { cancelToken: this.itemsRequestSource.token })
-                .then(response => {
-
-                    for (let item of response.data.items)
-                        this.items.push(item);
 
                     this.isLoading = false;
-                    this.totalItems = response.headers['x-wp-total'];
+                    this.totalItems = this.items.length;
 
-                }).catch((error) => { 
+            } else if (this.loadStrategy == 'selection') {
-                    this.isLoading = false;
+                let endpoint = '/collection/' + this.collectionId + '/items?' + qs.stringify({ postin: this.selectedItems, perpage: this.selectedItems.length }) + '&fetch_only=title,url,thumbnail';
-                    if (error.response && error.response.status && error.response.status == 401)
+                
-                        this.errorMessage = 'Not allowed to see these items.'
+                this.tainacanAxios.get(endpoint, { cancelToken: this.itemsRequestSource.token })
-                });
+                    .then(response => {
+
+                        for (let item of response.data.items)
+                            this.items.push(item);
+
+                        this.isLoading = false;
+                        this.totalItems = response.headers['x-wp-total'];
+
+                    }).catch((error) => { 
+                        this.isLoading = false;
+                        if (error.response && error.response.status && error.response.status == 401)
+                            this.errorMessage = 'Not allowed to see these items.'
+                    });
+            } else {
+
+                let endpoint = '/collection' + this.searchURL.split('#')[1].split('/collections')[1];
+                let query = endpoint.split('?')[1];
+                let queryObject = qs.parse(query);
+
+                // Set up max items to be shown
+                if (this.maxItemsNumber != undefined && Number(this.maxItemsNumber) > 0)
+                    queryObject.perpage = this.maxItemsNumber;
+                else if (queryObject.perpage != undefined && queryObject.perpage > 0)
+                    this.localMaxItemsNumber = queryObject.perpage;
+                else {
+                    queryObject.perpage = 12;
+                    this.localMaxItemsNumber = 12;
+                }
+
+                // Set up sorting order
+                if (this.localOrder != undefined)
+                    queryObject.order = this.localOrder;
+                else if (queryObject.order != undefined)
+                    this.localOrder = queryObject.order;
+                else {
+                    queryObject.order = 'asc';
+                    this.localOrder = 'asc';
+                }
+
+                // Set up sorting order
+                if (this.searchString != undefined)
+                    queryObject.search = this.searchString;
+                else if (queryObject.search != undefined)
+                    this.searchString = queryObject.search;
+                else {
+                    delete queryObject.search;
+                    this.searchString = undefined;
+                }
+
+                // Set up paging
+                if (this.paged != undefined)
+                    queryObject.paged = this.paged;
+                else if (queryObject.paged != undefined)
+                    this.paged = queryObject.paged;
+                else
+                    this.paged = 1;
+
+                // emove unecessary queries
+                delete queryObject.readmode;
+                delete queryObject.iframemode;
+                delete queryObject.admin_view_mode;
+                delete queryObject.fetch_only_meta;
+                
+                endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';
+                
+                this.tainacanAxios.get(endpoint, { cancelToken: this.itemsRequestSource.token })
+                    .then(response => {
+
+                        for (let item of response.data.items)
+                            this.items.push(item);
+
+                        this.isLoading = false;
+                        this.totalItems = response.headers['x-wp-total'];
+
+                    }).catch((error) => { 
+                        this.isLoading = false;
+                        if (error.response && error.response.status && error.response.status == 401)
+                            this.errorMessage = 'Not allowed to see these items.'
+                    });
+            }
         },
         fetchCollectionForHeader() {
             if (this.showCollectionHeader) {

src/views/gutenberg-blocks/tainacan-blocks/facets-list/block.json

@@ -1,6 +1,7 @@
 {
     "name": "tainacan/facets-list",
     "title": "Tainacan Facets List",
+    "apiVersion": 2,
     "category": "tainacan-blocks",
     "keywords": [ "facets", "search", "terms" ],
     "description": "List facets from a Tainacan Collection or Repository",
@@ -131,6 +132,10 @@
         "isLoadingChildTerms": {
             "type": "Number",
             "default": null
+        },
+        "itemsCountStyle": {
+            "type": "String",
+            "default": "default"
         }
     },
     "supports": {
@@ -138,6 +143,12 @@
         "html": false,
         "typography": {
             "fontSize": true
+        },
+        "color": {
+            "text": true,
+            "background": false,
+            "gradients": false,
+            "link": true
         }
     },
     "editorScript": "facets-list",

src/views/gutenberg-blocks/tainacan-blocks/facets-list/deprecated.js

@@ -1,4 +1,186 @@
 export default [
+    /* Deprecated on Tainacan 0.18.6 due to itemsCountStyle */
+    {
+        "attributes": {
+            "content": {
+                "type": "Array",
+                "source": "children",
+                "selector": "div"
+            },
+            "collectionId": {
+                "type": "String",
+                "default": ""
+            },
+            "collectionSlug": {
+                "type": "String",
+                "default": ""
+            },
+            "facets": {
+                "type": "Array",
+                "default": []
+            },
+            "facetsObject": {
+                "type": "Array",
+                "default": []
+            },
+            "showImage": {
+                "type": "Boolean",
+                "default": true
+            },
+            "nameInsideImage": {
+                "type": "Boolean",
+                "default": false
+            },
+            "showItemsCount": {
+                "type": "Boolean",
+                "default": true
+            },
+            "showLoadMore": {
+                "type": "Boolean",
+                "default": false
+            },
+            "showSearchBar": {
+                "type": "Boolean",
+                "value": false
+            },
+            "layout": {
+                "type": "String",
+                "default": "grid"
+            },
+            "cloudRate": {
+                "type": "Number",
+                "default": 1
+            },
+            "isModalOpen": {
+                "type": "Boolean",
+                "default": false
+            },
+            "gridMargin": {
+                "type": "Number",
+                "default": 24
+            },
+            "metadatumId": {
+                "type": "String",
+                "default": ""
+            },
+            "metadatumType": {
+                "type": "String",
+                "default": ""
+            },
+            "facetsRequestSource": {
+                "type": "String",
+                "default": ""
+            },
+            "maxFacetsNumber": {
+                "type": "Number",
+                "value": 12
+            },
+            "isLoading": {
+                "type": "Boolean",
+                "value": false
+            },
+            "isLoadingCollection": {
+                "type": "Boolean",
+                "value": false
+            },
+            "collection": {
+                "type": "Object",
+                "value": {}
+            },
+            "searchString": {
+                "type": "String",
+                "default": ""
+            },
+            "blockId": {
+                "type": "String",
+                "default": ""
+            },
+            "parentTerm": {
+                "type": "Number",
+                "default": null
+            },
+            "isParentTermModalOpen": {
+                "type": "Boolean",
+                "default": false
+            },
+            "maxColumnsCount": {
+                "type": "Number",
+                "default": 5
+            },
+            "appendChildTerms": {
+                "type": "Boolean",
+                "default": false
+            },
+            "childFacetsObject": {
+                "type": "Object",
+                "default": {}
+            },
+            "linkTermFacetsToTermPage": {
+                "type": "Boolean",
+                "default": true
+            },
+            "isLoadingChildTerms": {
+                "type": "Number",
+                "default": null
+            }
+        },
+        "supports": {
+            "align": ["full", "wide"],
+            "html": false,
+            "typography": {
+                "fontSize": true
+            }
+        },
+        save({ attributes, className }){
+            const {
+                content, 
+                blockId,
+                collectionId,  
+                collectionSlug,
+                parentTerm,  
+                showImage,
+                nameInsideImage,
+                showItemsCount,
+                showLoadMore,
+                layout,
+                cloudRate,
+                gridMargin,
+                metadatumId,
+                metadatumType,
+                maxFacetsNumber,
+                maxColumnsCount,
+                showSearchBar,
+                linkTermFacetsToTermPage,
+                appendChildTerms
+            } = attributes;
+            return <div 
+                        data-module="facets-list"
+                        className={ className }
+                        metadatum-id={ metadatumId }
+                        metadatum-type={ metadatumType }
+                        collection-id={ collectionId }  
+                        collection-slug={ collectionSlug }
+                        parent-term-id={ parentTerm ? parentTerm.id : undefined }  
+                        show-image={ '' + showImage }
+                        name-inside-image={ nameInsideImage === true ? 'true' : 'false' }
+                        show-items-count={ '' + showItemsCount }
+                        show-search-bar={ '' + showSearchBar }
+                        show-load-more={ '' + showLoadMore }
+                        append-child-terms={ (appendChildTerms === true ? 'true' : 'false') }
+                        link-term-facets-to-term-page={ linkTermFacetsToTermPage === false ? 'false' : 'true' }
+                        layout={ layout }
+                        cloud-rate={ cloudRate }
+                        grid-margin={ gridMargin }
+                        max-facets-number={ maxFacetsNumber }
+                        max-columns-count={ maxColumnsCount }
+                        tainacan-api-root={ tainacan_blocks.root }
+                        tainacan-base-url={ tainacan_blocks.base_url }
+                        tainacan-site-url={ tainacan_blocks.site_url }
+                        id={ 'wp-block-tainacan-facets-list_' + blockId }>
+                            { content }
+                    </div>
+        }
+    },
     /* Deprecated on Tainacan 0.18.4 due to new block.json strategy */
     {
         attributes: {

src/views/gutenberg-blocks/tainacan-blocks/facets-list/edit.js

@@ -1,8 +1,8 @@
 const { __ } = wp.i18n;
 
-const { BaseControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, PanelBody } = wp.components;
+const { BaseControl, RangeControl, Spinner, SelectControl, Button, ToggleControl, Placeholder, PanelBody } = wp.components;
 
-const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
 
 import MetadataModal from './metadata-modal.js';
 import ParentTermModal from './parent-term-modal.js';
@@ -17,7 +17,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         facetsObject,
         content, 
         collectionId,
-        collectionSlug,    
+        collectionSlug,
         showImage,
         nameInsideImage,
         showItemsCount,
@@ -39,9 +39,13 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         appendChildTerms,
         childFacetsObject,
         linkTermFacetsToTermPage,
-        isLoadingChildTerms
+        isLoadingChildTerms,
+        itemsCountStyle
     } = attributes;
 
+    // Gets blocks props from hook
+    const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+
     // Obtains block's client id to render it on save function
     setAttributes({ blockId: clientId });
     
@@ -70,6 +74,11 @@ export default function({ attributes, setAttributes, className, isSelected, clie
         gridMargin = 24;
         setAttributes({ gridMargin: gridMargin });
     }
+    if (itemsCountStyle === undefined) {
+        itemsCountStyle = 'default';
+        setAttributes({ itemsCountStyle: itemsCountStyle });
+    }
+
     // Uptades previous logic of metadatum type
     if (metadatumType == __('Taxonomy', 'tainacan')) {
         metadatumType = 'Tainacan\\Metadata_Types\\Taxonomy';
@@ -91,7 +100,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                     href={ !appendChildTerms ? ((linkTermFacetsToTermPage && isMetadatumTypeTaxonomy(metadatumType)) ? facet.term_url : facet.url) : (facet.total_children > 0 ? null : (linkTermFacetsToTermPage ? facet.term_url : facet.url)) }
                     onClick={ () => { (appendChildTerms && facet.total_children > 0) ? displayChildTerms(facetId) : null } } 
                     target="_blank"
-                    style={{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'rem' : ''}}>
+                    style={{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'em' : ''}}>
                     { isMetadatumTypeTaxonomy(metadatumType) ? 
                         <img
                             src={ 
@@ -120,8 +129,19 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                             alt={ facet.label ? facet.label : __( 'Thumbnail', 'tainacan' ) }/>
                     : null 
                     }
-                    <span>{ facet.label ? facet.label : '' }</span>
+                    <div className={ 'facet-label-and-count' + (itemsCountStyle === 'below' ? ' is-style-facet-label-and-count--below' : '') }>
-                    { facet.total_items ? <span class="facet-item-count" style={{ display: !showItemsCount ? 'none' : '' }}>&nbsp;({ facet.total_items })</span> : null }
+                        <span>{ facet.label ? facet.label : '' }</span>
+                        {
+                            facet.total_items ?
+                            <span class="facet-item-count" style={{ display: !showItemsCount ? 'none' : '' }}>
+                                { itemsCountStyle === 'below' ? 
+                                    ( facet.total_items != 1 ? (facet.total_items + ' ' + __('items', 'tainacan' )) : (facet.total_items + ' ' + __('item', 'tainacan' )) )
+                                    :
+                                    ( ' (' + facet.total_items + ')' )
+                                }
+                            </span>
+                        : null }
+                    </div>
                     { appendChildTerms && facet.total_children > 0 ? 
                         ( childFacetsObject[facetId] && childFacetsObject[facetId].visible ?
                             <svg 
@@ -425,7 +445,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                     src={ `${tainacan_blocks.base_url}/assets/images/facets-list.png` } />
         </div>
     : (
-        <div className={className}>
+        <div { ...blockProps }>
 
             <div>
                 <BlockControls>
@@ -500,7 +520,21 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                                         updateContent();
                                     } 
                                 }
-                            /> 
+                            />
+                        { showItemsCount ? 
+                            <SelectControl
+                                    label={__('Facets label style', 'tainacan')}
+                                    value={ itemsCountStyle }
+                                    options={ [
+                                        { label: __('Items count in between parenthesis', 'tainacan'), value: 'default' },
+                                        { label: __('Items count below label', 'tainacan'), value: 'below' },
+                                    ] }
+                                    onChange={ ( aStyle ) => {
+                                        itemsCountStyle = aStyle;
+                                        setAttributes({ itemsCountStyle: itemsCountStyle });
+                                        updateContent();
+                                    }}/>
+                        : null }
                     </PanelBody>
                     {/* Settings related only to facets from Taxonomy metadata */}
                     { isMetadatumTypeTaxonomy(metadatumType) ?
@@ -802,7 +836,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                         <ul 
                             style={{ 
                                 gridGap: layout == 'grid' ? (gridMargin + 'px') : 'inherit',
-                                marginTop: showSearchBar ? '1.5rem' : '0px'
+                                marginTop: showSearchBar ? '1.5em' : '0px'
                             }}
                             className={ 'facets-list-edit facets-layout-' + layout + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '') }>
                             { facets }
@@ -810,7 +844,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
                         :
                         <ul 
                             style={{  
-                                marginTop: showSearchBar ? '1.5rem' : '0px'
+                                marginTop: showSearchBar ? '1.5em' : '0px'
                             }}
                             className={ 'facets-list-edit facets-layout-' + layout + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '') }>
                             {
@@ -828,26 +862,24 @@ export default function({ attributes, setAttributes, className, isSelected, clie
             }
 
             { showLoadMore && facets.length > 0 && !isLoading ?
-                <Tooltip text={__('If necessary, the show more button will be available on post or page.', 'tainacan')}>
+                <button
-                    <button
+                        class="show-more-button"
-                            class="show-more-button"
+                        disabled
-                            disabled
+                        label={__('Show more', 'tainacan')}>
-                            label={__('Show more', 'tainacan')}>
+                    <span class="icon">
-                        <span class="icon">
+                        <i>
-                            <i>
+                            <svg
-                                <svg
+                                    width="24"
-                                        width="24"
+                                    height="24"
-                                        height="24"
+                                    viewBox="4 5 24 24">
-                                        viewBox="4 5 24 24">
+                                <path d="M 7.41,8.295 6,9.705 l 6,6 6,-6 -1.41,-1.41 -4.59,4.58 z"/>
-                                    <path d="M 7.41,8.295 6,9.705 l 6,6 6,-6 -1.41,-1.41 -4.59,4.58 z"/>
+                                <path
-                                    <path
+                                        d="M0 0h24v24H0z"
-                                            d="M0 0h24v24H0z"
+                                        fill="none"/>                        
-                                            fill="none"/>                        
+                            </svg>
-                                </svg>
+                        </i>
-                            </i>
+                    </span>
-                        </span>
+                </button>
-                    </button>
-                </Tooltip> 
             : null
             }
         </div>

src/views/gutenberg-blocks/tainacan-blocks/facets-list/facet-unit.vue

@@ -32,17 +32,24 @@
                     `${tainacanBaseUrl}/assets/images/placeholder_square.png`)
                 "
                 :alt="facet.label ? facet.label : $root.__('Thumbnail', 'tainacan')">
-            <span>{{ facet.label ? facet.label : '' }}</span>
+            <div :class=" 'facet-label-and-count' + (itemsCountStyle === 'below' ? ' is-style-facet-label-and-count--below' : '')">
-            <span 
+                <span>{{ facet.label ? facet.label : '' }}</span>
-                    v-if="facet.total_items"
+                <span 
-                    class="facet-item-count"
+                        v-if="facet.total_items"
-                    :style="{ display: !showItemsCount ? 'none' : '' }">
+                        class="facet-item-count"
-                &nbsp;({{ facet.total_items }})
+                        :style="{ display: !showItemsCount ? 'none' : '' }">
-            </span>
+                    <template v-if="itemsCountStyle === 'below'">
+                        {{ facet.total_items != 1 ? (facet.total_items + ' ' + $root.__('items', 'tainacan' )) : (facet.total_items + ' ' + $root.__('item', 'tainacan' )) }}
+                    </template>
+                    <template v-else>
+                        &nbsp;({{ facet.total_items }})
+                    </template>
+                </span>
+            </div>
             <template v-if="appendChildTerms && facet.total_children > 0">
                 <svg 
                         v-if="childFacetsObject[facetId] && childFacetsObject[facetId].visible"
-                        xmlns="http://www.w3.org/2000/svg" 
+                        xmlns="http://www.w3.org/2000/svg"
                         viewBox="-4 -3 16 16"
                         height="32px"
                         width="32px">
@@ -136,7 +143,8 @@ export default {
         metadatumType: String,
         childFacetsObject: Object,
         isMetadatumTypeTaxonomy: Boolean,
-        isMetadatumTypeRelationship: Boolean
+        isMetadatumTypeRelationship: Boolean,
+        itemsCountStyle: String
     },
     computed:{
         facetId() {