From 018044024390f7578b91279975cdd3e00ecc3384 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Thu, 2 Jun 2022 11:14:44 -0300 Subject: [PATCH] Replaces cropImageToSquare by imageSize on collections carousel. #706. --- .../carousel-collections-list/block.json | 48 +++--- .../carousel-collections-list/deprecated.js | 151 ++++++++++++++++++ .../blocks/carousel-collections-list/edit.js | 71 ++++---- .../blocks/carousel-collections-list/save.js | 4 +- .../blocks/carousel-collections-list/theme.js | 6 +- .../carousel-collections-list/theme.vue | 44 ++--- .../blocks/carousel-items-list/edit.js | 4 + .../blocks/dynamic-items-list/edit.js | 4 + 8 files changed, 254 insertions(+), 78 deletions(-) diff --git a/src/views/gutenberg-blocks/blocks/carousel-collections-list/block.json b/src/views/gutenberg-blocks/blocks/carousel-collections-list/block.json index d815d050e..9de783abc 100644 --- a/src/views/gutenberg-blocks/blocks/carousel-collections-list/block.json +++ b/src/views/gutenberg-blocks/blocks/carousel-collections-list/block.json @@ -33,91 +33,91 @@ "selector": "div" }, "collections": { - "type": "Array", + "type": "array", "default": [] }, "isModalOpen": { - "type": "Boolean", + "type": "boolean", "default": false }, "selectedCollections": { - "type": "Array", + "type": "array", "default": [] }, "itemsRequestSource": { - "type": "String", + "type": "string", "default": false }, "maxCollectionsNumber": { - "type": "Number", + "type": "number", "value": false }, "maxCollectionsPerScreen": { - "type": "Number", + "type": "number", "value": 6 }, "spaceBetweenCollections": { - "type": "Number", + "type": "number", "value": 32 }, "spaceAroundCarousel": { - "type": "Number", + "type": "number", "value": 50 }, "isLoading": { - "type": "Boolean", + "type": "boolean", "value": false }, "isLoadingCollection": { - "type": "Boolean", + "type": "boolean", "value": false }, "arrowsPosition": { - "type": "String", + "type": "string", "value": "around" }, "largeArrows": { - "type": "Boolean", + "type": "boolean", "value": false }, "arrowsStyle": { - "type": "String", + "type": "string", "value": "type-1" }, "autoPlay": { - "type": "Boolean", + "type": "boolean", "value": false }, "autoPlaySpeed": { - "type": "Number", + "type": "number", "value": 3 }, "loopSlides": { - "type": "Boolean", + "type": "boolean", "value": false }, "hideName": { - "type": "Boolean", + "type": "boolean", "value": true }, "showCollectionThumbnail": { - "type": "Boolean", + "type": "boolean", "value": false }, - "cropImagesToSquare": { - "type": "Boolean", - "value": true + "imageSize": { + "type": "string", + "value": "tainacan-medium" }, "blockId": { - "type": "String", + "type": "string", "default": "" }, "collectionBackgroundColor": { - "type": "String", + "type": "string", "default": "#454647" }, "collectionTextColor": { - "type": "String", + "type": "string", "default": "#ffffff" } }, diff --git a/src/views/gutenberg-blocks/blocks/carousel-collections-list/deprecated.js b/src/views/gutenberg-blocks/blocks/carousel-collections-list/deprecated.js index 4e73272eb..e711953ef 100644 --- a/src/views/gutenberg-blocks/blocks/carousel-collections-list/deprecated.js +++ b/src/views/gutenberg-blocks/blocks/carousel-collections-list/deprecated.js @@ -1,6 +1,157 @@ const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); export default [ + /* Deprecated on 0.19 to replace cropImagesToSquare by imageSize feature */ + { + migrate( attributes ) { + if (attributes.cropImagesToSquare == true) + attributes.imageSize = 'tainacan-medium'; + else + attributes.imageSize = 'tainacan-medium-full'; + + return attributes; + }, + attributes: { + "content": { + "type": "array", + "source": "children", + "selector": "div" + }, + "collections": { + "type": "Array", + "default": [] + }, + "isModalOpen": { + "type": "Boolean", + "default": false + }, + "selectedCollections": { + "type": "Array", + "default": [] + }, + "itemsRequestSource": { + "type": "String", + "default": false + }, + "maxCollectionsNumber": { + "type": "Number", + "value": false + }, + "maxCollectionsPerScreen": { + "type": "Number", + "value": 6 + }, + "spaceBetweenCollections": { + "type": "Number", + "value": 32 + }, + "spaceAroundCarousel": { + "type": "Number", + "value": 50 + }, + "isLoading": { + "type": "Boolean", + "value": false + }, + "isLoadingCollection": { + "type": "Boolean", + "value": false + }, + "arrowsPosition": { + "type": "String", + "value": "around" + }, + "largeArrows": { + "type": "Boolean", + "value": false + }, + "arrowsStyle": { + "type": "String", + "value": "type-1" + }, + "autoPlay": { + "type": "Boolean", + "value": false + }, + "autoPlaySpeed": { + "type": "Number", + "value": 3 + }, + "loopSlides": { + "type": "Boolean", + "value": false + }, + "hideName": { + "type": "Boolean", + "value": true + }, + "showCollectionThumbnail": { + "type": "Boolean", + "value": false + }, + "cropImagesToSquare": { + "type": "Boolean", + "value": true + }, + "blockId": { + "type": "String", + "default": "" + }, + "collectionBackgroundColor": { + "type": "String", + "default": "#454647" + }, + "collectionTextColor": { + "type": "String", + "default": "#ffffff" + } + }, + save: function ({ attributes, className }) { + const { + content, + blockId, + selectedCollections, + arrowsPosition, + largeArrows, + arrowsStyle, + cropImagesToSquare, + maxCollectionsPerScreen, + maxCollectionsNumber, + spaceBetweenCollections, + spaceAroundCarousel, + autoPlay, + autoPlaySpeed, + loopSlides, + hideName, + showCollectionThumbnail + } = attributes; + + // Gets attributes such as style, that are automatically added by the editor hook + const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save(); + return
{ return collection.id })) } + arrows-position={ arrowsPosition } + auto-play={ '' + autoPlay } + auto-play-speed={ autoPlaySpeed } + loop-slides={ '' + loopSlides } + hide-name={ '' + hideName } + large-arrows={ '' + largeArrows } + arrows-style={ arrowsStyle } + crop-images-to-square={ '' + cropImagesToSquare } + max-collections-number={ maxCollectionsNumber } + max-collections-per-screen={ maxCollectionsPerScreen } + space-between-collections={ spaceBetweenCollections } + space-around-carousel={ spaceAroundCarousel } + tainacan-api-root={ tainacan_blocks.root } + tainacan-base-url={ tainacan_blocks.base_url } + show-collection-thumbnail={ '' + showCollectionThumbnail } + id={ 'wp-block-tainacan-carousel-collections-list_' + blockId }> + { content } +
+ } + }, /* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */ { "attributes": { diff --git a/src/views/gutenberg-blocks/blocks/carousel-collections-list/edit.js b/src/views/gutenberg-blocks/blocks/carousel-collections-list/edit.js index 194b15af3..cb15c8a50 100644 --- a/src/views/gutenberg-blocks/blocks/carousel-collections-list/edit.js +++ b/src/views/gutenberg-blocks/blocks/carousel-collections-list/edit.js @@ -1,9 +1,12 @@ const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components; -const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); +const { InspectorControls, BlockControls, useBlockProps, store } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); const { __ } = wp.i18n; +const { useSelect } = wp.data; + +import { map, pick } from 'lodash'; import CarouselCollectionsModal from './carousel-collections-modal.js'; import tainacan from '../../js/axios.js'; import axios from 'axios'; @@ -24,7 +27,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli selectedCollections, largeArrows, arrowsStyle, - cropImagesToSquare, + imageSize, maxCollectionsPerScreen, spaceBetweenCollections, spaceAroundCarousel, @@ -48,13 +51,30 @@ export default function ({ attributes, setAttributes, className, isSelected, cli maxCollectionsPerScreen = 6; setAttributes({ maxCollectionsPerScreen: maxCollectionsPerScreen }); } - if (cropImagesToSquare === undefined) { - cropImagesToSquare = true; - setAttributes({ cropImagesToSquare: cropImagesToSquare }); + if (imageSize === undefined) { + imageSize = 'tainacan-medium'; + setAttributes({ imageSize: imageSize }); } const thumbHelper = ThumbnailHelperFunctions(); + // Get available image sizes + const { imageSizes } = useSelect( + ( select ) => { + const { getSettings } = select( store ); + + const settings = pick( getSettings(), [ + 'imageSizes' + ] ); + return settings + }, + [ clientId ] + ); + const imageSizeOptions = map( + imageSizes, + ( { name, slug } ) => ( { value: slug, label: name } ) + ); + function prepareItem(collection, collectionItems) { return (
  • { { { : 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] + collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0] ? - collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] + collection.thumbnail[imageSize][0] : (collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0] ? @@ -237,7 +257,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli { maxCollectionsPerScreen = aMaxCollectionsPerScreen; @@ -247,19 +267,16 @@ export default function ({ attributes, setAttributes, className, isSelected, cli min={ 1 } max={ 9 } /> - { showCollectionThumbnail ? - 4 ? __('Do not use square cropeed version of the collection thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the collection thumbnail.', 'tainacan') } - checked={ cropImagesToSquare && maxCollectionsPerScreen > 4 } - onChange={ ( isChecked ) => { - cropImagesToSquare = isChecked; - setAttributes({ cropImagesToSquare: cropImagesToSquare }); - setContent(); - } - } - /> - : null } + { + imageSize = anImageSize; + setAttributes({ imageSize: imageSize }); + setContent(); + }} + /> { maxCollectionsPerScreen: 6, spaceBetweenCollections: 32, spaceAroundCarousel: 50, - cropImagesToSquare: true, + imageSize: 'tainacan-medium', loopSlides: false, hideName: true, showCollectionThumbnail: false, @@ -57,7 +57,7 @@ export default (element) => { loopSlides: this.loopSlides, largeArrows: this.largeArrows, arrowsStyle: this.arrowsStyle, - cropImagesToSquare: this.cropImagesToSquare, + imageSize: this.imageSize, maxCollectionsPerScreen: this.maxCollectionsPerScreen, spaceBetweenCollections: this.spaceBetweenCollections, spaceAroundCarousel: this.spaceAroundCarousel, @@ -83,7 +83,7 @@ export default (element) => { 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.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].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; 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 517b9f14e..e349c7154 100644 --- a/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue +++ b/src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue @@ -39,22 +39,22 @@ :href="collection.url">
    @@ -172,7 +172,7 @@ export default { hideName: Boolean, largeArrows: Boolean, arrowsStyle: String, - cropImagesToSquare: Boolean, + imageSize: String, showCollectionThumbnail: Boolean, tainacanApiRoot: String, tainacanBaseUrl: String, diff --git a/src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js b/src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js index f4ec49dfb..5177ef0df 100644 --- a/src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js +++ b/src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js @@ -66,6 +66,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie maxItemsNumber = 12; setAttributes({ maxItemsNumber: maxItemsNumber }); } + if (imageSize === undefined) { + imageSize = 'tainacan-medium'; + setAttributes({ imageSize: imageSize }); + } // Get available image sizes const { imageSizes } = useSelect( diff --git a/src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js b/src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js index e1068d0f3..4d9d0750f 100644 --- a/src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js +++ b/src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js @@ -70,6 +70,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie loadStrategy = 'search'; setAttributes({ loadStrategy: loadStrategy }); } + if (imageSize === undefined) { + imageSize = 'tainacan-medium'; + setAttributes({ imageSize: imageSize }); + } const layoutControls = [ {