Improve collections carousel and items grid styles (#136)

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

@@ -134,6 +134,7 @@ registerBlockType('tainacan/collections-carousel', {
                 content: contentTemp.length ?
                     (<div>
                         <Carousel
+                            offset={20}
                             arrowLeft={arrowLeft}
                             arrowRight={arrowRight}
                             addArrowClickHandler
@@ -179,11 +180,12 @@ registerBlockType('tainacan/collections-carousel', {
                 <div key={collection.id}>
                     <div style={{
                         display: 'flex',
-                        flexDirection: 'column',
-                        marginLeft: '20px'}}>
+                        flexDirection: 'column'}}>
 
                         { isInEdit ? (
                             <IconButton
+                                isSmall
+                                isPrimary
                                 style={{position: 'absolute'}}
                                 label={ __('Remove', 'tainacan') }
                                 onClick={() => {
@@ -194,9 +196,8 @@ registerBlockType('tainacan/collections-carousel', {
                         ) : null }
 
                         <div className={`${className}__carousel-item`}>
-
-                            <div style={{width: '99px', marginRight: '3px'}} className={`${className}__carousel-item-first`}>
-                                {items[0] ? prepareItem(items[0], null, collection.name) : null}
+                            <div style={{width: '87px', marginRight: '3px'}} className={`${className}__carousel-item-first`}>
+                                {items[0] ? prepareItem(items[0], {display: 'flex', height: '87px'}, collection.name) : null}
                             </div>
 
                             <div className={`${className}__carousel-item-others`}>
@@ -204,6 +205,7 @@ registerBlockType('tainacan/collections-carousel', {
                                 {items[2] ? prepareItem(items[2], {width: '42px', height: '42px'}, collection.name) : null}
                             </div>
                         </div>
+
                         <small style={{
                             maxWidth: '130px',
                             marginLeft: '10px'}}>
@@ -357,6 +359,7 @@ registerBlockType('tainacan/collections-carousel', {
                 <div>
                     { contentTemp.length ?
                         <Carousel
+                            offset={20}
                             arrowLeft={arrowLeft}
                             arrowRight={arrowRight}
                             addArrowClickHandler

src/gutenberg-blocks/tainacan-items/items-grid/index.js

@@ -15,10 +15,6 @@ registerBlockType('tainacan/items-grid', {
     attributes: {
         items: {
             type: 'array',
-            source: 'query',
-            selector: 'picture',
-            query: {
-                img: {
             source: 'query',
             selector: 'img',
             query: {
@@ -30,8 +26,6 @@ registerBlockType('tainacan/items-grid', {
                     source: 'attribute',
                     attribute: 'alt'
                 },
-                    }
-                }
             },
             default: []
         },
@@ -45,6 +39,10 @@ registerBlockType('tainacan/items-grid', {
             selector: 'div'
         },
     },
+    supports: {
+        align: ['full', 'left', 'right', 'wide'],
+        html: false
+    },
     edit({ attributes, setAttributes, className }){
         console.log('edit', attributes);
 
@@ -55,16 +53,21 @@ registerBlockType('tainacan/items-grid', {
 
         function prepareItem(item) {
             return (
-                <picture>
                 <img
+                    style={{
+                        width: '150px',
+                        height: '150px',
+                        padding: 0
+                    }}
+
                     src={
                         (item.thumbnail && item.thumbnail.thumb) ?
                             item.thumbnail.thumb :
-                                ( (item.img && item.img[0].src) ?
-                                    item.img[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
+                            ((item && item.src) ?
+                                item.src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
                     }
-                        alt={ item.title ? item.title : item.alt } />
-                </picture>
+
+                    alt={item.title ? item.title : item.alt}/>
             );
         }
 
@@ -128,9 +131,10 @@ registerBlockType('tainacan/items-grid', {
             setAttributes({
                 content: (
                     <div style={{
-                        columnCount: 4,
-                        columnGap: 0,
-                        rowGap: 0,
+                        display: 'flex',
+                        flexDirection: 'row',
+                        flexWrap: 'wrap',
+                        alignContent: 'flex-start',
                     }}>
                         { items }
                     </div>
@@ -189,9 +193,10 @@ registerBlockType('tainacan/items-grid', {
                     </Modal> : null }
 
                 <div style={{
-                    columnCount: 4,
-                    columnGap: 0,
-                    rowGap: 0,
+                    display: 'flex',
+                    flexDirection: 'row',
+                    flexWrap: 'wrap',
+                    alignContent: 'flex-start',
                 }}>
                     { items }
                 </div>