From 6db681a1f3c394809d3c94086a804ac49f3f11b4 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Wed, 6 Dec 2023 15:09:41 -0300
Subject: [PATCH] Continues refactor of Vue components logic for #794.

---
 .eslintrc.js                                  |   3 +-
 .../components/navigation/tainacan-title.vue  |  11 +-
 .../other/checkbox-radio-metadata-input.vue   |   2 +-
 src/views/admin/js/event-bus-search.js        |   4 +-
 .../blocks/carousel-collections-list/theme.js | 101 +---
 .../carousel-collections-list/theme.vue       | 298 ++++++-----
 .../blocks/carousel-items-list/theme.js       | 129 ++---
 .../blocks/carousel-items-list/theme.vue      | 296 ++++++-----
 .../blocks/carousel-terms-list/theme.js       | 104 +---
 .../blocks/carousel-terms-list/theme.vue      | 296 ++++++-----
 .../blocks/dynamic-items-list/theme.js        | 142 ++---
 .../blocks/dynamic-items-list/theme.vue       | 492 +++++++++---------
 .../theme-search/js/theme-router.js           |  20 +-
 .../theme-search/theme-items-page.vue         |   2 +-
 .../blocks/faceted-search/theme.js            |  76 ++-
 .../blocks/item-submission-form/theme.js      |  68 +--
 16 files changed, 894 insertions(+), 1150 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index b2ab730f8..1737a72be 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -26,7 +26,8 @@ module.exports = {
         "vue/no-v-model-argument": "off", // ADD
         'vue/multi-word-component-names': 'off',
         'vue/require-default-prop': 'off',
-        'vue/no-v-text-v-html-on-component': 'off'
+        'vue/no-v-text-v-html-on-component': 'off',
+        'vue/no-multiple-template-root': 'off' // In Vue3, this rule is deprecated
     },
     globals: {
         'wp': true,
diff --git a/src/views/admin/components/navigation/tainacan-title.vue b/src/views/admin/components/navigation/tainacan-title.vue
index 7a1e1993c..7c617c921 100644
--- a/src/views/admin/components/navigation/tainacan-title.vue
+++ b/src/views/admin/components/navigation/tainacan-title.vue
@@ -42,7 +42,9 @@
                 <span>&nbsp;>&nbsp;</span>
                 <router-link    
                         v-if="childBreadCrumbItem.path != ''"
-                        :to="{ path: childBreadCrumbItem.path, query: index === $i18n.get('items') ? { fromBreadcrumb: true } : null }">{{ childBreadCrumbItem.label }}</router-link>
+                        :to="{ path: childBreadCrumbItem.path, query: index === $i18n.get('items') ? { fromBreadcrumb: true } : null }">
+                    {{ childBreadCrumbItem.label }}
+                </router-link>
                 <span v-else>{{ childBreadCrumbItem.label }}</span>
             </template>
         </nav>
@@ -52,6 +54,7 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import { useSlots } from 'vue';
 
 export default {
     name: 'TainacanTitle',
@@ -68,7 +71,8 @@ export default {
     },
     computed: {
         slotPassed() {
-            return this.$slots && this.$slots.default && this.$slots.default[0] && (!!this.$slots.default[0].text || !!this.$slots.default[0].tag)
+            const slots = useSlots();
+            return !!slots['default'];
         },
         collection() {
             return this.getCollection();
@@ -124,7 +128,8 @@ export default {
         align-items: flex-end;
         justify-content: space-between;
 
-        h1, h2 {
+        :deep(h1),
+        :deep(h2) {
             font-size: 1.25em;
             font-weight: 500;
             color: var(--tainacan-heading-color);
diff --git a/src/views/admin/components/other/checkbox-radio-metadata-input.vue b/src/views/admin/components/other/checkbox-radio-metadata-input.vue
index 0d547bc3d..a2f275e59 100644
--- a/src/views/admin/components/other/checkbox-radio-metadata-input.vue
+++ b/src/views/admin/components/other/checkbox-radio-metadata-input.vue
@@ -356,7 +356,7 @@
             collectionId: [Number, String],
             metadatumId: Number,
             metadatum: Object,
-            selected: Array,
+            selected: [Array,Number],
             allowNew: Boolean,
             isTaxonomy: {
                 type: Boolean,
diff --git a/src/views/admin/js/event-bus-search.js b/src/views/admin/js/event-bus-search.js
index 759eefc3d..1b60fcdf0 100644
--- a/src/views/admin/js/event-bus-search.js
+++ b/src/views/admin/js/event-bus-search.js
@@ -214,8 +214,8 @@ export default {
                     this.$router.replace({ name: app.config.globalProperties.$route.name, query: {} });
                     this.$router.replace({ name: app.config.globalProperties.$route.name, query: this.$store.getters['search/getPostQuery'], onabort: () => { console.log('abort'); }, onerror: () => { console.log('error'); }, onready: () => { console.log('ready'); }, onsuccess: () => { console.log('success'); } });
                 } else {
-                    this.$router.replace({ path: '', query: {} });
-                    this.$router.replace({ path: '', query: this.$store.getters['search/getPostQuery'] });
+                    this.$router.replace({ path: this.$route.path, query: {} });
+                    this.$router.replace({ path: this.$route.path, query: this.$store.getters['search/getPostQuery'] });
                 }
             },
             updateStoreFromURL() {
diff --git a/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.js b/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.js
index e038be504..589962c71 100644
--- a/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.js
+++ b/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.js
@@ -15,93 +15,42 @@ export default (element) => {
 
             // Checks if this carousel isn't already mounted
             blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
-            const blockIds = Object.values(blocks).map((block) => block.id);
        
             // Creates a new Vue Instance to manage each block isolatelly
-            for (let blockId of blockIds) {
+            blocks.forEach((block) => {
 
-                // Configure Vue logic before passing it to constructor:
-                let vueOptions = {
-                    data: () => {
-                        return {
-                            selectedItem: [],
-                            maxItemsNumber: 12,
-                            arrowsPosition: 'around',
-                            autoPlay: false,
-                            autoPlaySpeed: 3,
-                            largeArrows: false,
-                            arrowsStyle: 'type-1',
-                            maxCollectionsPerScreen: 6,
-                            spaceBetweenCollections: 32,
-                            spaceAroundCarousel: 50,
-                            imageSize: 'tainacan-medium',
-                            loopSlides: false,
-                            hideName: true,
-                            showCollectionThumbnail: false,
-                            tainacanApiRoot: '',
-                            tainacanBaseUrl: '',
-                            className: '',
-                            style: ''
-                        }
-                    },
+                const VueCollectionsList = createApp( {
                     render() { 
                         return h(CarouselCollectionsListTheme, {
-                            props: {
-                                blockId: blockId,
-                                selectedCollections: this.selectedCollections,
-                                maxItemsNumber: this.maxItemsNumber,
-                                arrowsPosition: this.arrowsPosition,
-                                autoPlay: this.autoPlay,
-                                autoPlaySpeed: this.autoPlaySpeed,
-                                loopSlides: this.loopSlides,
-                                largeArrows: this.largeArrows,
-                                arrowsStyle: this.arrowsStyle,
-                                imageSize: this.imageSize,
-                                maxCollectionsPerScreen: this.maxCollectionsPerScreen,
-                                spaceBetweenCollections: this.spaceBetweenCollections,
-                                spaceAroundCarousel: this.spaceAroundCarousel,
-                                hideName: this.hideName,
-                                showCollectionThumbnail: this.showCollectionThumbnail,
-                                tainacanApiRoot: this.tainacanApiRoot,
-                                tainacanBaseUrl: this.tainacanBaseUrl,
-                                className: this.className,
-                                customStyle: this.style
-                            }
+                            blockId: block.id,
+                            selectedCollections: block.attributes['selected-collections'] != undefined ? JSON.parse(block.attributes['selected-collections'].value) : undefined,
+                            maxItemsNumber: block.attributes['max-collections-number'] != undefined ? Number(block.attributes['max-collections-number'].value) : 12,
+                            maxCollectionsPerScreen: block.attributes['max-collections-per-screen'] != undefined ? Number(block.attributes['max-collections-per-screen'].value) : 6,
+                            spaceBetweenCollections: block.attributes['space-between-collections'] != undefined ? Number(block.attributes['space-between-collections'].value) : 32,
+                            spaceAroundCarousel: block.attributes['space-around-carousel'] != undefined ? Number(block.attributes['space-around-carousel'].value) : 50,
+                            arrowsPosition: block.attributes['arrows-position'] != undefined ? block.attributes['arrows-position'].value : undefined,
+                            autoPlay: block.attributes['auto-play'] != undefined ? block.attributes['auto-play'].value == 'true' : false,
+                            largeArrows: block.attributes['large-arrows'] != undefined ? block.attributes['large-arrows'].value == 'true' : false,
+                            arrowsStyle: block.attributes['arrows-style'] != undefined ? block.attributes['arrows-style'].value : 'type-1',
+                            autoPlaySpeed: block.attributes['auto-play-speed'] != undefined ? Number(block.attributes['auto-play-speed'].value) : 3,
+                            loopSlides: block.attributes['loop-slides'] != undefined ? block.attributes['loop-slides'].value == 'true' : false,
+                            imageSize: block.attributes['image-size'] != undefined ? block.attributes['image-size'].value : 'tainacan-medium',
+                            hideName: block.attributes['hide-name'] != undefined ? block.attributes['hide-name'].value == 'true' : false,
+                            showCollectionThumbnail: block.attributes['show-collection-thumbnail'] != undefined ? block.attributes['show-collection-thumbnail'].value == 'true' : false,
+                            tainacanApiRoot: block.attributes['tainacan-api-root'] != undefined ? block.attributes['tainacan-api-root'].value : undefined,
+                            tainacanBaseUrl: block.attributes['tainacan-base-url'] != undefined ? block.attributes['tainacan-base-url'].value : undefined,
                         });
                     },
-                    beforeMount () {
-                        this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
-                        this.selectedCollections = this.$el.attributes['selected-collections'] != undefined ? JSON.parse(this.$el.attributes['selected-collections'].value) : undefined;
-                        this.maxItemsNumber = this.$el.attributes['max-collections-number'] != undefined ? this.$el.attributes['max-collections-number'].value : undefined;
-                        this.maxCollectionsPerScreen = this.$el.attributes['max-collections-per-screen'] != undefined ? this.$el.attributes['max-collections-per-screen'].value : 6;
-                        this.spaceBetweenCollections = this.$el.attributes['space-between-collections'] != undefined ? this.$el.attributes['space-between-collections'].value : 32;
-                        this.spaceAroundCarousel = this.$el.attributes['space-around-carousel'] != undefined ? this.$el.attributes['space-around-carousel'].value : 50;
-                        this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
-                        this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
-                        this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
-                        this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined;
-                        this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
-                        this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
-                        this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
-                        this.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false;
-                        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) {
-                            return wp.i18n.__(text, domain);
-                        }
+                    mounted() {
+                        block.classList.add('has-mounted');
                     }
-                };
-
-
-                const VueCollectionsList = createApp( Object.assign({ el: '#' + blockId }, vueOptions) );
+                });
 
                 VueCollectionsList.use(VueBlurHash);
                 VueCollectionsList.use(ThumbnailHelperPlugin);
-            }
+
+                VueCollectionsList.mount('#' + block.id);
+            });
         }
     }
 
diff --git a/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue b/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue
index 64885d52a..ba3cdce72 100644
--- a/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue
+++ b/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue
@@ -1,147 +1,143 @@
 <template>
-    <div 
-            :style="customStyle"
-            :class="className + ' has-mounted'">
-        <div  
-                :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
-                :style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
-                v-if="collections.length > 0 || isLoading">
-            <div 
-                    class="swiper"
-                    :id="blockId + '-carousel'">
-                <ul 
-                        v-if="isLoading"
-                        role="list"
-                        class="swiper-wrapper">
-                    <li 
-                            role="listitem"
-                            :key="index"
-                            v-for="index in 18"
-                            class="swiper-slide collection-list-item skeleton">
-                        <a>
-                            <img>
-                            <span v-if="!hideName" />
-                        </a>
-                    </li>
-                </ul>
-                <ul 
+    <div  
+            :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
+            :style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
+            v-if="collections.length > 0 || isLoading">
+        <div 
+                class="swiper"
+                :id="blockId + '-carousel'">
+            <ul 
+                    v-if="isLoading"
+                    role="list"
+                    class="swiper-wrapper">
+                <li 
+                        role="listitem"
+                        :key="index"
+                        v-for="index in 18"
+                        class="swiper-slide collection-list-item skeleton">
+                    <a>
+                        <img>
+                        <span v-if="!hideName" />
+                    </a>
+                </li>
+            </ul>
+            <ul 
+                    v-else
+                    role="list"
+                    class="swiper-wrapper">
+                <li 
+                        role="listitem"
+                        :key="index"
+                        v-for="(collection, index) of collections"
+                        :class="'swiper-slide collection-list-item ' + (!showCollectionThumbnail ? 'collection-list-item-grid' : '')">      
+                    <a 
+                            v-if="showCollectionThumbnail"
+                            :id="isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id"
+                            :href="collection.url">
+                        <img
+                            :src=" 
+                                collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0] 
+                                    ?
+                                collection.thumbnail[imageSize][0] 
+                                    :
+                                (collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
+                                    ?    
+                                collection.thumbnail['thumbnail'][0] 
+                                    : 
+                                `${tainacanBaseUrl}/assets/images/placeholder_square.png`)
+                            "
+                            :data-src=" 
+                                collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0] 
+                                    ?
+                                collection.thumbnail[imageSize][0] 
+                                    :
+                                (collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
+                                    ?    
+                                collection.thumbnail['thumbnail'][0] 
+                                    : 
+                                `${tainacanBaseUrl}/assets/images/placeholder_square.png`)
+                            "
+                            :alt="collection.name ? collection.name : wp.i18n.__('Thumbnail', 'tainacan')">
+                        <span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
+                    </a>
+                    <a 
+                            v-else
+                            :id="isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id"
+                            :href="collection.url">
+                        <div class="collection-items-grid">
+                            <blur-hash-image
+                                    :height="collectionItems[collection.id][0] ? $thumbHelper.getHeight(collectionItems[collection.id][0]['thumbnail'], imageSize) : 275"
+                                    :width="collectionItems[collection.id][0] ? $thumbHelper.getWidth(collectionItems[collection.id][0]['thumbnail'], imageSize) : 275"
+                                    :src="collectionItems[collection.id][0] ? $thumbHelper.getSrc(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
+                                    :srcset="collectionItems[collection.id][0] ? $thumbHelper.getSrcSet(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
+                                    :hash="collectionItems[collection.id][0] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][0]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
+                                    :alt="collectionItems[collection.id][0] && collectionItems[collection.id][0].thumbnail_alt ? collectionItems[collection.id][0].thumbnail_alt : (collectionItems[collection.id][0] && collectionItems[collection.id][0].name ? collectionItems[collection.id][0].name : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
+                                    :transition-duration="500" />
+                            <blur-hash-image
+                                    :height="collectionItems[collection.id][1] ? $thumbHelper.getHeight(collectionItems[collection.id][1]['thumbnail'], imageSize) : 275"
+                                    :width="collectionItems[collection.id][1] ? $thumbHelper.getWidth(collectionItems[collection.id][1]['thumbnail'], imageSize) : 275"
+                                    :src="collectionItems[collection.id][1] ? $thumbHelper.getSrc(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
+                                    :srcset="collectionItems[collection.id][1] ? $thumbHelper.getSrcSet(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
+                                    :hash="collectionItems[collection.id][1] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][1]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
+                                    :alt="collectionItems[collection.id][1] && collectionItems[collection.id][1].thumbnail_alt ? collectionItems[collection.id][1].thumbnail_alt : (collectionItems[collection.id][1] && collectionItems[collection.id][1].name ? collectionItems[collection.id][1].name : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
+                                    :transition-duration="500" />
+                            <blur-hash-image
+                                    :height="collectionItems[collection.id][2] ? $thumbHelper.getHeight(collectionItems[collection.id][2]['thumbnail'], imageSize) : 275"
+                                    :width="collectionItems[collection.id][2] ? $thumbHelper.getWidth(collectionItems[collection.id][2]['thumbnail'], imageSize) : 275"
+                                    :src="collectionItems[collection.id][2] ? $thumbHelper.getSrc(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
+                                    :srcset="collectionItems[collection.id][2] ? $thumbHelper.getSrcSet(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
+                                    :hash="collectionItems[collection.id][2] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][2]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
+                                    :alt="collectionItems[collection.id][2] && collectionItems[collection.id][2].thumbnail_alt ? collectionItems[collection.id][2].thumbnail_alt : (collectionItems[collection.id][2] && collectionItems[collection.id][2].name ? collectionItems[collection.id][2].name : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
+                                    :transition-duration="500" />
+                        </div>
+                        <span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <button 
+                class="swiper-button-prev" 
+                :id="blockId + '-prev'" 
+                :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
+            <svg
+                    :width="largeArrows ? 60 : 42"
+                    :height="largeArrows ? 60 : 42"
+                    viewBox="0 0 24 24">
+                <path
+                        v-if="arrowsStyle === 'type-2'"
+                        d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
+                <path 
                         v-else
-                        role="list"
-                        class="swiper-wrapper">
-                    <li 
-                            role="listitem"
-                            :key="index"
-                            v-for="(collection, index) of collections"
-                            :class="'swiper-slide collection-list-item ' + (!showCollectionThumbnail ? 'collection-list-item-grid' : '')">      
-                        <a 
-                                v-if="showCollectionThumbnail"
-                                :id="isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id"
-                                :href="collection.url">
-                            <img
-                                :src=" 
-                                    collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0] 
-                                        ?
-                                    collection.thumbnail[imageSize][0] 
-                                        :
-                                    (collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
-                                        ?    
-                                    collection.thumbnail['thumbnail'][0] 
-                                        : 
-                                    `${tainacanBaseUrl}/assets/images/placeholder_square.png`)
-                                "
-                                :data-src=" 
-                                    collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0] 
-                                        ?
-                                    collection.thumbnail[imageSize][0] 
-                                        :
-                                    (collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
-                                        ?    
-                                    collection.thumbnail['thumbnail'][0] 
-                                        : 
-                                    `${tainacanBaseUrl}/assets/images/placeholder_square.png`)
-                                "
-                                :alt="collection.name ? collection.name : $root.__('Thumbnail', 'tainacan')">
-                            <span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
-                        </a>
-                        <a 
-                                v-else
-                                :id="isNaN(collection.id) ? collection.id : 'collection-id-' + collection.id"
-                                :href="collection.url">
-                            <div class="collection-items-grid">
-                                <blur-hash-image
-                                        :height="collectionItems[collection.id][0] ? $thumbHelper.getHeight(collectionItems[collection.id][0]['thumbnail'], imageSize) : 275"
-                                        :width="collectionItems[collection.id][0] ? $thumbHelper.getWidth(collectionItems[collection.id][0]['thumbnail'], imageSize) : 275"
-                                        :src="collectionItems[collection.id][0] ? $thumbHelper.getSrc(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
-                                        :srcset="collectionItems[collection.id][0] ? $thumbHelper.getSrcSet(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
-                                        :hash="collectionItems[collection.id][0] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][0]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
-                                        :alt="collectionItems[collection.id][0] && collectionItems[collection.id][0].thumbnail_alt ? collectionItems[collection.id][0].thumbnail_alt : (collectionItems[collection.id][0] && collectionItems[collection.id][0].name ? collectionItems[collection.id][0].name : $root.__( 'Thumbnail', 'tainacan' ))"
-                                        :transition-duration="500" />
-                                <blur-hash-image
-                                        :height="collectionItems[collection.id][1] ? $thumbHelper.getHeight(collectionItems[collection.id][1]['thumbnail'], imageSize) : 275"
-                                        :width="collectionItems[collection.id][1] ? $thumbHelper.getWidth(collectionItems[collection.id][1]['thumbnail'], imageSize) : 275"
-                                        :src="collectionItems[collection.id][1] ? $thumbHelper.getSrc(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
-                                        :srcset="collectionItems[collection.id][1] ? $thumbHelper.getSrcSet(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
-                                        :hash="collectionItems[collection.id][1] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][1]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
-                                        :alt="collectionItems[collection.id][1] && collectionItems[collection.id][1].thumbnail_alt ? collectionItems[collection.id][1].thumbnail_alt : (collectionItems[collection.id][1] && collectionItems[collection.id][1].name ? collectionItems[collection.id][1].name : $root.__( 'Thumbnail', 'tainacan' ))"
-                                        :transition-duration="500" />
-                                <blur-hash-image
-                                        :height="collectionItems[collection.id][2] ? $thumbHelper.getHeight(collectionItems[collection.id][2]['thumbnail'], imageSize) : 275"
-                                        :width="collectionItems[collection.id][2] ? $thumbHelper.getWidth(collectionItems[collection.id][2]['thumbnail'], imageSize) : 275"
-                                        :src="collectionItems[collection.id][2] ? $thumbHelper.getSrc(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
-                                        :srcset="collectionItems[collection.id][2] ? $thumbHelper.getSrcSet(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
-                                        :hash="collectionItems[collection.id][2] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][2]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
-                                        :alt="collectionItems[collection.id][2] && collectionItems[collection.id][2].thumbnail_alt ? collectionItems[collection.id][2].thumbnail_alt : (collectionItems[collection.id][2] && collectionItems[collection.id][2].name ? collectionItems[collection.id][2].name : $root.__( 'Thumbnail', 'tainacan' ))"
-                                        :transition-duration="500" />
-                            </div>
-                            <span v-if="!hideName">{{ collection.name ? collection.name : '' }}</span>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-            <button 
-                    class="swiper-button-prev" 
-                    :id="blockId + '-prev'" 
-                    :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
-                <svg
-                        :width="largeArrows ? 60 : 42"
-                        :height="largeArrows ? 60 : 42"
-                        viewBox="0 0 24 24">
-                    <path
-                            v-if="arrowsStyle === 'type-2'"
-                            d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
-                    <path 
-                            v-else
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
-                    <path
-                            d="M0 0h24v24H0z"
-                            fill="none"/>
-                </svg>
-            </button>
-            <button 
-                    class="swiper-button-next" 
-                    :id="blockId + '-next'" 
-                    :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
-                <svg
-                        :width="largeArrows ? 60 : 42"
-                        :height="largeArrows ? 60 : 42"
-                        viewBox="0 0 24 24">
-                    <path
-                            v-if="arrowsStyle === 'type-2'"
-                            d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
-                    <path 
-                            v-else
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
-                    <path
-                            d="M0 0h24v24H0z"
-                            fill="none"/>
-                </svg>
-            </button>
-        </div>
-        <div
-                v-else-if="collections.length <= 0 && !isLoading"
-                class="spinner-container">
-            {{ $root.__('No collections found.', 'tainacan') }}
-        </div>
+                        d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+                <path
+                        d="M0 0h24v24H0z"
+                        fill="none"/>
+            </svg>
+        </button>
+        <button 
+                class="swiper-button-next" 
+                :id="blockId + '-next'" 
+                :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
+            <svg
+                    :width="largeArrows ? 60 : 42"
+                    :height="largeArrows ? 60 : 42"
+                    viewBox="0 0 24 24">
+                <path
+                        v-if="arrowsStyle === 'type-2'"
+                        d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
+                <path 
+                        v-else
+                        d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+                <path
+                        d="M0 0h24v24H0z"
+                        fill="none"/>
+            </svg>
+        </button>
+    </div>
+    <div
+            v-else-if="collections.length <= 0 && !isLoading"
+            class="spinner-container">
+        {{ wp.i18n.__('No collections found.', 'tainacan') }}
     </div>
 </template>
  
@@ -175,9 +171,7 @@ export default {
         imageSize: String,
         showCollectionThumbnail: Boolean,
         tainacanApiRoot: String,
-        tainacanBaseUrl: String,
-        className: String,
-        customStyle: String
+        tainacanBaseUrl: String
     },
     data() {
         return {
@@ -203,8 +197,8 @@ export default {
         this.tainacanAxios = axios.create({ baseURL: this.apiRoot });
         if (tainacan_blocks && tainacan_blocks.nonce)
             this.tainacanAxios.defaults.headers.common['X-WP-Nonce'] = tainacan_blocks.nonce;
-
-        this.fetchCollections();
+        
+            this.fetchCollections();
     },
     beforeUnmount() {
         if (typeof this.swiper.destroy == 'function')
@@ -223,7 +217,7 @@ export default {
                 this.collectionsRequestSource.cancel('Previous collections search canceled.');
 
             this.collectionsRequestSource = axios.CancelToken.source();
-
+            
             let endpoint = '/collections?'+ qs.stringify({ postin: this.selectedCollections, perpage: this.selectedCollections.length, fetch_preview_image_items: this.showCollectionThumbnail ? 0 : 3 }) + '&orderby=post__in&fetch_only=name,url,thumbnail';
 
             this.tainacanAxios.get(endpoint, { cancelToken: this.collectionsRequestSource.token })
@@ -285,10 +279,10 @@ export default {
                 autoplay: (self.autoPlay && !self.isLoading) ? { delay: self.autoPlaySpeed*1000 } : false,
                 loop: self.loopSlides && !self.isLoading,
                 a11y: {
-                    prevSlideMessage: self.$root.__( 'Previous slide', 'tainacan'),
-                    nextSlideMessage: self.$root.__( 'Next slide', 'tainacan'),
-                    firstSlideMessage: self.$root.__('This is the first slide', 'tainacan'),
-                    lastSlideMessage: self.$root.__('This is the last slide', 'tainacan')
+                    prevSlideMessage: wp.i18n.__( 'Previous slide', 'tainacan'),
+                    nextSlideMessage: wp.i18n.__( 'Next slide', 'tainacan'),
+                    firstSlideMessage: wp.i18n.__('This is the first slide', 'tainacan'),
+                    lastSlideMessage: wp.i18n.__('This is the last slide', 'tainacan')
                 },
                 modules: [Autoplay, Navigation, A11y]
             });
diff --git a/src/views/gutenberg-blocks/blocks/carousel-items-list/theme.js b/src/views/gutenberg-blocks/blocks/carousel-items-list/theme.js
index accdf45e5..1c08ebc1f 100644
--- a/src/views/gutenberg-blocks/blocks/carousel-items-list/theme.js
+++ b/src/views/gutenberg-blocks/blocks/carousel-items-list/theme.js
@@ -16,109 +16,48 @@ export default (element) => {
 
             // Checks if this carousel isn't already mounted
             blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
-            const blockIds = blocks.map((block) => block.id);
-
+            
             // Creates a new Vue Instance to manage each block isolatelly
-            for (let blockId of blockIds) {
-                // Configure Vue logic before passing it to constructor:
-                let vueOptions = {
-                    data: () => {
-                        return {
-                            collectionId: '',  
-                            searchURL: '',
-                            selectedItems: [],
-                            loadStrategy: 'search',
-                            maxItemsNumber: 12,
-                            maxItemsPerScreen: 7,
-                            spaceBetweenItems: 32,
-                            spaceAroundCarousel: 50,
-                            arrowsPosition: 'around',
-                            largeArrows: false,
-                            arrowsStyle: 'type-1',
-                            autoPlay: false,
-                            autoPlaySpeed: 3,
-                            loopSlides: false,
-                            hideTitle: true,
-                            imageSize: 'tainacan-medium',
-                            showCollectionHeader: false,
-                            showCollectionLabel: false,
-                            collectionBackgroundColor: '#373839',
-                            collectionTextColor: '#ffffff',
-                            tainacanApiRoot: '',
-                            tainacanBaseUrl: '',
-                            className: '',
-                            style: ''
-                        }
-                    },
+            blocks.forEach((block) => {
+                
+                const VueCarouselItemsList = createApp( {
                     render() { 
-                        return h(CarouselItemsListTheme, {
-                            props: {
-                                blockId: blockId,
-                                collectionId: this.collectionId,  
-                                searchURL: this.searchURL,
-                                selectedItems: this.selectedItems,
-                                loadStrategy: this.loadStrategy,
-                                maxItemsNumber: this.maxItemsNumber,
-                                maxItemsPerScreen: this.maxItemsPerScreen,
-                                spaceBetweenItems: this.spaceBetweenItems,
-                                spaceAroundCarousel: this.spaceAroundCarousel,
-                                arrowsPosition: this.arrowsPosition,
-                                largeArrows: this.largeArrows,
-                                arrowsStyle: this.arrowsStyle,
-                                autoPlay: this.autoPlay,
-                                autoPlaySpeed: this.autoPlaySpeed,
-                                loopSlides: this.loopSlides,
-                                hideTitle: this.hideTitle,
-                                imageSize: this.imageSize,
-                                showCollectionHeader: this.showCollectionHeader,
-                                showCollectionLabel: this.showCollectionLabel,
-                                collectionBackgroundColor: this.collectionBackgroundColor,
-                                collectionTextColor: this.collectionTextColor,
-                                tainacanApiRoot: this.tainacanApiRoot,
-                                tainacanBaseUrl: this.tainacanBaseUrl,
-                                className: this.className,
-                                customStyle: this.style
-                            }
+                        return h(CarouselItemsListTheme, {   
+                            blockId: block.id,
+                            searchURL: block.attributes['search-url'] != undefined ? block.attributes['search-url'].value : undefined,
+                            selectedItems: block.attributes['selected-items'] != undefined ? JSON.parse(block.attributes['selected-items'].value) : [],
+                            loadStrategy: block.attributes['load-strategy'] != undefined ? block.attributes['load-strategy'].value : 'search',
+                            collectionId: block.attributes['collection-id'] != undefined ? block.attributes['collection-id'].value : undefined,
+                            maxItemsNumber: block.attributes['max-items-number'] != undefined ? Number(block.attributes['max-items-number'].value) : 12,
+                            maxItemsPerScreen: block.attributes['max-items-per-screen'] != undefined ? Number(block.attributes['max-items-per-screen'].value) : 7,
+                            spaceBetweenItems: block.attributes['space-between-items'] != undefined ? Number(block.attributes['space-between-items'].value) : 32,
+                            spaceAroundCarousel: block.attributes['space-around-carousel'] != undefined ? Number(block.attributes['space-around-carousel'].value) : 50,
+                            arrowsPosition: block.attributes['arrows-position'] != undefined ? block.attributes['arrows-position'].value : 'around',
+                            largeArrows: block.attributes['large-arrows'] != undefined ? block.attributes['large-arrows'].value == 'true' : false,
+                            arrowsStyle: block.attributes['arrows-style'] != undefined ? block.attributes['arrows-style'].value : 'type-1',
+                            autoPlay: block.attributes['auto-play'] != undefined ? block.attributes['auto-play'].value == 'true' : false,
+                            autoPlaySpeed: block.attributes['auto-play-speed'] != undefined ? Number(block.attributes['auto-play-speed'].value) : 3,
+                            loopSlides: block.attributes['loop-slides'] != undefined ? block.attributes['loop-slides'].value == 'true' : false,
+                            hideTitle: block.attributes['hide-title'] != undefined ? block.attributes['hide-title'].value == 'true' : false,
+                            imageSize: block.attributes['image-size'] != undefined ? block.attributes['image-size'].value : 'tainacan-medium',
+                            showCollectionHeader: block.attributes['show-collection-header'] != undefined ? block.attributes['show-collection-header'].value == 'true' : false,
+                            showCollectionLabel: block.attributes['show-collection-label'] != undefined ? block.attributes['show-collection-label'].value == 'true' : false,
+                            collectionBackgroundColor: block.attributes['collection-background-color'] != undefined ? block.attributes['collection-background-color'].value : '#373839',
+                            collectionTextColor: block.attributes['collection-text-color'] != undefined ? block.attributes['collection-text-color'].value : '#ffffff',
+                            tainacanApiRoot: block.attributes['tainacan-api-root'] != undefined ? block.attributes['tainacan-api-root'].value : undefined,
+                            tainacanBaseUrl: block.attributes['tainacan-base-url'] != undefined ? block.attributes['tainacan-base-url'].value : undefined
                         });
                     },
-                    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.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
-                        this.maxItemsPerScreen = this.$el.attributes['max-items-per-screen'] != undefined ? this.$el.attributes['max-items-per-screen'].value : 7;
-                        this.spaceBetweenItems = this.$el.attributes['space-between-items'] != undefined ? this.$el.attributes['space-between-items'].value : 32;
-                        this.spaceAroundCarousel = this.$el.attributes['space-around-carousel'] != undefined ? this.$el.attributes['space-around-carousel'].value : 50;
-                        this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
-                        this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
-                        this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined;
-                        this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
-                        this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
-                        this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
-                        this.hideTitle = this.$el.attributes['hide-title'] != undefined ? this.$el.attributes['hide-title'].value == 'true' : false;
-                        this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
-                        this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
-                        this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
-                        this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;
-                        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) {
-                            return wp.i18n.__(text, domain);
-                        }
+                    mounted() {
+                        block.classList.add('has-mounted');
                     }
-                };
-
-                const VueCarouselItemsList = createApp( Object.assign({ el: '#' + blockId }, vueOptions) );
+                });
 
                 VueCarouselItemsList.use(ThumbnailHelperPlugin);
                 VueCarouselItemsList.use(VueBlurHash);
-            }
+
+                VueCarouselItemsList.mount('#' + block.id);
+            });
         }
     }
 
diff --git a/src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue b/src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue
index f8bbddf9e..0cb008453 100644
--- a/src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue
+++ b/src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue
@@ -1,150 +1,146 @@
 <template>
-    <div 
-            :style="customStyle"
-            :class="className + ' has-mounted'">
-        <div v-if="showCollectionHeader">
-            <div
-                    v-if="isLoadingCollection"
-                    class="carousel-items-collection-header skeleton" 
-                    :style="{ height: '165px' }"/>
-            <a
-                    v-else
-                    :href="collection.url ? collection.url : ''"
-                    class="carousel-items-collection-header">
-                <div
-                        :style="{
-                            backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '', 
-                            paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
-                            paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
-                            width: collection && collection.header_image ? '' : '100%'
-                        }"
-                        :class="
-                            'collection-name ' + 
-                            ((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '') 
-                        ">
-                    <h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
-                        <span
-                                v-if="showCollectionLabel"
-                                class="label">
-                            {{ $root.__('Collection', 'tainacan') }}
-                            <br>
-                        </span>
-                        {{ collection && collection.name ? collection.name : '' }}
-                    </h3>
-                </div>
-                <div
-                    v-if="collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])"   
-                    class="collection-thumbnail"
-                    :style="{ 
-                        backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
-                    }"/>
-                <div
-                        class="collection-header-image"
-                        :style="{
-                            backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
-                            minHeight: collection && collection.header_image ? '' : '80px',
-                            display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''  
-                        }"/>
-            </a>   
-        </div>
-        <div  
-                :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
-                :style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
-                v-if="items.length > 0 || isLoading">
-            <div 
-                    class="swiper"
-                    :id="blockId + '-carousel'">
-                <ul 
-                        v-if="isLoading"
-                        role="list"
-                        class="swiper-wrapper"
-                        :style="{
-                            marginTop: showCollectionHeader ? '1.35em' : '0px'
-                        }">
-                    <li 
-                            role="listitem"
-                            :key="index"
-                            v-for="index in 18"
-                            class="swiper-slide collection-list-item skeleton">
-                        <a>
-                            <img>
-                            <span v-if="!hideName" />
-                        </a>
-                    </li>
-                </ul>
-                <ul 
-                        v-else
-                        role="list"
-                        class="swiper-wrapper"
-                        :style="{
-                            marginTop: showCollectionHeader ? '1.35em' : '0px'
-                        }">
-                    <li
-                            role="listitem"
-                            :key="index"
-                            v-for="(item, index) of items"
-                            class="swiper-slide item-list-item"
-                            :class="{ 'is-forced-square': ['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 }">
-                        <a 
-                                :id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
-                                :href="item.url">
-                            <blur-hash-image
-                                    :height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
-                                    :width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
-                                    :src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
-                                    :srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
-                                    :hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
-                                    :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>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-            <button 
-                    class="swiper-button-prev" 
-                    :id="blockId + '-prev'" 
-                    :style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
-                <svg
-                        :width="largeArrows ? 60 : 42"
-                        :height="largeArrows ? 60 : 42"
-                        viewBox="0 0 24 24">
-                    <path
-                            v-if="arrowsStyle === 'type-2'"
-                            d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
-                    <path 
-                            v-else
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
-                    <path
-                            d="M0 0h24v24H0z"
-                            fill="none"/>
-                </svg>
-            </button>
-            <button 
-                    class="swiper-button-next" 
-                    :id="blockId + '-next'"
-                    :style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
-                <svg
-                        :width="largeArrows ? 60 : 42"
-                        :height="largeArrows ? 60 : 42"
-                        viewBox="0 0 24 24">
-                    <path
-                            v-if="arrowsStyle === 'type-2'"
-                            d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
-                    <path 
-                            v-else
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
-                    <path
-                            d="M0 0h24v24H0z"
-                            fill="none"/>
-                </svg>
-            </button>
-        </div>
+    <div v-if="showCollectionHeader">
         <div
-                v-else-if="items.length <= 0 && !isLoading"
-                class="spinner-container">
-            {{ $root.__('No items found.', 'tainacan') }}
+                v-if="isLoadingCollection"
+                class="carousel-items-collection-header skeleton" 
+                :style="{ height: '165px' }"/>
+        <a
+                v-else
+                :href="collection.url ? collection.url : ''"
+                class="carousel-items-collection-header">
+            <div
+                    :style="{
+                        backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '', 
+                        paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
+                        paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
+                        width: collection && collection.header_image ? '' : '100%'
+                    }"
+                    :class="
+                        'collection-name ' + 
+                        ((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '') 
+                    ">
+                <h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
+                    <span
+                            v-if="showCollectionLabel"
+                            class="label">
+                        {{ wp.i18n.__('Collection', 'tainacan') }}
+                        <br>
+                    </span>
+                    {{ collection && collection.name ? collection.name : '' }}
+                </h3>
+            </div>
+            <div
+                v-if="collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])"   
+                class="collection-thumbnail"
+                :style="{ 
+                    backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
+                }"/>
+            <div
+                    class="collection-header-image"
+                    :style="{
+                        backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
+                        minHeight: collection && collection.header_image ? '' : '80px',
+                        display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''  
+                    }"/>
+        </a>   
+    </div>
+    <div  
+            :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "
+            :style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
+            v-if="items.length > 0 || isLoading">
+        <div 
+                class="swiper"
+                :id="blockId + '-carousel'">
+            <ul 
+                    v-if="isLoading"
+                    role="list"
+                    class="swiper-wrapper"
+                    :style="{
+                        marginTop: showCollectionHeader ? '1.35em' : '0px'
+                    }">
+                <li 
+                        role="listitem"
+                        :key="index"
+                        v-for="index in 18"
+                        class="swiper-slide collection-list-item skeleton">
+                    <a>
+                        <img>
+                        <span v-if="!hideTitle" />
+                    </a>
+                </li>
+            </ul>
+            <ul 
+                    v-else
+                    role="list"
+                    class="swiper-wrapper"
+                    :style="{
+                        marginTop: showCollectionHeader ? '1.35em' : '0px'
+                    }">
+                <li
+                        role="listitem"
+                        :key="index"
+                        v-for="(item, index) of items"
+                        class="swiper-slide item-list-item"
+                        :class="{ 'is-forced-square': ['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 }">
+                    <a 
+                            :id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
+                            :href="item.url">
+                        <blur-hash-image
+                                :height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
+                                :width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
+                                :src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
+                                :srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
+                                :hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
+                                :alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
+                                :transition-duration="500" />
+                        <span v-if="!hideTitle">{{ item.title ? item.title : '' }}</span>
+                    </a>
+                </li>
+            </ul>
         </div>
