Create Tainacan Blocks category, add a carousel, adjusts carousel styles (#136)

package-lock.json

@@ -885,6 +885,11 @@
         }
       }
     },
+    "@brainhubeu/react-carousel": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@brainhubeu/react-carousel/-/react-carousel-1.10.1.tgz",
+      "integrity": "sha512-W8BdG9mWsU9c9F4GKBcQH1R7QiLmn9KELJdCIXop6Fkc6GT9gk7o8SPVfvdBLTQF3h/DpOtJTIUSjtTucIKDMg=="
+    },
     "@vue/component-compiler-utils": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.2.0.tgz",
@@ -2787,6 +2792,14 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom7": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.2.tgz",
+      "integrity": "sha512-cGwWtpu7KY3JnbREGqG4EGC/u+1hyLfWVMqrqRjmwiO8d5i4B+0imLZAQ/cJbiXnjbs0pdIUzcUyeI9BbnyKNg==",
+      "requires": {
+        "ssr-window": "^1.0.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5253,8 +5266,7 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
-      "dev": true
     },
     "js-yaml": {
       "version": "3.12.0",
@@ -5490,7 +5502,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -6769,6 +6780,15 @@
       "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
       "dev": true
     },
+    "prop-types": {
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "requires": {
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
@@ -6933,6 +6953,28 @@
         }
       }
     },
+    "react": {
+      "version": "16.5.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.5.2.tgz",
+      "integrity": "sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "schedule": "^0.5.0"
+      }
+    },
+    "react-dom": {
+      "version": "16.5.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.5.2.tgz",
+      "integrity": "sha512-RC8LDw8feuZOHVgzEf7f+cxBr/DnKdqp56VU0lAs1f4UfKc4cU8wU4fTq/mgnvynLQo8OtlPC19NUFh/zjZPuA==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "schedule": "^0.5.0"
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -7382,6 +7424,14 @@
         }
       }
     },
+    "schedule": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/schedule/-/schedule-0.5.0.tgz",
+      "integrity": "sha512-HUcJicG5Ou8xfR//c2rPT0lPIRR09vVvN81T9fqfVgBmhERUbDEQoYKjpBxbueJnCPpSu2ujXzOnRQt6x9o/jw==",
+      "requires": {
+        "object-assign": "^4.1.1"
+      }
+    },
     "schema-utils": {
       "version": "0.4.5",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
@@ -7929,6 +7979,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+    },
     "ssri": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
@@ -8113,6 +8168,15 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
       "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
     },
+    "swiper": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.4.1.tgz",
+      "integrity": "sha512-SONgpB1mFh++eFiUDOCggwW2ZzsWMEf3+SEROcQ+qXPYUnyD423l3uDsk+0jdo/a4pXeOJmH0oN3XK5maMqQyQ==",
+      "requires": {
+        "dom7": "^2.1.2",
+        "ssr-window": "^1.0.1"
+      }
+    },
     "t": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/t/-/t-0.5.1.tgz",
@@ -8905,6 +8969,15 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
       "integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
     },
