+ { content }
+
+ }
+ },
/* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
{
"attributes": {
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 61619ef48..5177ef0df 100644
--- a/src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
+++ b/src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
@@ -2,8 +2,11 @@ const { __ } = wp.i18n;
const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPalette, BaseControl, 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 { useSelect } = wp.data;
+
+import { map, pick } from 'lodash';
import CarouselItemsModal from './dynamic-and-carousel-items-modal.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
@@ -38,7 +41,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
autoPlaySpeed,
loopSlides,
hideTitle,
- cropImagesToSquare,
+ imageSize,
showCollectionHeader,
showCollectionLabel,
isLoadingCollection,
@@ -59,16 +62,37 @@ export default function({ attributes, setAttributes, className, isSelected, clie
maxItemsPerScreen = 7;
setAttributes({ maxItemsPerScreen: maxItemsPerScreen });
}
- if (cropImagesToSquare === undefined) {
- cropImagesToSquare = true;
- setAttributes({ cropImagesToSquare: cropImagesToSquare });
+ if (maxItemsNumber === undefined) {
+ maxItemsNumber = 12;
+ setAttributes({ maxItemsNumber: maxItemsNumber });
}
+ if (imageSize === undefined) {
+ imageSize = 'tainacan-medium';
+ setAttributes({ imageSize: imageSize });
+ }
+
+ // 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(item) {
return (
+ { content }
+
+ }
+ },
/* Deprecated to fix the selection strategy on 0.18.7 */
{
"attributes": {
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 01175c28c..57b9b5440 100644
--- a/src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
+++ b/src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
@@ -2,8 +2,11 @@ const { __ } = wp.i18n;
const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Placeholder, ColorPalette, BaseControl, 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 { useSelect } = wp.data;
+
+import { map, pick } from 'lodash';
import DynamicItemsModal from '../carousel-items-list/dynamic-and-carousel-items-modal.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
@@ -44,7 +47,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
sampleBackgroundImage,
mosaicDensity,
maxColumnsCount,
- cropImagesToSquare
+ imageSize
} = attributes;
// Gets blocks props from hook
@@ -59,9 +62,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
maxColumnsCount = 5;
setAttributes({ maxColumnsCount: maxColumnsCount });
}
- if (cropImagesToSquare === undefined) {
- cropImagesToSquare = true;
- setAttributes({ cropImagesToSquare: cropImagesToSquare });
+ if (maxItemsNumber === undefined) {
+ maxItemsNumber = 12;
+ setAttributes({ maxItemsNumber: maxItemsNumber });
}
if (loadStrategy === undefined) {
loadStrategy = 'search';
@@ -71,7 +74,48 @@ export default function({ attributes, setAttributes, className, isSelected, clie
mosaicGridRows = 3;
setAttributes({ mosaicGridRows: mosaicGridRows });
}
-
+ if (imageSize === undefined) {
+ imageSize = 'tainacan-medium';
+ setAttributes({ imageSize: imageSize });
+ }
+
+ const layoutControls = [
+ {
+ icon: 'grid-view',
+ title: __( 'Grid View', 'tainacan' ),
+ onClick: () => updateLayout('grid'),
+ isActive: layout === 'grid',
+ },
+ {
+ icon: 'list-view',
+ title: __( 'List View', 'tainacan' ),
+ onClick: () => updateLayout('list'),
+ isActive: layout === 'list',
+ },
+ {
+ icon: 'layout',
+ title: __( 'Mosaic View', 'tainacan' ),
+ onClick: () => updateLayout('mosaic'),
+ isActive: layout === 'mosaic',
+ }
+ ];
+
+ // 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(item) {
return (
@@ -705,19 +728,18 @@ export default function({ attributes, setAttributes, className, isSelected, clie
min={ 1 }
max={ 7 }
/>
- {
- cropImagesToSquare = isChecked;
- setAttributes({ cropImagesToSquare: cropImagesToSquare });
- setContent();
- }
- }
- />
: null }
+