+        <button 
+                class="swiper-button-prev" 
+                :id="blockId + '-prev'" 
+                :style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
+            <svg
+                    :width="largeArrows ? 60 : 42"
+                    :height="largeArrows ? 60 : 42"
+                    viewBox="0 0 24 24">
+                <path
+                        v-if="arrowsStyle === 'type-2'"
+                        d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
+                <path 
+                        v-else
+                        d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+                <path
+                        d="M0 0h24v24H0z"
+                        fill="none"/>
+            </svg>
+        </button>
+        <button 
+                class="swiper-button-next" 
+                :id="blockId + '-next'"
+                :style="hideTitle ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
+            <svg
+                    :width="largeArrows ? 60 : 42"
+                    :height="largeArrows ? 60 : 42"
+                    viewBox="0 0 24 24">
+                <path
+                        v-if="arrowsStyle === 'type-2'"
+                        d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
+                <path 
+                        v-else
+                        d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+                <path
+                        d="M0 0h24v24H0z"
+                        fill="none"/>
+            </svg>
+        </button>
+    </div>
+    <div
+            v-else-if="items.length <= 0 && !isLoading"
+            class="spinner-container">
+        {{ wp.i18n.__('No items found.', 'tainacan') }}
     </div>
 </template>
  
@@ -184,9 +180,7 @@ export default {
         collectionBackgroundColor: String,
         collectionTextColor: String,
         tainacanApiRoot: String,
-        tainacanBaseUrl: String,
-        className: String,
-        customStyle: String
+        tainacanBaseUrl: String
     },
     data() {
         return {
@@ -371,10 +365,10 @@ export default {
                 autoplay: self.autoPlay ? { delay: self.autoPlaySpeed*1000 } : false,
                 loop: self.loopSlides ? self.loopSlides : false,
                 a11y: {
-                    prevSlideMessage: self.$root.__( 'Previous slide', 'tainacan'),
-                    nextSlideMessage: self.$root.__( 'Next slide', 'tainacan'),
-                    firstSlideMessage: self.$root.__('This is the first slide', 'tainacan'),
-                    lastSlideMessage: self.$root.__('This is the last slide', 'tainacan')
+                    prevSlideMessage: wp.i18n.__( 'Previous slide', 'tainacan'),
+                    nextSlideMessage: wp.i18n.__( 'Next slide', 'tainacan'),
+                    firstSlideMessage: wp.i18n.__('This is the first slide', 'tainacan'),
+                    lastSlideMessage: wp.i18n.__('This is the last slide', 'tainacan')
                 },
                 modules: [Autoplay, Navigation, A11y]
             });
diff --git a/src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.js b/src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.js
index dda21af39..f49ee5516 100644
--- a/src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.js
+++ b/src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.js
@@ -15,95 +15,43 @@ export default (element) => {
 
             // Checks if this carousel isn't already mounted
             blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
-            const blockIds = Object.values(blocks).map((block) => block.id);
 
             // Creates a new Vue Instance to manage each block isolatelly
-            for (let blockId of blockIds) {
+            blocks.forEach((block) => {
 
-                // Configure Vue logic before passing it to constructor:
-                let vueOptions = {
-                    data: () => {
-                        return {
-                            selectedItem: [],
-                            maxItemsNumber: 12,
-                            arrowsPosition: 'around',
-                            autoPlay: false,
-                            autoPlaySpeed: 3,
-                            largeArrows: false,
-                            arrowsStyle: 'type-1',
-                            maxTermsPerScreen: 6,
-                            spaceBetweenTerms: 32,
-                            spaceAroundCarousel: 50,
-                            imageSize: 'tainacan-medium',
-                            loopSlides: false,
-                            hideName: true,
-                            showTermThumbnail: false,
-                            tainacanApiRoot: '',
-                            tainacanBaseUrl: '',
-                            className: '',
-                            taxonomyId: '',
-                            style: ''
-                        }
-                    },
+                const VueCarouselTermsList = createApp({
                     render() { 
                         return h(CarouselTermsListTheme, {
-                            props: {
-                                blockId: blockId,
-                                selectedTerms: this.selectedTerms,
-                                maxItemsNumber: this.maxItemsNumber,
-                                arrowsPosition: this.arrowsPosition,
-                                autoPlay: this.autoPlay,
-                                autoPlaySpeed: this.autoPlaySpeed,
-                                loopSlides: this.loopSlides,
-                                largeArrows: this.largeArrows,
-                                arrowsStyle: this.arrowsStyle,
-                                imageSize: this.imageSize,
-                                maxTermsPerScreen: this.maxTermsPerScreen,
-                                spaceBetweenTerms: this.spaceBetweenTerms,
-                                spaceAroundCarousel: this.spaceAroundCarousel,
-                                hideName: this.hideName,
-                                showTermThumbnail: this.showTermThumbnail,
-                                tainacanApiRoot: this.tainacanApiRoot,
-                                tainacanBaseUrl: this.tainacanBaseUrl,
-                                className: this.className,
-                                taxonomyId: this.taxonomyId,
-                                customStyle: this.style
-                            }
+                            blockId: block.id,
+                            selectedTerms: block.attributes['selected-terms'] != undefined ? JSON.parse(block.attributes['selected-terms'].value) : undefined,
+                            maxItemsNumber: block.attributes['max-terms-number'] != undefined ? block.attributes['max-terms-number'].value : 12,
+                            maxTermsPerScreen: block.attributes['max-terms-per-screen'] != undefined ? Number(block.attributes['max-terms-per-screen'].value) : 6,
+                            arrowsPosition: block.attributes['arrows-position'] != undefined ? block.attributes['arrows-position'].value : undefined,
+                            autoPlay: block.attributes['auto-play'] != undefined ? block.attributes['auto-play'].value == 'true' : false,
+                            autoPlaySpeed: block.attributes['auto-play-speed'] != undefined ? Number(block.attributes['auto-play-speed'].value) : 3,
+                            spaceBetweenTerms: block.attributes['space-between-terms'] != undefined ? Number(block.attributes['space-between-terms'].value) : 32,
+                            spaceAroundCarousel: block.attributes['space-around-carousel'] != undefined ? Number(block.attributes['space-around-carousel'].value) : 50,
+                            largeArrows: block.attributes['large-arrows'] != undefined ? block.attributes['large-arrows'].value == 'true' : false,
+                            arrowsStyle: block.attributes['arrows-style'] != undefined ? block.attributes['arrows-style'].value : 'type-1',
+                            loopSlides: block.attributes['loop-slides'] != undefined ? block.attributes['loop-slides'].value == 'true' : false,
+                            imageSize: block.attributes['image-size'] != undefined ? block.attributes['image-size'].value : 'tainacan-medium',
+                            hideName: block.attributes['hide-name'] != undefined ? block.attributes['hide-name'].value == 'true' : false,
+                            taxonomyId: block.attributes['taxonomy-id'] != undefined ? block.attributes['taxonomy-id'].value : undefined,
+                            showTermThumbnail: block.attributes['show-term-thumbnail'] != undefined ? block.attributes['show-term-thumbnail'].value == 'true' : false,
+                            tainacanApiRoot: block.attributes['tainacan-api-root'] != undefined ? block.attributes['tainacan-api-root'].value : undefined,
+                            tainacanBaseUrl: block.attributes['tainacan-base-url'] != undefined ? block.attributes['tainacan-base-url'].value : undefined
                         });
                     },
-                    beforeMount () {
-                        this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
-                        this.selectedTerms = this.$el.attributes['selected-terms'] != undefined ? JSON.parse(this.$el.attributes['selected-terms'].value) : undefined;
-                        this.maxItemsNumber = this.$el.attributes['max-terms-number'] != undefined ? this.$el.attributes['max-terms-number'].value : undefined;
-                        this.maxTermsPerScreen = this.$el.attributes['max-terms-per-screen'] != undefined ? this.$el.attributes['max-terms-per-screen'].value : undefined;
-                        this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
-                        this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
-                        this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
-                        this.spaceBetweenTerms = this.$el.attributes['space-between-terms'] != undefined ? this.$el.attributes['space-between-terms'].value : 32;
-                        this.spaceAroundCarousel = this.$el.attributes['space-around-carousel'] != undefined ? this.$el.attributes['space-around-carousel'].value : 50;
-                        this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
-                        this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined;
-                        this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
-                        this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
-                        this.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false;
-                        this.taxonomyId = this.$el.attributes['taxonomy-id'] != undefined ? this.$el.attributes['taxonomy-id'].value : undefined;
-                        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) {
-                            return wp.i18n.__(text, domain);
-                        }
+                    mounted() {
+                        block.classList.add('has-mounted');
                     }
-                };
-                
-                const VueCarouselTermsList = createApp( Object.assign({ el: '#' + blockId }, vueOptions) );
+                });
 
                 VueCarouselTermsList.use(VueBlurHash);
                 VueCarouselTermsList.use(ThumbnailHelperPlugin);
-            }
+
+                VueCarouselTermsList.mount('#' + block.id);
+            });
         }
     }
 
