From cd004af74fc0a563dbe4c805344fecb14d62b0a7 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 7 Mar 2022 17:53:33 -0300
Subject: [PATCH] Uses wp default presets css varables to set colors. #674.

---
 .../blocks/item-gallery/block.json            |  3 ++
 .../blocks/item-gallery/edit.js               |  2 +-
 .../blocks/item-gallery/save.php              | 30 +++++++++++++++++--
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/views/gutenberg-blocks/blocks/item-gallery/block.json b/src/views/gutenberg-blocks/blocks/item-gallery/block.json
index 566f9604b..82a3341e3 100644
--- a/src/views/gutenberg-blocks/blocks/item-gallery/block.json
+++ b/src/views/gutenberg-blocks/blocks/item-gallery/block.json
@@ -118,6 +118,9 @@
             "background": true,
             "gradients": true,
             "link": true
+        },
+        "spacing": {
+            "padding": true
         }
     },
     "editorScript": "item-gallery",
diff --git a/src/views/gutenberg-blocks/blocks/item-gallery/edit.js b/src/views/gutenberg-blocks/blocks/item-gallery/edit.js
index 49d1d97f0..7ab1d10a3 100644
--- a/src/views/gutenberg-blocks/blocks/item-gallery/edit.js
+++ b/src/views/gutenberg-blocks/blocks/item-gallery/edit.js
@@ -240,7 +240,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
                 { openLightboxOnClick ?
                     <PanelBody
                             title={__('Lightbox settings', 'tainacan')}
-                            initialOpen={ true }
+                            initialOpen={ false }
                         >
                         <ToggleControl
                             label={__('Hide file name', 'tainacan')}
diff --git a/src/views/gutenberg-blocks/blocks/item-gallery/save.php b/src/views/gutenberg-blocks/blocks/item-gallery/save.php
index 7003b8597..82a70262e 100644
--- a/src/views/gutenberg-blocks/blocks/item-gallery/save.php
+++ b/src/views/gutenberg-blocks/blocks/item-gallery/save.php
@@ -120,15 +120,39 @@ function tainacan_blocks_render_items_gallery( $block_attributes, $content ) {
 	}
 	
 	$block_custom_css = '';
-	$block_custom_css .= (isset($block_attributes['style']) && isset($block_attributes['style']['color']) && isset($block_attributes['style']['color']['link'])) ? ('--swiper-theme-color: ' . $block_attributes['style']['color']['link'] . ';') : '';
-	$block_custom_css .= isset($block_attributes['textColor']) ? ('--tainacan-media-metadata-color: ' . $block_attributes['textColor'] . ';') : '';
+	
+	// Text color. First we check for custom preset colors, then actual values
+	$block_custom_css .= isset($block_attributes['textColor']) ? ('--tainacan-media-metadata-color:  var(--wp--preset--color--' . $block_attributes['textColor'] . ');') : '';
+	$block_custom_css .= (isset($block_attributes['style']) && isset($block_attributes['style']['color']) && isset($block_attributes['style']['color']['text'])) ? ('--tainacan-media-metadata-color: ' . $block_attributes['style']['color']['text'] . ';') : '';
+	
+	// Background color. First we check for custom preset colors, then actual values
+	$block_custom_css .= isset($block_attributes['backgroundColor']) ? ('--tainacan-media-background:  var(--wp--preset--color--' . $block_attributes['backgroundColor'] . ');') : '';
 	$block_custom_css .= (isset($block_attributes['style']) && isset($block_attributes['style']['color']) && isset($block_attributes['style']['color']['background'])) ? ('--tainacan-media-background: ' . $block_attributes['style']['color']['background'] . ';') : '';
+
+	// Link color, if enabled. Firts we check for custom preset colors, then actual values.
+	$block_custom_css .= isset($block_attributes['linkColor']) ? ('--swiper-theme-color: var(--wp--preset--color--' . $block_attributes['linkColor'] . ');') : '';
+	if (
+		isset($block_attributes['style']) &&
+		isset($block_attributes['style']['elements']) &&
+		isset($block_attributes['style']['elements']['link']) &&
+		isset($block_attributes['style']['elements']['link']['color']) &&
+		isset($block_attributes['style']['elements']['link']['color']['text'])
+	) {
+		$link_color = $block_attributes['style']['elements']['link']['color']['text'];
+		if ( strpos( $link_color, 'var:' ) !== false ) {
+			$link_color = str_replace('|', '--', $link_color);
+			$link_color = str_replace('var:', 'var(--wp--', $link_color) . ')';
+		}
+		$block_custom_css .= '--swiper-theme-color: ' . $link_color . ';';
+	}
+		
+	// Other values are obtained directly from the attributes
 	$block_custom_css .= (isset($block_attributes['arrowsSize']) && is_numeric($block_attributes['arrowsSize'])) ? ('--swiper-navigation-size: ' . $block_attributes['arrowsSize'] . 'px;') : '';
 	$block_custom_css .= (isset($block_attributes['mainSliderHeight']) && is_numeric($block_attributes['mainSliderHeight'])) ? ('--tainacan-media-main-carousel-height: ' . $block_attributes['mainSliderHeight'] . 'vh;') : '';
 	$block_custom_css .= (isset($block_attributes['mainSliderWidth']) && is_numeric($block_attributes['mainSliderWidth'])) ? ('--tainacan-media-main-carousel-width: ' . $block_attributes['mainSliderWidth'] . '%;') : '';
 	$block_custom_css .= (isset($block_attributes['thumbnailsCarouselWidth']) && is_numeric($block_attributes['thumbnailsCarouselWidth'])) ? ('--tainacan-media-thumbs-carousel-width: ' . $block_attributes['thumbnailsCarouselWidth'] . '%;') : '';
 	$block_custom_css .= (isset($block_attributes['thumbnailsCarouselItemSize']) && is_numeric($block_attributes['thumbnailsCarouselItemSize'])) ? ('--tainacan-media-thumbs-carousel-item-size: ' . $block_attributes['thumbnailsCarouselItemSize'] . 'px;') : '';
-	var_dump($block_attributes);
+	// var_dump($block_attributes['style']['elements']);
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
 			'style' => $block_custom_css,