+    "vue-awesome-swiper": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      }
+    },
     "vue-custom-element": {
       "version": "3.2.5",
       "resolved": "https://registry.npmjs.org/vue-custom-element/-/vue-custom-element-3.2.5.tgz",

package.json

@@ -7,6 +7,7 @@
     "build": "cross-env NODE_ENV=development webpack --display-error-details --mode development --progress --hide-modules"
   },
   "dependencies": {
+    "@brainhubeu/react-carousel": "^1.10.1",
     "axios": "^0.18.0",
     "buefy": "^0.6.7",
     "bulma": "^0.7.1",
@@ -14,6 +15,8 @@
     "moment": "^2.22.2",
     "node-sass": "^4.9.3",
     "qs": "^6.5.2",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
     "t": "^0.5.1",
     "v-tooltip": "^2.0.0-rc.33",
     "vue": "^2.5.17",

src/assets/css/tainacan-gutenberg-blocks-style.css

@@ -15,4 +15,159 @@
 .components-modal__frame {
   width: 100%; }
 
+.BrainhubCarousel {
+  overflow: hidden;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center; }
+
+.BrainhubCarousel .BrainhubCarousel__trackContainer {
+  overflow: hidden; }
+
+.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+
+.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track.BrainhubCarousel__track--transition {
+  -webkit-transition: -webkit-transform;
+  transition: -webkit-transform;
+  transition: transform;
+  transition: transform, -webkit-transform; }
+
+/* arrows */
+.BrainhubCarousel__arrows {
+  cursor: pointer; }
+
+/* variables */
+.BrainhubCarousel__dots {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: 0;
+  line-height: 0; }
+
+.BrainhubCarousel__dots .BrainhubCarousel__dot {
+  outline: 0;
+  padding: 10px;
+  border: none;
+  opacity: 0.5;
+  cursor: pointer;
+  -webkit-appearance: none; }
+
+.BrainhubCarousel__dots .BrainhubCarousel__dot.BrainhubCarousel__dot--selected {
+  opacity: 1 !important; }
+
+.BrainhubCarousel__dots .BrainhubCarousel__dot:hover {
+  opacity: 1; }
+
+.BrainhubCarousel__dots .BrainhubCarousel__dot:before {
+  content: '';
+  display: block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  padding: 0;
+  border: none;
+  background: black; }
+
+.BrainhubCarousel__dots .BrainhubCarousel__thumbnail {
+  outline: 0;
+  padding: 10px;
+  border: none;
+  opacity: 0.5;
+  cursor: pointer; }
+
+.BrainhubCarousel__dots .BrainhubCarousel__thumbnail.BrainhubCarousel__thumbnail--selected {
+  opacity: 1 !important; }
+
+.BrainhubCarousel__dots .BrainhubCarousel__thumbnail:hover {
+  opacity: 1; }
+
+.BrainhubCarousel__thumbnail[type=button] {
+  -webkit-appearance: none; }
+
+.BrainhubCarousel__arrows {
+  position: relative;
+  padding: 21px;
+  border: none;
+  overflow: hidden;
+  outline: 0;
+  font-size: 0;
+  line-height: 0;
+  background-color: white; }
+
+.BrainhubCarousel__arrows span {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-style: solid;
+  border-color: #298596;
+  border-width: 3px 3px 0 0;
+  padding: 5px;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  font-size: 0; }
+
+.BrainhubCarousel__arrows:hover {
+  background-color: #298596; }
+
+.BrainhubCarousel__arrows:hover span {
+  border-color: #fff;
+  margin: 0; }
+
+.BrainhubCarousel__arrowLeft span {
+  -webkit-transform: translate(-50%, -50%) rotate(-135deg);
+  transform: translate(-50%, -50%) rotate(-135deg);
+  margin-left: 2.45px; }
+
+.BrainhubCarousel__arrowRight span {
+  -webkit-transform: translate(-50%, -50%) rotate(45deg);
+  transform: translate(-50%, -50%) rotate(45deg);
+  margin-left: -2.45px; }
+
+.BrainhubCarouselItem {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative; }
+
+.BrainhubCarouselItem.BrainhubCarouselItem--clickable {
+  cursor: pointer; }
+
+.BrainhubCarouselItem .debug-number {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 2em;
+  text-shadow: 0px 0px 9px white; }
+
 /*# sourceMappingURL=tainacan-gutenberg-blocks-style.css.map */

src/assets/css/tainacan-gutenberg-blocks-style.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAAA,uCAAwC;EACtC,UAAU,EAAE,KAAK;EAEjB,8FAAuD;IACrD,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,IAAI;IAEhB,2JAA6D;MAC3D,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,UAAU;MACvB,aAAa,EAAE,KAAK;IAGtB,4JAA8D;MAC5D,OAAO,EAAE,IAAI;MACb,cAAc,EAAE,MAAM;MACtB,WAAW,EAAE,QAAQ;;AAK3B,wBAAyB;EACvB,KAAK,EAAE,IAAI",
+"mappings": "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",
 "sources": ["../../gutenberg-blocks/tainacan-collections/collections-carousel/collections-carousel.scss"],
 "names": [],
 "file": "tainacan-gutenberg-blocks-style.css"

src/gutenberg-blocks/class-tainacan-gutenberg-block.php

@@ -24,6 +24,23 @@ class GutenbergBlock {
 	private function add_gutenberg_blocks_actions() {
 		add_action('init', array($this, 'register_tainacan_collections_carousel'));
 		add_action('init', array($this, 'add_plugin_settings'));
+		add_filter( 'block_categories', array($this, 'register_tainacan_block_categories'), 10, 2 );
+	}
+
+	public function register_tainacan_block_categories($categories, $post){
+		if ( $post->post_type !== 'post' ) {
+			return $categories;
+		}
+
+		return array_merge(
+			$categories,
+			array(
+				array(
+					'slug' => 'tainacan-blocks',
+					'title' => __( 'Tainacan', 'tainacan' ),
+				),
+			)
+		);
 	}
 
 	public function register_tainacan_collections_carousel(){

src/gutenberg-blocks/tainacan-collections/collections-carousel/collections-carousel.scss

@@ -22,3 +22,181 @@
 .components-modal__frame {
   width: 100%;
 }
+
+.BrainhubCarousel {
+  overflow: hidden;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.BrainhubCarousel .BrainhubCarousel__trackContainer {
+  overflow: hidden;
+}
+
+.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  overflow: hidden;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track.BrainhubCarousel__track--transition {
+  -webkit-transition: -webkit-transform;
+  transition: -webkit-transform;
+  transition: transform;
+  transition: transform, -webkit-transform;
+}
+
+/* arrows */
+.BrainhubCarousel__arrows {
+  cursor: pointer;
+}
+
+/* variables */
+.BrainhubCarousel__dots {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: 0;
+  line-height: 0;
+}
+
+.BrainhubCarousel__dots .BrainhubCarousel__dot {
+  outline: 0;
+  padding: 10px;
+  border: none;
+  opacity: 0.5;
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+
+.BrainhubCarousel__dots .BrainhubCarousel__dot.BrainhubCarousel__dot--selected {
+  opacity: 1 !important;
+}
+
+.BrainhubCarousel__dots .BrainhubCarousel__dot:hover {
+  opacity: 1;
+}
+
+.BrainhubCarousel__dots .BrainhubCarousel__dot:before {
+  content: '';
+  display: block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  padding: 0;
+  border: none;
+  background: black;
+}
+
+.BrainhubCarousel__dots .BrainhubCarousel__thumbnail {
+  outline: 0;
+  padding: 10px;
+  border: none;
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+.BrainhubCarousel__dots .BrainhubCarousel__thumbnail.BrainhubCarousel__thumbnail--selected {
+  opacity: 1 !important;
+}
+
+.BrainhubCarousel__dots .BrainhubCarousel__thumbnail:hover {
+  opacity: 1;
+}
+
+.BrainhubCarousel__thumbnail[type=button] {
+  -webkit-appearance: none;
+}
+
+.BrainhubCarousel__arrows {
+  position: relative;
+  padding: 21px;
+  border: none;
+  overflow: hidden;
+  outline: 0;
+  font-size: 0;
+  line-height: 0;
+  background-color: white;
+}
+
+.BrainhubCarousel__arrows span {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-style: solid;
+  border-color: #298596;
+  border-width: 3px 3px 0 0;
+  padding: 5px;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+  font-size: 0;
+}
+
+.BrainhubCarousel__arrows:hover {
+  background-color: #298596;
+}
+
+.BrainhubCarousel__arrows:hover span {
+  border-color: #fff;
+  margin: 0;
+}
+
+.BrainhubCarousel__arrowLeft span {
+  -webkit-transform: translate(-50%, -50%) rotate(-135deg);
+  transform: translate(-50%, -50%) rotate(-135deg);
+  margin-left: 2.45px;
+}
+
+.BrainhubCarousel__arrowRight span {
+  -webkit-transform: translate(-50%, -50%) rotate(45deg);
+  transform: translate(-50%, -50%) rotate(45deg);
+  margin-left: -2.45px;
+}
+
+.BrainhubCarouselItem {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+}
+
+.BrainhubCarouselItem.BrainhubCarouselItem--clickable {
+  cursor: pointer;
+}
+
+.BrainhubCarouselItem .debug-number {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  font-size: 2em;
+  text-shadow: 0px 0px 9px white;
+}

src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js

@@ -1,15 +1,19 @@
+import Carousel, { Dots } from '@brainhubeu/react-carousel';
+
 const { registerBlockType } = wp.blocks;
 
 const { Modal, Button, Autocomplete } = wp.components;
 
 const { __ } = wp.i18n;
+const createHTML = wp.element.createElement;
 
 import tainacan from '../../api-client/axios.js';
 
 registerBlockType('tainacan/collections-carousel', {
     title: 'Tainacan Collections Carousel',
     icon: 'images-alt',
-    category: 'widgets',
+    category: 'tainacan-blocks',
+    supportHTML: false,
     attributes: {
         isOpen: {
             type: Boolean,
@@ -31,20 +35,23 @@ registerBlockType('tainacan/collections-carousel', {
             selector: 'div',
             default: [],
         },
-        content: {
+        content1: {
             type: 'array',
             source: 'html',
             selector: 'div',
             default: [],
+        },
+        content: {
+            type: 'array',
+            source: 'html',
+            selector: 'div',
+            default: []
         }
     },
     supports: {
-      align: ['left', 'full', 'right']
+      align: ['full']
     },
     edit({ attributes, setAttributes, className }) {
-        console.log('Edit');
-        console.log(attributes);
-
         function prepareCollection(collection) {
             return (<div key={ collection.id } data-value={collection}>{ collection.name }</div>);
         }
@@ -65,12 +72,12 @@ registerBlockType('tainacan/collections-carousel', {
 
         function prepareContent(content, featuredItems, setAttributes, collection){
             content.push(
-                <div style={ {display: 'flex', flexDirection: 'column', marginRight: '20px' } }>
+                <div style={{display: 'flex', flexDirection: 'column', marginRight: '20px'}}>
                     <div
                         className={`${className}__carousel-item`}
                         key={collection.id}>
 
-                        <div style={{marginRight: '20px'}} className={`${className}__carousel-item-first`}>
+                        <div style={{width: '99px', marginRight: '3px'}} className={`${className}__carousel-item-first`}>
                             {featuredItems[0] ?
                                 <picture>
                                     <img src={featuredItems[0].thumbnail.thumb} alt={featuredItems[0].title}/>
@@ -80,23 +87,22 @@ registerBlockType('tainacan/collections-carousel', {
 
                         <div className={`${className}__carousel-item-others`}>
                             {featuredItems[1] ?
-                                <picture style={{maxWidth: '64px', maxHeight: '64px', marginBottom: '3px'}}>
+                                <picture style={{width: '42px', height: '42px', marginBottom: '3px'}}>
                                     <img src={featuredItems[1].thumbnail.thumb} alt={featuredItems[1].title}/>
                                 </picture> : null
                             }
                             {featuredItems[2] ?
-                                <picture style={{maxWidth: '64px', maxHeight: '64px'}}>
+                                <picture style={{width: '42px', height: '42px'}}>
                                     <img src={featuredItems[2].thumbnail.thumb} alt={featuredItems[2].title}/>
                                 </picture> : null
                             }
                         </div>
-
                     </div>
-                    <small>{ collection.name }</small>
+                    <small><b>{collection.name}</b></small>
                 </div>
             );
 
-            setAttributes({ content: content });
+            setAttributes({ content1: content });
         }
 
         const autoCompleters = [
@@ -110,6 +116,7 @@ registerBlockType('tainacan/collections-carousel', {
 
                     return tainacan.get(`/collections?search=${keyword}`)
                         .then(response => {
+                            console.log(response);
                             return response.data;
                         })
                         .catch(error => {
@@ -125,12 +132,14 @@ registerBlockType('tainacan/collections-carousel', {
                     return attributes.collectionsMatched;
                 },
                 getOptionCompletion(option) {
+                    console.log('foi');
+
                     attributes.selectedCollections.push(prepareCollection(option));
 
                     getTop3ItemsOf(option).then((res) => {
                         attributes.featuredItems.push(res);
 
-                        prepareContent(attributes.content, res, setAttributes, option);
+                        prepareContent(attributes.content1, res, setAttributes, option);
 
                         setAttributes({ featuredItems: attributes.featuredItems });
                     });
@@ -163,7 +172,6 @@ registerBlockType('tainacan/collections-carousel', {
                                         aria-expanded={ isExpanded }
                                         aria-owns={ listBoxId }
                                         aria-activedescendant={ activeId }
-                                        onautocomplete={ () => { console.log('completed') } }
                                     >
                                     </div>
                                 ) }
@@ -178,14 +186,25 @@ registerBlockType('tainacan/collections-carousel', {
                     : null
                 }
 
-                <div style={ {display: 'flex'} }>{ attributes.content }</div>
+                <div>
+                    <Carousel
+                        slidesPerScroll={1}
+                        slidesPerPage={attributes.content1.length >= 3 ? 3 : attributes.content1.length}
+                        arrows
+                        slides={attributes.content1}/>
+                </div>
             </div>
         );
     },
     save({ attributes }) {
-        console.log('Save');
+        return (
-        console.log(attributes);
+            <div>
-
+                <Carousel
-        return <div style={ {display: 'flex'} }>{ attributes.content }</div>;
+                    slidesPerScroll={1}
+                    slidesPerPage={attributes.content1.length >= 3 ? 3 : attributes.content1.length}
+                    arrows
+                    slides={attributes.content1}/>
+            </div>
+        );
     },
 });