diff --git a/src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.vue b/src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.vue
index bdf10f7b3..5ab52725e 100644
--- a/src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.vue
+++ b/src/views/gutenberg-blocks/blocks/carousel-terms-list/theme.vue
@@ -1,148 +1,143 @@
 <template>
-    <div 
-            :style="customStyle"
-            :class="className + ' has-mounted'">
-
-        <div  
-                :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '')"
-                :style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
-                v-if="terms.length > 0 || isLoading">
-            <div 
-                    class="swiper"
-                    :id="blockId + '-carousel'">
-                <ul 
-                        v-if="isLoading"
-                        role="list"
-                        class="swiper-wrapper">
-                    <li 
-                            role="listitem"
-                            :key="index"
-                            v-for="index in 18"
-                            class="swiper-slide term-list-item skeleton">
-                        <a>
-                            <img>
-                            <span v-if="!hideName" />
-                        </a>
-                    </li>
-                </ul>
-                <ul 
+    <div  
+            :class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '')"
+            :style="{ '--spaceAroundCarousel': !isNaN(spaceAroundCarousel) ? (spaceAroundCarousel + 'px') : '50px' }"
+            v-if="terms.length > 0 || isLoading">
+        <div 
+                class="swiper"
+                :id="blockId + '-carousel'">
+            <ul 
+                    v-if="isLoading"
+                    role="list"
+                    class="swiper-wrapper">
+                <li 
+                        role="listitem"
+                        :key="index"
+                        v-for="index in 18"
+                        class="swiper-slide term-list-item skeleton">
+                    <a>
+                        <img>
+                        <span v-if="!hideName" />
+                    </a>
+                </li>
+            </ul>
+            <ul 
+                    v-else
+                    role="list"
+                    class="swiper-wrapper">
+                <li 
+                        role="listitem"
+                        :key="index"
+                        v-for="(term, index) of terms"
+                        :class="'swiper-slide term-list-item ' + (!showTermThumbnail ? 'term-list-item-grid' : '')">      
+                    <a 
+                            v-if="showTermThumbnail"
+                            :id="isNaN(term.id) ? term.id : 'term-id-' + term.id"
+                            :href="term.url">
+                        <img
+                            :src=" 
+                                term.thumbnail && term.thumbnail[imageSize] && term.thumbnail[imageSize][0] 
+                                    ?
+                                term.thumbnail[imageSize][0] 
+                                    :
+                                (term.thumbnail && term.thumbnail['thumbnail'] && term.thumbnail['thumbnail'][0]
+                                    ?    
+                                term.thumbnail['thumbnail'][0] 
+                                    : 
+                                `${tainacanBaseUrl}/assets/images/placeholder_square.png`)
+                            "
+                            :data-src=" 
+                                term.thumbnail && term.thumbnail[imageSize] && term.thumbnail[imageSize][0] 
+                                    ?
+                                term.thumbnail[imageSize][0] 
+                                    :
+                                (term.thumbnail && term.thumbnail['thumbnail'] && term.thumbnail['thumbnail'][0]
+                                    ?    
+                                term.thumbnail['thumbnail'][0] 
+                                    : 
+                                `${tainacanBaseUrl}/assets/images/placeholder_square.png`)
+                            "
+                            :alt="term.thumbnail_alt ? term.thumbnail_alt : (term.name ? term.name : wp.i18n.__('Thumbnail', 'tainacan'))" >
+                        <span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
+                    </a>
+                    <a 
+                            v-else
+                            :id="isNaN(term.id) ? term.id : 'term-id-' + term.id"
+                            :href="term.url">
+                        <div class="term-items-grid">
+                            <blur-hash-image
+                                    :height="termItems[term.id][0] ? $thumbHelper.getHeight(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
+                                    :width="termItems[term.id][0] ? $thumbHelper.getWidth(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
+                                    :src="termItems[term.id][0] ? $thumbHelper.getSrc(termItems[term.id][0]['thumbnail'], 'tainacan-medium', termItems[term.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
+                                    :srcset="termItems[term.id][0] ? $thumbHelper.getSrcSet(termItems[term.id][0]['thumbnail'], 'tainacan-medium', termItems[term.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
+                                    :hash="termItems[term.id][0] ? $thumbHelper.getBlurhashString(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
+                                    :alt="termItems[term.id][0] && termItems[term.id][0].thumbnail_alt ? termItems[term.id][0].thumbnail_alt : (termItems[term.id][0] && termItems[term.id][0].name ? termItems[term.id][0].name : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
+                                    :transition-duration="500" />
+                            <blur-hash-image
+                                    :height="termItems[term.id][1] ? $thumbHelper.getHeight(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 275"
+                                    :width="termItems[term.id][1] ? $thumbHelper.getWidth(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 275"
+                                    :src="termItems[term.id][1] ? $thumbHelper.getSrc(termItems[term.id][1]['thumbnail'], 'tainacan-medium', termItems[term.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
+                                    :srcset="termItems[term.id][1] ? $thumbHelper.getSrcSet(termItems[term.id][1]['thumbnail'], 'tainacan-medium', termItems[term.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
+                                    :hash="termItems[term.id][1] ? $thumbHelper.getBlurhashString(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
+                                    :alt="termItems[term.id][1] && termItems[term.id][1].thumbnail_alt ? termItems[term.id][1].thumbnail_alt : (termItems[term.id][1] && termItems[term.id][1].name ? termItems[term.id][1].name : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
+                                    :transition-duration="500" />
+                            <blur-hash-image
+                                    :height="termItems[term.id][2] ? $thumbHelper.getHeight(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 275"
+                                    :width="termItems[term.id][2] ? $thumbHelper.getWidth(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 275"
+                                    :src="termItems[term.id][2] ? $thumbHelper.getSrc(termItems[term.id][2]['thumbnail'], 'tainacan-medium', termItems[term.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
+                                    :srcset="termItems[term.id][2] ? $thumbHelper.getSrcSet(termItems[term.id][2]['thumbnail'], 'tainacan-medium', termItems[term.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
+                                    :hash="termItems[term.id][2] ? $thumbHelper.getBlurhashString(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
+                                    :alt="termItems[term.id][2] && termItems[term.id][2].thumbnail_alt ? termItems[term.id][2].thumbnail_alt : (termItems[term.id][2] && termItems[term.id][2].name ? termItems[term.id][2].name : wp.i18n.__( 'Thumbnail', 'tainacan' ))"
+                                    :transition-duration="500" />
+                        </div>
+                        <span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
+                    </a>
+                </li>
+            </ul> 
+        </div>
+        <button 
+                class="swiper-button-prev" 
+                :id="blockId + '-prev'" 
+                :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
+            <svg
+                    :width="largeArrows ? 60 : 42"
+                    :height="largeArrows ? 60 : 42"
+                    viewBox="0 0 24 24">
+                <path
+                        v-if="arrowsStyle === 'type-2'"
+                        d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
+                <path 
                         v-else
-                        role="list"
-                        class="swiper-wrapper">
-                    <li 
-                            role="listitem"
-                            :key="index"
-                            v-for="(term, index) of terms"
-                            :class="'swiper-slide term-list-item ' + (!showTermThumbnail ? 'term-list-item-grid' : '')">      
-                        <a 
-                                v-if="showTermThumbnail"
-                                :id="isNaN(term.id) ? term.id : 'term-id-' + term.id"
-                                :href="term.url">
-                            <img
-                                :src=" 
-                                    term.thumbnail && term.thumbnail[imageSize] && term.thumbnail[imageSize][0] 
-                                        ?
-                                    term.thumbnail[imageSize][0] 
-                                        :
-                                    (term.thumbnail && term.thumbnail['thumbnail'] && term.thumbnail['thumbnail'][0]
-                                        ?    
-                                    term.thumbnail['thumbnail'][0] 
-                                        : 
-                                    `${tainacanBaseUrl}/assets/images/placeholder_square.png`)
-                                "
-                                :data-src=" 
-                                    term.thumbnail && term.thumbnail[imageSize] && term.thumbnail[imageSize][0] 
-                                        ?
-                                    term.thumbnail[imageSize][0] 
-                                        :
-                                    (term.thumbnail && term.thumbnail['thumbnail'] && term.thumbnail['thumbnail'][0]
-                                        ?    
-                                    term.thumbnail['thumbnail'][0] 
-                                        : 
-                                    `${tainacanBaseUrl}/assets/images/placeholder_square.png`)
-                                "
-                                :alt="term.thumbnail_alt ? term.thumbnail_alt : (term.name ? term.name : $root.__('Thumbnail', 'tainacan'))" >
-                            <span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
-                        </a>
-                        <a 
-                                v-else
-                                :id="isNaN(term.id) ? term.id : 'term-id-' + term.id"
-                                :href="term.url">
-                            <div class="term-items-grid">
-                                <blur-hash-image
-                                        :height="termItems[term.id][0] ? $thumbHelper.getHeight(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
-                                        :width="termItems[term.id][0] ? $thumbHelper.getWidth(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 275"
-                                        :src="termItems[term.id][0] ? $thumbHelper.getSrc(termItems[term.id][0]['thumbnail'], 'tainacan-medium', termItems[term.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
-                                        :srcset="termItems[term.id][0] ? $thumbHelper.getSrcSet(termItems[term.id][0]['thumbnail'], 'tainacan-medium', termItems[term.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
-                                        :hash="termItems[term.id][0] ? $thumbHelper.getBlurhashString(termItems[term.id][0]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
-                                        :alt="termItems[term.id][0] && termItems[term.id][0].thumbnail_alt ? termItems[term.id][0].thumbnail_alt : (termItems[term.id][0] && termItems[term.id][0].name ? termItems[term.id][0].name : $root.__( 'Thumbnail', 'tainacan' ))"
-                                        :transition-duration="500" />
-                                <blur-hash-image
-                                        :height="termItems[term.id][1] ? $thumbHelper.getHeight(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 275"
-                                        :width="termItems[term.id][1] ? $thumbHelper.getWidth(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 275"
-                                        :src="termItems[term.id][1] ? $thumbHelper.getSrc(termItems[term.id][1]['thumbnail'], 'tainacan-medium', termItems[term.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
-                                        :srcset="termItems[term.id][1] ? $thumbHelper.getSrcSet(termItems[term.id][1]['thumbnail'], 'tainacan-medium', termItems[term.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
-                                        :hash="termItems[term.id][1] ? $thumbHelper.getBlurhashString(termItems[term.id][1]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
-                                        :alt="termItems[term.id][1] && termItems[term.id][1].thumbnail_alt ? termItems[term.id][1].thumbnail_alt : (termItems[term.id][1] && termItems[term.id][1].name ? termItems[term.id][1].name : $root.__( 'Thumbnail', 'tainacan' ))"
-                                        :transition-duration="500" />
-                                <blur-hash-image
-                                        :height="termItems[term.id][2] ? $thumbHelper.getHeight(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 275"
-                                        :width="termItems[term.id][2] ? $thumbHelper.getWidth(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 275"
-                                        :src="termItems[term.id][2] ? $thumbHelper.getSrc(termItems[term.id][2]['thumbnail'], 'tainacan-medium', termItems[term.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
-                                        :srcset="termItems[term.id][2] ? $thumbHelper.getSrcSet(termItems[term.id][2]['thumbnail'], 'tainacan-medium', termItems[term.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
-                                        :hash="termItems[term.id][2] ? $thumbHelper.getBlurhashString(termItems[term.id][2]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
-                                        :alt="termItems[term.id][2] && termItems[term.id][2].thumbnail_alt ? termItems[term.id][2].thumbnail_alt : (termItems[term.id][2] && termItems[term.id][2].name ? termItems[term.id][2].name : $root.__( 'Thumbnail', 'tainacan' ))"
-                                        :transition-duration="500" />
-                            </div>
-                            <span v-if="!hideName">{{ term.name ? term.name : '' }}</span>
-                        </a>
-                    </li>
-                </ul> 
-            </div>
-            <button 
-                    class="swiper-button-prev" 
-                    :id="blockId + '-prev'" 
-                    :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
-                <svg
-                        :width="largeArrows ? 60 : 42"
-                        :height="largeArrows ? 60 : 42"
-                        viewBox="0 0 24 24">
-                    <path
-                            v-if="arrowsStyle === 'type-2'"
-                            d="M 10.694196,6 12.103795,7.4095983 8.5000002,11.022321 H 19.305804 v 1.955358 H 8.5000002 L 12.103795,16.590402 10.694196,18 4.6941962,12 Z"/>
-                    <path 
-                            v-else
-                            d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
-                    <path
-                            d="M0 0h24v24H0z"
-                            fill="none"/>                         
-                </svg>
-            </button>
-            <button 
-                    class="swiper-button-next" 
-                    :id="blockId + '-next'"
-                    :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
-                <svg
-                        :width="largeArrows ? 60 : 42"
-                        :height="largeArrows ? 60 : 42"
-                        viewBox="0 0 24 24">
-                    <path
-                            v-if="arrowsStyle === 'type-2'"
-                            d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
-                    <path 
-                            v-else
-                            d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
-                    <path
-                            d="M0 0h24v24H0z"
-                            fill="none"/>                        
-                </svg>
-            </button>
-        </div>
-        <div
-                v-else-if="terms.length <= 0 && !isLoading"
-                class="spinner-container">
-            {{ $root.__('No terms found.', 'tainacan') }}
-        </div>
+                        d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+                <path
+                        d="M0 0h24v24H0z"
+                        fill="none"/>                         
+            </svg>
+        </button>
+        <button 
+                class="swiper-button-next" 
+                :id="blockId + '-next'"
+                :style="hideName ? 'top: calc(50% - 21px)' : 'top: calc(50% - ' + (largeArrows ? '60' : '42') + 'px)'">
+            <svg
+                    :width="largeArrows ? 60 : 42"
+                    :height="largeArrows ? 60 : 42"
+                    viewBox="0 0 24 24">
+                <path
+                        v-if="arrowsStyle === 'type-2'"
+                        d="M 13.305804,6 11.896205,7.4095983 15.5,11.022321 H 4.6941964 v 1.955358 H 15.5 L 11.896205,16.590402 13.305804,18 l 6,-6 z"/>
+                <path 
+                        v-else
+                        d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+                <path
+                        d="M0 0h24v24H0z"
+                        fill="none"/>                        
+            </svg>
+        </button>
+    </div>
+    <div
+            v-else-if="terms.length <= 0 && !isLoading"
+            class="spinner-container">
+        {{ wp.i18n.__('No terms found.', 'tainacan') }}
     </div>
 </template>
  
@@ -177,9 +172,7 @@ export default {
         showTermThumbnail: Boolean,
         tainacanApiRoot: String,
         tainacanBaseUrl: String,
-        className: String,
-        taxonomyId: String,
-        customStyle: String
+        taxonomyId: String
     },
     data() {
         return {
@@ -226,7 +219,7 @@ export default {
 
             this.termsRequestSource = axios.CancelToken.source();
 
-            let endpoint = '/taxonomy/' + this.taxonomyId + '/terms/?'+ qs.stringify({ hideempty: 0, include: this.selectedTerms, fetch_preview_image_items: this.showTermThumbnail ? 0 : 3 }) + '&order=asc';
+            const endpoint = '/taxonomy/' + this.taxonomyId + '/terms/?' + qs.stringify({ hideempty: 0, include: this.selectedTerms, fetch_preview_image_items: this.showTermThumbnail ? 0 : 3 }) + '&order=asc';
 
             this.tainacanAxios.get(endpoint, { cancelToken: this.termsRequestSource.token })
                 .then(response => {
@@ -253,6 +246,7 @@ export default {
         },
         mountCarousel() {
             const self = this;
+            
             this.swiper = new Swiper('#' + self.blockId + '-carousel', {
                 mousewheel: {
                     forceToAxis: true
@@ -285,10 +279,10 @@ export default {
                 autoplay: (self.autoPlay && !self.isLoading) ? { delay: self.autoPlaySpeed*1000 } : false,
                 loop: self.loopSlides && !self.isLoading,
                 a11y: {
-                    prevSlideMessage: self.$root.__( 'Previous slide', 'tainacan'),
-                    nextSlideMessage: self.$root.__( 'Next slide', 'tainacan'),
-                    firstSlideMessage: self.$root.__('This is the first slide', 'tainacan'),
-                    lastSlideMessage: self.$root.__('This is the last slide', 'tainacan')
+                    prevSlideMessage: wp.i18n.__( 'Previous slide', 'tainacan'),
+                    nextSlideMessage: wp.i18n.__( 'Next slide', 'tainacan'),
+                    firstSlideMessage: wp.i18n.__('This is the first slide', 'tainacan'),
+                    lastSlideMessage: wp.i18n.__('This is the last slide', 'tainacan')
                 },
                 modules: [Autoplay, Navigation, A11y]
             });
diff --git a/src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.js b/src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.js
index aea8cac97..2c9928dae 100644
--- a/src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.js
+++ b/src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.js
@@ -16,124 +16,54 @@ export default (element) => {
 
             // Checks if this carousel isn't already mounted
             blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
-            const blockIds = Object.values(blocks).map((block) => block.id);
     
             // Creates a new Vue Instance to manage each block isolatelly
-            for (let blockId of blockIds) {
+            blocks.forEach((block) => {
     
                 // Configure Vue logic before passing it to constructor:
-                let vueOptions = {
-                    data: () => {
-                        return {
-                            collectionId: '',  
-                            showImage: true,
-                            showName: true,
-                            layout: 'grid',
-                            gridMargin: 0,
-                            searchURL: '',
-                            selectedItems: [],
-                            loadStrategy: 'search',
-                            maxItemsNumber: 12,
-                            mosaicHeight: 40,
-                            mosaicDensity: 5,
-                            mosaicGridRows: 3,
-                            mosaicGridColumns: 3,
-                            mosaicItemFocalPointX : 0.5,
-                            mosaicItemFocalPointY : 0.5,
-                            maxColumnsCount: 4,
-                            imageSize: 'tainacan-medium',
-                            order: 'asc',
-                            orderBy: 'date',
-                            orderByMetaKey: '',
-                            showSearchBar: false,
-                            showCollectionHeader: false,
-                            showCollectionLabel: false,
-                            collectionBackgroundColor: '#373839',
-                            collectionTextColor: '#ffffff',
-                            tainacanApiRoot: '',
-                            tainacanBaseUrl: '',
-                            className: '',
-                            style: ''
-                        }
-                    },
+                const VueDynamicItemsList = createApp( {
                     render() { 
                         return h(DynamicItemsListTheme, {
-                            props: {
-                                collectionId: this.collectionId,  
-                                showImage: this.showImage,
-                                showName: this.showName,
-                                layout: this.layout,
-                                gridMargin: this.gridMargin,
-                                mosaicDensity: this.mosaicDensity,
-                                mosaicHeight: this.mosaicHeight,
-                                mosaicGridRows: this.mosaicGridRows,
-                                mosaicGridColumns: this.mosaicGridColumns,
-                                mosaicItemFocalPointX: this.mosaicItemFocalPointX,
-                                mosaicItemFocalPointY: this.mosaicItemFocalPointY,
-                                maxColumnsCount: this.maxColumnsCount,
-                                imageSize: this.imageSize,
-                                searchURL: this.searchURL,
-                                selectedItems: this.selectedItems,
-                                loadStrategy: this.loadStrategy,
-                                maxItemsNumber: this.maxItemsNumber,
-                                order: this.order,
-                                orderBy: this.orderBy,
-                                orderByMetaKey: this.orderByMetaKey,
-                                showSearchBar: this.showSearchBar,
-                                showCollectionHeader: this.showCollectionHeader,
-                                showCollectionLabel: this.showCollectionLabel,
-                                collectionBackgroundColor: this.collectionBackgroundColor,
-                                collectionTextColor: this.collectionTextColor,
-                                tainacanApiRoot: this.tainacanApiRoot,
-                                tainacanBaseUrl: this.tainacanBaseUrl,
-                                className: this.className,
-                                customStyle: this.style    
-                            }
+                            blockId: block.id,
+                            searchURL: block.attributes['search-url'] != undefined ? block.attributes['search-url'].value : undefined,
+                            selectedItems: block.attributes['selected-items'] != undefined ? JSON.parse(block.attributes['selected-items'].value) : undefined,
+                            loadStrategy: block.attributes['load-strategy'] != undefined ? block.attributes['load-strategy'].value : undefined,
+                            collectionId: block.attributes['collection-id'] != undefined ? block.attributes['collection-id'].value : undefined,
+                            showImage: block.attributes['show-image'] != undefined ? block.attributes['show-image'].value == 'true' : true,
+                            showName: block.attributes['show-name'] != undefined ? block.attributes['show-name'].value == 'true' : true,
+                            layout: block.attributes['layout'] != undefined ? block.attributes['layout'].value : undefined,
+                            gridMargin: block.attributes['grid-margin'] != undefined ? Number(block.attributes['grid-margin'].value) : undefined,
+                            mosaicDensity: block.attributes['mosaic-density'] != undefined ? Number(block.attributes['mosaic-density'].value) : undefined,
+                            mosaicHeight: block.attributes['mosaic-height'] != undefined ? Number(block.attributes['mosaic-height'].value) : undefined,
+                            mosaicGridRows: block.attributes['mosaic-grid-rows'] != undefined ? Number(block.attributes['mosaic-grid-rows'].value) : undefined,
+                            mosaicGridColumns: block.attributes['mosaic-grid-columns'] != undefined ? Number(block.attributes['mosaic-grid-columns'].value) : undefined,
+                            mosaicItemFocalPointX: block.attributes['mosaic-item-focal-point-x'] != undefined ? Number(block.attributes['mosaic-item-focal-point-x'].value) : undefined,
+                            mosaicItemFocalPointY: block.attributes['mosaic-item-focal-point-y'] != undefined ? Number(block.attributes['mosaic-item-focal-point-y'].value) : undefined,
+                            maxColumnsCount: block.attributes['max-columns-count'] != undefined ? block.attributes['max-columns-count'].value : 4,
+                            imageSize: block.attributes['image-size'] != undefined ? block.attributes['image-size'].value : 'tainacan-medium',
+                            maxItemsNumber: block.attributes['max-items-number'] != undefined ? block.attributes['max-items-number'].value : undefined,
+                            order: block.attributes['order'] != undefined ? block.attributes['order'].value : undefined,
+                            orderBy: block.attributes['order-by'] != undefined ? block.attributes['order-by'].value : undefined,
+                            orderByMetaKey: block.attributes['order-by-meta-key'] != undefined ? block.attributes['order-by-meta-key'].value : undefined,
+                            showSearchBar: block.attributes['show-search-bar'] != undefined ? block.attributes['show-search-bar'].value == 'true' : false,
+                            showCollectionHeader: block.attributes['show-collection-header'] != undefined ? block.attributes['show-collection-header'].value == 'true' : false,
+                            showCollectionLabel: block.attributes['show-collection-label'] != undefined ? block.attributes['show-collection-label'].value == 'true' : false,
+                            collectionBackgroundColor: block.attributes['collection-background-color'] != undefined ? block.attributes['collection-background-color'].value : undefined,
+                            collectionTextColor: block.attributes['collection-text-color'] != undefined ? block.attributes['collection-text-color'].value : undefined,
+                            tainacanApiRoot: block.attributes['tainacan-api-root'] != undefined ? block.attributes['tainacan-api-root'].value : undefined,
+                            tainacanBaseUrl: block.attributes['tainacan-base-url'] != undefined ? block.attributes['tainacan-base-url'].value : undefined
                         });
                     },
-                    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;
-                        this.layout = this.$el.attributes['layout'] != undefined ? this.$el.attributes['layout'].value : undefined;
-                        this.gridMargin = this.$el.attributes['grid-margin'] != undefined ? Number(this.$el.attributes['grid-margin'].value) : undefined;
-                        this.mosaicDensity = this.$el.attributes['mosaic-density'] != undefined ? Number(this.$el.attributes['mosaic-density'].value) : undefined;
-                        this.mosaicHeight = this.$el.attributes['mosaic-height'] != undefined ? Number(this.$el.attributes['mosaic-height'].value) : undefined;
-                        this.mosaicGridRows = this.$el.attributes['mosaic-grid-rows'] != undefined ? Number(this.$el.attributes['mosaic-grid-rows'].value) : undefined;
-                        this.mosaicGridColumns = this.$el.attributes['mosaic-grid-columns'] != undefined ? Number(this.$el.attributes['mosaic-grid-columns'].value) : undefined;
-                        this.mosaicItemFocalPointX = this.$el.attributes['mosaic-item-focal-point-x'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-x'].value) : undefined;
-                        this.mosaicItemFocalPointY = this.$el.attributes['mosaic-item-focal-point-y'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-y'].value) : undefined;
-                        this.maxColumnsCount = this.$el.attributes['max-columns-count'] != undefined ? this.$el.attributes['max-columns-count'].value : 4;
-                        this.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
-                        this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
-                        this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
-                        this.orderBy = this.$el.attributes['order-by'] != undefined ? this.$el.attributes['order-by'].value : undefined;
-                        this.orderByMetaKey = this.$el.attributes['order-by-meta-key'] != undefined ? this.$el.attributes['order-by-meta-key'].value : undefined;
-                        this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
-                        this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
-                        this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
-                        this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;
-                        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) {
-                            return wp.i18n.__(text, domain);
-                        }
+                    mounted() {
+                        block.classList.add('has-mounted');
                     }
-                };
-    
-                const VueDynamicItemsList = createApp( Object.assign({ el: '#' + blockId }, vueOptions) );
+                });
 
                 VueDynamicItemsList.use(ThumbnailHelperPlugin);
                 VueDynamicItemsList.use(VueBlurHash);
-            }
+
+                VueDynamicItemsList.mount('#' + block.id);
+            });
         }
     }
 
diff --git a/src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.vue b/src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.vue
index d9700f12e..fb42689f0 100644
--- a/src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.vue
+++ b/src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.vue
@@ -1,211 +1,254 @@
 <template>
-    <div 
-            :style="customStyle"
-            :class="className + ' has-mounted'">
-        <div v-if="showCollectionHeader">
-            <div
-                    v-if="isLoadingCollection"
-                    class="dynamic-items-collection-header skeleton" 
-                    :style="{ height: '165px' }"/>
-            <a
-                    v-else
-                    :href="collection.url ? collection.url : ''"
-                    class="dynamic-items-collection-header">
-                <div
-                        :style="{
-                            backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '', 
-                            paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
-                            paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
-                            width: collection && collection.header_image ? '' : '100%'
-                        }"
-                        :class="
-                            'collection-name ' + 
-                            ((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '') 
-                        ">
-                    <h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
-                        <span
-                                v-if="showCollectionLabel"
-                                class="label">
-                            {{ $root.__('Collection', 'tainacan') }}
-                            <br>
-                        </span>
-                        {{ collection && collection.name ? collection.name : '' }}
-                    </h3>
-                </div>
-                <div
-                    v-if="collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])"   
-                    class="collection-thumbnail"
-                    :style="{ 
-                        backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
-                    }"/>
-                <div
-                        class="collection-header-image"
-                        :style="{
-                            backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
-                            minHeight: collection && collection.header_image ? '' : '80px',
-                            display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''  
-                        }"/>
-            </a>   
-        </div>
+    <div v-if="showCollectionHeader">
         <div
-                v-if="showSearchBar"
-                class="dynamic-items-search-bar">
-            <button
-                    @click="localOrder = 'asc'; fetchItems()"
-                    :class="localOrder == 'asc' ? 'sorting-button-selected' : ''"
-                    :label="$root.__('Sort ascending', 'tainacan')">
-                <span class="icon">
-                    <i>
-                        <svg
-                                width="24"
-                                height="24"
-                                viewBox="-2 -2 20 20">
-                            <path d="M6.7,10.8l-3.3,3.3L0,10.8h2.5V0h1.7v10.8H6.7z M11.7,0.8H8.3v1.7h3.3V0.8z M14.2,5.8H8.3v1.7h5.8V5.8z M16.7,10.8H8.3v1.7	h8.3V10.8z"/>       
-                        </svg>
-                    </i>
-                </span>
-            </button>  
-            <button
-                    @click="localOrder = 'desc'; fetchItems(); "
-                    :class="localOrder == 'desc' ? 'sorting-button-selected' : ''"
-                    :label="$root.__('Sort descending', 'tainacan')">
-                <span class="icon">
-                    <i>
-                        <svg
-                                width="24"
-                                height="24"
-                                viewBox="-2 -2 20 20">
-                            <path
-                                    d="M6.7,3.3H4.2v10.8H2.5V3.3H0L3.3,0L6.7,3.3z M11.6,2.5H8.3v1.7h3.3V2.5z M14.1,7.5H8.3v1.7h5.8V7.5z M16.6,12.5H8.3v1.7 h8.3V12.5z"/>
-                        </svg>
-                    </i>
-                </span>
-            </button>  
-            <button
-                    @click="fetchItems()"
-                    :label="$root.__('Search', 'tainacan')"
-                    class="search-button">
-                <span class="icon">
-                    <i>
-                        <svg    
-                                width="24"
-                                height="24"
-                                viewBox="-2 -2 20 20">
-                            <path
-                                    class="st0"
-                                    d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
-                                    c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
-                                    c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
-                                    c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
-                                    C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
-                                    c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
-                                    c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>       
-                        </svg>
-                    </i>
-                </span>
-            </button>
-            <input
-                    :value="searchString"
-                    @input="(value) => applySearchString(value)"
-                    type="text">
-            <button
-                    class="previous-button"
-                    v-if="paged > 1"
-                    @click="paged--; fetchItems()"
-                    :label="$root.__('Previous page', 'tainacan')">
-                <span class="icon">
-                    <i>
-                        <svg
-                                width="30"
-                                height="30"
-                                viewBox="0 2 20 20">
-                            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
-                            <path
-                                    d="M0 0h24v24H0z"
-                                    fill="none"/>                        
-                        </svg>
-                    </i>
-                </span>
-            </button> 
-            <button
-                    :style="{ marginLeft: paged <= 1 ? 'auto' : '0' }"
-                    class="next-button"
-                    v-if="paged < totalItems/localMaxItemsNumber && items.length < totalItems"
-                    @click="paged++; fetchItems()"
-                    :label="$root.__('Next page', 'tainacan')">
-                <span class="icon">
-                    <i>
-                        <svg
-                                width="30"
-                                height="30"
-                                viewBox="0 2 20 20">
-                            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
-                            <path
-                                    d="M0 0h24v24H0z"
-                                    fill="none"/>                        
-                        </svg>
-                    </i>
-                </span>
-            </button> 
-        </div>
-        <template v-if="isLoading">
-            <ul
-                    v-if="layout !== 'mosaic'"
+                v-if="isLoadingCollection"
+                class="dynamic-items-collection-header skeleton" 
+                :style="{ height: '165px' }"/>
+        <a
+                v-else
+                :href="collection.url ? collection.url : ''"
+                class="dynamic-items-collection-header">
+            <div
                     :style="{
-                        marginTop: (showSearchBar || showCollectionHeader) ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px',
-                        gridGap: (showName ? gridMargin + 24 : gridMargin) + 'px',
-                        gap: (showName ? gridMargin + 24 : gridMargin) + 'px'
+                        backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '', 
+                        paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
+                        paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
+                        width: collection && collection.header_image ? '' : '100%'
                     }"
-                    class="items-list"
-                    :class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
-                <li
-                        :key="item"
-                        v-for="item in Number(localMaxItemsNumber)"
-                        class="item-list-item skeleton"
-                        :style="{ 
-                            marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
-                            height: layout == 'grid' ? '230px' : '54px'
-                        }" />      
-            </ul>
-            <ul
-                    v-if="layout === 'mosaic'"
+                    :class="
+                        'collection-name ' + 
+                        ((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '') 
+                    ">
+                <h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
+                    <span
+                            v-if="showCollectionLabel"
+                            class="label">
+                        {{ $root.__('Collection', 'tainacan') }}
+                        <br>
+                    </span>
+                    {{ collection && collection.name ? collection.name : '' }}
+                </h3>
+            </div>
+            <div
+                v-if="collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])"   
+                class="collection-thumbnail"
+                :style="{ 
+                    backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
+                }"/>
+            <div
+                    class="collection-header-image"
                     :style="{
-                        marginTop: showSearchBar || showCollectionHeader ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px',    
-                        padding: '0 ' + (Number(gridMargin)/4) + 'px',
-                        minHeight: layout === 'mosaic' ? mosaicHeight + 'px' : ''
+                        backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
+                        minHeight: collection && collection.header_image ? '' : '80px',
+                        display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''  
+                    }"/>
+        </a>   
+    </div>
+    <div
+            v-if="showSearchBar"
+            class="dynamic-items-search-bar">
+        <button
+                @click="localOrder = 'asc'; fetchItems()"
+                :class="localOrder == 'asc' ? 'sorting-button-selected' : ''"
+                :label="$root.__('Sort ascending', 'tainacan')">
+            <span class="icon">
+                <i>
+                    <svg
+                            width="24"
+                            height="24"
+                            viewBox="-2 -2 20 20">
+                        <path d="M6.7,10.8l-3.3,3.3L0,10.8h2.5V0h1.7v10.8H6.7z M11.7,0.8H8.3v1.7h3.3V0.8z M14.2,5.8H8.3v1.7h5.8V5.8z M16.7,10.8H8.3v1.7	h8.3V10.8z"/>       
+                    </svg>
+                </i>
+            </span>
+        </button>  
+        <button
+                @click="localOrder = 'desc'; fetchItems(); "
+                :class="localOrder == 'desc' ? 'sorting-button-selected' : ''"
+                :label="$root.__('Sort descending', 'tainacan')">
+            <span class="icon">
+                <i>
+                    <svg
+                            width="24"
+                            height="24"
+                            viewBox="-2 -2 20 20">
+                        <path
+                                d="M6.7,3.3H4.2v10.8H2.5V3.3H0L3.3,0L6.7,3.3z M11.6,2.5H8.3v1.7h3.3V2.5z M14.1,7.5H8.3v1.7h5.8V7.5z M16.6,12.5H8.3v1.7 h8.3V12.5z"/>
+                    </svg>
+                </i>
+            </span>
+        </button>  
+        <button
+                @click="fetchItems()"
+                :label="$root.__('Search', 'tainacan')"
+                class="search-button">
+            <span class="icon">
+                <i>
+                    <svg    
+                            width="24"
+                            height="24"
+                            viewBox="-2 -2 20 20">
+                        <path
+                                class="st0"
+                                d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
+                                c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
+                                c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
+                                c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
+                                C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
+                                c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
+                                c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>       
+                    </svg>
+                </i>
+            </span>
+        </button>
+        <input
+                :value="searchString"
+                @input="(value) => applySearchString(value)"
+                type="text">
+        <button
+                class="previous-button"
+                v-if="paged > 1"
+                @click="paged--; fetchItems()"
+                :label="$root.__('Previous page', 'tainacan')">
+            <span class="icon">
+                <i>
+                    <svg
+                            width="30"
+                            height="30"
+                            viewBox="0 2 20 20">
+                        <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+                        <path
+                                d="M0 0h24v24H0z"
+                                fill="none"/>                        
+                    </svg>
+                </i>
+            </span>
+        </button> 
+        <button
+                :style="{ marginLeft: paged <= 1 ? 'auto' : '0' }"
+                class="next-button"
+                v-if="paged < totalItems/localMaxItemsNumber && items.length < totalItems"
+                @click="paged++; fetchItems()"
+                :label="$root.__('Next page', 'tainacan')">
+            <span class="icon">
+                <i>
+                    <svg
+                            width="30"
+                            height="30"
+                            viewBox="0 2 20 20">
+                        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
+                        <path
+                                d="M0 0h24v24H0z"
+                                fill="none"/>                        
+                    </svg>
+                </i>
+            </span>
+        </button> 
+    </div>
+    <template v-if="isLoading">
+        <ul
+                v-if="layout !== 'mosaic'"
+                :style="{
+                    marginTop: (showSearchBar || showCollectionHeader) ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px',
+                    gridGap: (showName ? gridMargin + 24 : gridMargin) + 'px',
+                    gap: (showName ? gridMargin + 24 : gridMargin) + 'px'
+                }"
+                class="items-list"
+                :class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
+            <li
+                    :key="item"
+                    v-for="item in Number(localMaxItemsNumber)"
+                    class="item-list-item skeleton"
+                    :style="{ 
+                        marginBottom: layout == 'grid' ? (showName ? gridMargin + 12 : gridMargin) + 'px' : '',
+                        height: layout == 'grid' ? '230px' : '54px'
+                    }" />      
+        </ul>
+        <ul
+                v-if="layout === 'mosaic'"
+                :style="{
+                    marginTop: showSearchBar || showCollectionHeader ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px',    
+                    padding: '0 ' + (Number(gridMargin)/4) + 'px',
+                    minHeight: layout === 'mosaic' ? mosaicHeight + 'px' : ''
+                }"
+                class="items-list"
+                :class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
+            <div 
+                    :style="{ 
+                        width: 'calc((100% / ' + mosaicPartition(items).length + ') - ' + gridMargin + 'px)',
+                        height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'px))',
+                        margin: gridMargin + 'px'
                     }"
-                    class="items-list"
-                    :class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
-                <div 
-                        :style="{ 
-                            width: 'calc((100% / ' + mosaicPartition(items).length + ') - ' + gridMargin + 'px)',
-                            height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'px))',
-                            margin: gridMargin + 'px'
-                        }"
-                        class="mosaic-container skeleton"
-                        :key="mosaicIndex"
-                        v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items)" /> 
-            </ul>
-        </template>
-        <div v-else>
-            <ul 
-                    v-if="items.length > 0 && layout !== 'mosaic'"
-                    :style="{
-                        gridGap: layout == 'grid' ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : 'inherit',
-                        marginTop: (showSearchBar || showCollectionHeader) ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px'
+                    class="mosaic-container skeleton"
+                    :key="mosaicIndex"
+                    v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items)" /> 
+        </ul>
+    </template>
+    <div v-else>
+        <ul 
+                v-if="items.length > 0 && layout !== 'mosaic'"
+                :style="{
+                    gridGap: layout == 'grid' ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : 'inherit',
+                    marginTop: (showSearchBar || showCollectionHeader) ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px'
+                }"
+                class="items-list"
+                :class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
+            <li
+                    :key="index"
+                    v-for="(item, index) of items"
+                    class="item-list-item">
+                <a 
+                        :id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
+                        :href="item.url"
+                        :class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
+                    <blur-hash-image
+                            v-if="showImage"
+                            :height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
+                            :width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
+                            :src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
+                            :srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
+                            :hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
+                            :alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
+                            :transition-duration="500" />
+                    <span v-if="item.title">{{ item.title }}</span>
+                </a>
+            </li>
+        </ul>
+        <ul 
+                v-if="items.length > 0 && layout === 'mosaic'"
+                :style="{
+                    marginTop: showSearchBar || showCollectionHeader ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px',    
+                    padding: '0 ' + (Number(gridMargin)/4) + 'px',
+                    minHeight: layout === 'mosaic' ? mosaicHeight + 'px' : ''
+                }"
+                class="items-list"
+                :class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
+            <div 
+                    :style="{ 
+                        width: 'calc((100% / ' + mosaicPartition(items).length + ') - ' + gridMargin + 'px)',
+                        height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'px))',
+                        gridTemplateColumns: 'repeat(' + mosaicGridColumns + ', calc((100% / ' + mosaicGridColumns + ') - (' + ((mosaicGridColumns - 1)*Number(gridMargin)) + 'px/' + mosaicGridColumns + ')))',
+                        margin: gridMargin + 'px',
+                        gridGap: gridMargin + 'px',
+                        gap: gridMargin + 'px'
                     }"
-                    class="items-list"
-                    :class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '') + (maxColumnsCount ? ' max-columns-count-' + maxColumnsCount : '')">
+                    class="mosaic-container"
+                    :class="'mosaic-container--' + mosaicGroup.length + '-' + mosaicGridRows + 'x' + mosaicGridColumns"
+                    :key="mosaicIndex"
+                    v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items)">
                 <li
                         :key="index"
-                        v-for="(item, index) of items"
-                        class="item-list-item">
+                        v-for="(item, index) of mosaicGroup"
+                        class="item-list-item"
+                        :style="{
+                            backgroundImage: layout == 'mosaic' ? `url(${$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])})` : 'none',
+                            backgroundPosition: layout == 'mosaic' ? `${ mosaicItemFocalPointX * 100 }% ${ mosaicItemFocalPointY * 100 }%` : 'none'
+                        }">          
                     <a 
                             :id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
                             :href="item.url"
                             :class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
                         <blur-hash-image
-                                v-if="showImage"
                                 :height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
                                 :width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
                                 :src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
@@ -216,59 +259,12 @@
                         <span v-if="item.title">{{ item.title }}</span>
                     </a>
                 </li>
-            </ul>
-            <ul 
-                    v-if="items.length > 0 && layout === 'mosaic'"
-                    :style="{
-                        marginTop: showSearchBar || showCollectionHeader ? ((showName ? gridMargin + 24 : gridMargin) + 'px') : '0px',    
-                        padding: '0 ' + (Number(gridMargin)/4) + 'px',
-                        minHeight: layout === 'mosaic' ? mosaicHeight + 'px' : ''
-                    }"
-                    class="items-list"
-                    :class="'items-layout-' + layout + (!showName ? ' items-list-without-margin' : '')">
-                <div 
-                        :style="{ 
-                            width: 'calc((100% / ' + mosaicPartition(items).length + ') - ' + gridMargin + 'px)',
-                            height: 'calc(((' + (mosaicGridRows - 1) + ' * ' + gridMargin + 'px) + ' + mosaicHeight + 'px))',
-                            gridTemplateColumns: 'repeat(' + mosaicGridColumns + ', calc((100% / ' + mosaicGridColumns + ') - (' + ((mosaicGridColumns - 1)*Number(gridMargin)) + 'px/' + mosaicGridColumns + ')))',
-                            margin: gridMargin + 'px',
-                            gridGap: gridMargin + 'px',
-                            gap: gridMargin + 'px'
-                        }"
-                        class="mosaic-container"
-                        :class="'mosaic-container--' + mosaicGroup.length + '-' + mosaicGridRows + 'x' + mosaicGridColumns"
-                        :key="mosaicIndex"
-                        v-for="(mosaicGroup, mosaicIndex) of mosaicPartition(items)">
-                    <li
-                            :key="index"
-                            v-for="(item, index) of mosaicGroup"
-                            class="item-list-item"
-                            :style="{
-                                backgroundImage: layout == 'mosaic' ? `url(${$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])})` : 'none',
-                                backgroundPosition: layout == 'mosaic' ? `${ mosaicItemFocalPointX * 100 }% ${ mosaicItemFocalPointY * 100 }%` : 'none'
-                            }">          
-                        <a 
-                                :id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
-                                :href="item.url"
-                                :class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
-                            <blur-hash-image
-                                    :height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
-                                    :width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
-                                    :src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
-                                    :srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
-                                    :hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
-                                    :alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
-                                    :transition-duration="500" />
-                            <span v-if="item.title">{{ item.title }}</span>
-                        </a>
-                    </li>
-                </div>
-            </ul>
-            <div
-                    v-else-if="!isLoading && items.length <= 0"
-                    class="spinner-container">
-                {{ $root.__(errorMessage, 'tainacan') }}
             </div>
+        </ul>
+        <div
+                v-else-if="!isLoading && items.length <= 0"
+                class="spinner-container">
+            {{ $root.__(errorMessage, 'tainacan') }}
         </div>
     </div>
 </template>
@@ -307,9 +303,7 @@ export default {
         collectionBackgroundColor: String,
         collectionTextColor: String,
         tainacanApiRoot: String,
-        tainacanBaseUrl: String,
-        className: String,
-        customStyle: String
+        tainacanBaseUrl: String
     },    
     data() {
         return {
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/theme-router.js b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/theme-router.js
index 3561bb14a..854719395 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/theme-router.js
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/theme-router.js
@@ -1,17 +1,15 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import qs from 'qs';
+import ThemeItemsPage from '../theme-items-page.vue';
 
-const themeRoutes = [];
+const themeRoutes = [
+    // Catch-all route to handle any path
+    {
+        path: '/:catchAll(.*)*',
+        component: ThemeItemsPage, // The component where you want to respond to changes
+    }
+];
 
 export default createRouter ({
     history: createWebHistory(window.document.location.pathname),
-    routes: themeRoutes,
-    // set custom query resolver
-    parseQuery(query) {
-        return qs.parse(query);
-    },
-    stringifyQuery(query) {
-        let result = qs.stringify(query);
-        return result ? result : '';
-    }
+    routes: themeRoutes
 });
\ No newline at end of file
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
index 198805668..f844ef854 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue
@@ -1011,7 +1011,7 @@
         },
         created() {
             this.isRepositoryLevel = (this.collectionId == undefined || this.collectionId == '' || this.collectionId == null);
-            
+
             this.$eventBusSearch.updateStoreFromURL();
 
             // Sets initial variables important to searchbus
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme.js b/src/views/gutenberg-blocks/blocks/faceted-search/theme.js
index 4dcdc6776..0bf253253 100644
--- a/src/views/gutenberg-blocks/blocks/faceted-search/theme.js
+++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme.js
@@ -96,7 +96,7 @@ export default (element) => {
                         showFullscreenWithViewModes: false
                     }
                 },
-                created() {
+                beforeMount() {
                     // Loads params if passed previously 
                     if (this.$route.hash && this.$route.hash.split('#/?') && this.$route.hash.split('#/?')[1]) {
                         const existingQueries = qs.parse(this.$route.hash.split('#/?')[1]); 
@@ -104,78 +104,76 @@ export default (element) => {
                         for (let key of Object.keys(existingQueries))
                             this.$route.query[key] = existingQueries[key];
                     }
-                },
-                mounted() {
-                    
+
                     // Collection or Term source settings
-                    if (this.$el.attributes['collection-id'] != undefined)
-                        this.collectionId = this.$el.attributes['collection-id'].value;
-                    if (this.$el.attributes['term-id'] != undefined)
-                        this.termId = this.$el.attributes['term-id'].value;
-                    if (this.$el.attributes['taxonomy'] != undefined)
-                        this.taxonomy = this.$el.attributes['taxonomy'].value;
+                    if (blockElement.attributes['collection-id'] != undefined)
+                        this.collectionId = blockElement.attributes['collection-id'].value;
+                    if (blockElement.attributes['term-id'] != undefined)
+                        this.termId = blockElement.attributes['term-id'].value;
+                    if (blockElement.attributes['taxonomy'] != undefined)
+                        this.taxonomy = blockElement.attributes['taxonomy'].value;
 
                     // Sorting options
-                    if (this.$el.attributes['default-order'] != undefined)
-                        this.defaultOrder = this.$el.attributes['default-order'].value;
-                    if (this.$el.attributes['default-orderby'] != undefined) {
-                        this.defaultOrderBy = this.maybeConvertFromJSON(this.$el.attributes['default-orderby'].value);
+                    if (blockElement.attributes['default-order'] != undefined)
+                        this.defaultOrder = blockElement.attributes['default-order'].value;
+                    if (blockElement.attributes['default-orderby'] != undefined) {
+                        this.defaultOrderBy = this.maybeConvertFromJSON(blockElement.attributes['default-orderby'].value);
                         this.defaultOrderBy === 'creation_date' ? 'date' : this.defaultOrderBy;
                     }
-                    if (this.$el.attributes['default-orderby-meta'] != undefined)
-                        this.defaultOrderByMeta = this.$el.attributes['default-orderby-meta'].value;
-                    if (this.$el.attributes['default-orderby-type'] != undefined)
-                        this.defaultOrderByType = this.maybeConvertFromJSON(this.$el.attributes['default-orderby-type'].value);
+                    if (blockElement.attributes['default-orderby-meta'] != undefined)
+                        this.defaultOrderByMeta = blockElement.attributes['default-orderby-meta'].value;
+                    if (blockElement.attributes['default-orderby-type'] != undefined)
+                        this.defaultOrderByType = this.maybeConvertFromJSON(blockElement.attributes['default-orderby-type'].value);
 
                     // View modes settings
-                    if (this.$el.attributes['is-forced-view-mode'] != undefined)
-                        this.isForcedViewMode = new Boolean(this.$el.attributes['is-forced-view-mode'].value);
+                    if (blockElement.attributes['is-forced-view-mode'] != undefined)
+                        this.isForcedViewMode = new Boolean(blockElement.attributes['is-forced-view-mode'].value);
                     
                     this.defaultViewMode = possibleDefaultViewMode;
                     this.enabledViewModes = possibleViewModes;
 
                     // Options related to hidding elements
                     this.hideFilters = possibleHideFilters;
-                    if (this.$el.attributes['hide-hide-filters-button'] != undefined)
+                    if (blockElement.attributes['hide-hide-filters-button'] != undefined)
                         this.hideHideFiltersButton = this.isParameterTrue('hide-hide-filters-button');
-                    if (this.$el.attributes['hide-search'] != undefined)
+                    if (blockElement.attributes['hide-search'] != undefined)
                         this.hideSearch = this.isParameterTrue('hide-search');
-                    if (this.$el.attributes['hide-advanced-search'] != undefined)
+                    if (blockElement.attributes['hide-advanced-search'] != undefined)
                         this.hideAdvancedSearch = this.isParameterTrue('hide-advanced-search');
-                    if (this.$el.attributes['hide-displayed-metadata-button'] != undefined)
+                    if (blockElement.attributes['hide-displayed-metadata-button'] != undefined)
                         this.hideDisplayedMetadataButton = this.isParameterTrue('hide-displayed-metadata-button');
-                    if (this.$el.attributes['hide-sorting-area'] != undefined)
+                    if (blockElement.attributes['hide-sorting-area'] != undefined)
                         this.hideSortingArea = this.isParameterTrue('hide-sorting-area');
-                    if (this.$el.attributes['hide-items-thumbnail'] != undefined)
+                    if (blockElement.attributes['hide-items-thumbnail'] != undefined)
                         this.hideItemsThumbnail = this.isParameterTrue('hide-items-thumbnail');
-                    if (this.$el.attributes['hide-sort-by-button'] != undefined)
+                    if (blockElement.attributes['hide-sort-by-button'] != undefined)
                         this.hideSortByButton = this.isParameterTrue('hide-sort-by-button');
-                    if (this.$el.attributes['hide-exposers-button'] != undefined)
+                    if (blockElement.attributes['hide-exposers-button'] != undefined)
                         this.hideExposersButton = this.isParameterTrue('hide-exposers-button');
-                    if (this.$el.attributes['hide-items-per-page-button'] != undefined)
+                    if (blockElement.attributes['hide-items-per-page-button'] != undefined)
                         this.hideItemsPerPageButton = this.isParameterTrue('hide-items-per-page-button');
-                    if (this.$el.attributes['hide-go-to-page-button'] != undefined)
+                    if (blockElement.attributes['hide-go-to-page-button'] != undefined)
                         this.hideGoToPageButton = this.isParameterTrue('hide-go-to-page-button');
-                    if (this.$el.attributes['hide-pagination-area'] != undefined)
+                    if (blockElement.attributes['hide-pagination-area'] != undefined)
                         this.hidePaginationArea = this.isParameterTrue('hide-pagination-area');
 
                     // Other Tweaks
-                    if (this.$el.attributes['default-items-per-page'] != undefined)
-                        this.defaultItemsPerPage = Number(this.$el.attributes['default-items-per-page'].value);
-                    if (this.$el.attributes['show-filters-button-inside-search-control'] != undefined)
+                    if (blockElement.attributes['default-items-per-page'] != undefined)
+                        this.defaultItemsPerPage = Number(blockElement.attributes['default-items-per-page'].value);
+                    if (blockElement.attributes['show-filters-button-inside-search-control'] != undefined)
                         this.showFiltersButtonInsideSearchControl = this.isParameterTrue('show-filters-button-inside-search-control');
-                    if (this.$el.attributes['start-with-filters-hidden'] != undefined)
+                    if (blockElement.attributes['start-with-filters-hidden'] != undefined)
                         this.startWithFiltersHidden = this.isParameterTrue('start-with-filters-hidden');
-                    if (this.$el.attributes['filters-as-modal'] != undefined)
+                    if (blockElement.attributes['filters-as-modal'] != undefined)
                         this.filtersAsModal = this.isParameterTrue('filters-as-modal');
-                    if (this.$el.attributes['show-inline-view-mode-options'] != undefined)
+                    if (blockElement.attributes['show-inline-view-mode-options'] != undefined)
                         this.showInlineViewModeOptions = this.isParameterTrue('show-inline-view-mode-options');
-                    if (this.$el.attributes['show-fullscreen-with-view-modes'] != undefined)
+                    if (blockElement.attributes['show-fullscreen-with-view-modes'] != undefined)
                         this.showFullscreenWithViewModes = this.isParameterTrue('show-fullscreen-with-view-modes');
                 },
                 methods: {
                     isParameterTrue(parameter) {
-                        const value = this.$el.attributes[parameter].value;
+                        const value = blockElement.attributes[parameter].value;
                         return (value == true || value == 'true' || value == '1' || value == 1) ? true : false;
                     },
                     maybeConvertFromJSON(someString) {
diff --git a/src/views/gutenberg-blocks/blocks/item-submission-form/theme.js b/src/views/gutenberg-blocks/blocks/item-submission-form/theme.js
index d1d5da2d2..b5dc8adf9 100644
--- a/src/views/gutenberg-blocks/blocks/item-submission-form/theme.js
+++ b/src/views/gutenberg-blocks/blocks/item-submission-form/theme.js
@@ -89,67 +89,67 @@ export default (element) => {
                 },
                 beforeMount () {
                     // Collection source settings
-                    if (this.$el.attributes['collection-id'] != undefined)
-                        this.collectionId = this.$el.attributes['collection-id'].value;
+                    if (blockElement.attributes['collection-id'] != undefined)
+                        this.collectionId = blockElement.attributes['collection-id'].value;
 
                     // Elements shown on form
-                    if (this.$el.attributes['hide-file-modal-button'] != undefined)
+                    if (blockElement.attributes['hide-file-modal-button'] != undefined)
                         this.hideFileModalButton = this.isParameterTrue('hide-file-modal-button');
-                    if (this.$el.attributes['hide-text-modal-button'] != undefined)
+                    if (blockElement.attributes['hide-text-modal-button'] != undefined)
                         this.hideTextModalButton = this.isParameterTrue('hide-text-modal-button');
-                    if (this.$el.attributes['hide-link-modal-button'] != undefined)
+                    if (blockElement.attributes['hide-link-modal-button'] != undefined)
                         this.hideLinkModalButton = this.isParameterTrue('hide-link-modal-button');
-                    if (this.$el.attributes['hide-thumbnail-section'] != undefined)
+                    if (blockElement.attributes['hide-thumbnail-section'] != undefined)
                         this.hideThumbnailSection = this.isParameterTrue('hide-thumbnail-section');
-                    if (this.$el.attributes['hide-attachments-section'] != undefined)
+                    if (blockElement.attributes['hide-attachments-section'] != undefined)
                         this.hideAttachmentsSection = this.isParameterTrue('hide-attachments-section');
-                    if (this.$el.attributes['show-allow-comments-section'] != undefined)
+                    if (blockElement.attributes['show-allow-comments-section'] != undefined)
                         this.showAllowCommentsSection = this.isParameterTrue('show-allow-comments-section');
-                    if (this.$el.attributes['hide-collapses'] != undefined)
+                    if (blockElement.attributes['hide-collapses'] != undefined)
                         this.hideCollapses = this.isParameterTrue('hide-collapses');
-                    if (this.$el.attributes['hide-help-buttons'] != undefined)
+                    if (blockElement.attributes['hide-help-buttons'] != undefined)
                         this.hideHelpButtons = this.isParameterTrue('hide-help-buttons');
-                    if (this.$el.attributes['hide-metadata-types'] != undefined)
+                    if (blockElement.attributes['hide-metadata-types'] != undefined)
                         this.hideMetadataTypes = this.isParameterTrue('hide-metadata-types');
-                    if (this.$el.attributes['help-info-bellow-label'] != undefined)
+                    if (blockElement.attributes['help-info-bellow-label'] != undefined)
                         this.helpInfoBellowLabel = this.isParameterTrue('help-info-bellow-label');
-                    if (this.$el.attributes['is-layout-steps'] != undefined)
+                    if (blockElement.attributes['is-layout-steps'] != undefined)
                         this.isLayoutSteps = this.isParameterTrue('is-layout-steps');
 
                     // Form sections labels
-                    if (this.$el.attributes['document-section-label'] != undefined)
-                        this.documentSectionLabel = this.$el.attributes['document-section-label'].value;
-                    if (this.$el.attributes['thumbnail-section-label'] != undefined)
-                        this.thumbnailSectionLabel = this.$el.attributes['thumbnail-section-label'].value;
-                    if (this.$el.attributes['attachments-section-label'] != undefined)
-                        this.attachmentsSectionLabel = this.$el.attributes['attachments-section-label'].value;
-                    if (this.$el.attributes['metadata-section-label'] != undefined)
-                        this.metadataSectionLabel = this.$el.attributes['metadata-section-label'].value;
+                    if (blockElement.attributes['document-section-label'] != undefined)
+                        this.documentSectionLabel = blockElement.attributes['document-section-label'].value;
+                    if (blockElement.attributes['thumbnail-section-label'] != undefined)
+                        this.thumbnailSectionLabel = blockElement.attributes['thumbnail-section-label'].value;
+                    if (blockElement.attributes['attachments-section-label'] != undefined)
+                        this.attachmentsSectionLabel = blockElement.attributes['attachments-section-label'].value;
+                    if (blockElement.attributes['metadata-section-label'] != undefined)
+                        this.metadataSectionLabel = blockElement.attributes['metadata-section-label'].value;
 
                     // Form submission feedback messages
-                    if (this.$el.attributes['sent-form-heading'] != undefined)
-                        this.sentFormHeading = this.$el.attributes['sent-form-heading'].value;
-                    if (this.$el.attributes['sent-form-message'] != undefined)
-                        this.sentFormMessage = this.$el.attributes['sent-form-message'].value;
-                    if (this.$el.attributes['item-link-button-label'] != undefined)
-                        this.itemLinkButtonLabel = this.$el.attributes['item-link-button-label'].value;
-                    if (this.$el.attributes['show-item-link-button'] != undefined)
+                    if (blockElement.attributes['sent-form-heading'] != undefined)
+                        this.sentFormHeading = blockElement.attributes['sent-form-heading'].value;
+                    if (blockElement.attributes['sent-form-message'] != undefined)
+                        this.sentFormMessage = blockElement.attributes['sent-form-message'].value;
+                    if (blockElement.attributes['item-link-button-label'] != undefined)
+                        this.itemLinkButtonLabel = blockElement.attributes['item-link-button-label'].value;
+                    if (blockElement.attributes['show-item-link-button'] != undefined)
                         this.showItemLinkButton = this.isParameterTrue('show-item-link-button');
                     
                     /* Terms agreements confirmation checkbox */
-                    if (this.$el.attributes['show-terms-agreement-checkbox'] != undefined)
+                    if (blockElement.attributes['show-terms-agreement-checkbox'] != undefined)
                         this.showTermsAgreementCheckbox = this.isParameterTrue('show-terms-agreement-checkbox');
-                    if (this.$el.attributes['terms-agreement-message'] != undefined)
-                        this.termsAgreementMessage = this.$el.attributes['terms-agreement-message'].value;
+                    if (blockElement.attributes['terms-agreement-message'] != undefined)
+                        this.termsAgreementMessage = blockElement.attributes['terms-agreement-message'].value;
     
                     // List of metadata
-                    if (this.$el.attributes['enabled-metadata'] != undefined && this.$el.attributes['enabled-metadata'].value)
-                        this.enabledMetadata = this.$el.attributes['enabled-metadata'].value.split(',');
+                    if (blockElement.attributes['enabled-metadata'] != undefined && blockElement.attributes['enabled-metadata'].value)
+                        this.enabledMetadata = blockElement.attributes['enabled-metadata'].value.split(',');
 
                 },
                 methods: {
                     isParameterTrue(parameter) {
-                        const value = this.$el.attributes[parameter].value;
+                        const value = blockElement.attributes[parameter].value;
                         return (value == true || value == 'true' || value == '1' || value == 1) ? true : false;
                     }
                 },