Merge pull request #929 from Codeinwp/bugfix/925

Fix update axis baseline color

Author: vytisbulkevicius

classes/Visualizer/Gutenberg/build/block.js

@@ -18,6 +18,8 @@ const {
 	TextControl
 } = wp.components;
 
+import { getColorCode } from '../../utils.js';
+
 class HorizontalAxisSettings extends Component {
 	constructor() {
 		super( ...arguments );
@@ -85,9 +87,9 @@ class HorizontalAxisSettings extends Component {
 						label={ __( 'Base Line Color' ) }
 					>
 						<ColorPalette
-							value={ settings.hAxis.baselineColor }
+							value={ settings.vAxis.baselineColor }
 							onChange={ e => {
-								settings.hAxis.baselineColor = e;
+								settings.vAxis.baselineColor = getColorCode( e );
 								this.props.edit( settings );
 							} }
 						/>
@@ -100,7 +102,7 @@ class HorizontalAxisSettings extends Component {
 							value={ settings.hAxis.textStyle.color || settings.hAxis.textStyle }
 							onChange={ e => {
 								settings.hAxis.textStyle = {};
-								settings.hAxis.textStyle.color = e;
+								settings.hAxis.textStyle.color = getColorCode( e );
 								this.props.edit( settings );
 							} }
 						/>

classes/Visualizer/Gutenberg/build/handsontable.css

@@ -18,6 +18,8 @@ const {
 	TextControl
 } = wp.components;
 
+import { getColorCode } from '../../utils.js';
+
 class VerticalAxisSettings extends Component {
 	constructor() {
 		super( ...arguments );
@@ -85,9 +87,9 @@ class VerticalAxisSettings extends Component {
 						label={ __( 'Base Line Color' ) }
 					>
 						<ColorPalette
-							value={ settings.vAxis.baselineColor }
+							value={ settings.hAxis.baselineColor }
 							onChange={ e => {
-								settings.vAxis.baselineColor = e;
+								settings.hAxis.baselineColor = getColorCode( e );
 								this.props.edit( settings );
 							} }
 						/>
@@ -100,7 +102,7 @@ class VerticalAxisSettings extends Component {
 							value={ settings.vAxis.textStyle.color || settings.vAxis.textStyle }
 							onChange={ e => {
 								settings.vAxis.textStyle = {};
-								settings.vAxis.textStyle.color = e;
+								settings.vAxis.textStyle.color = getColorCode( e );
 								this.props.edit( settings );
 							} }
 						/>

classes/Visualizer/Gutenberg/build/handsontable.js

@@ -178,3 +178,14 @@ export const getFormatterForGoogle = ( dataType ) => {
     }
     return null;
 };
+
+export const getColorCode = ( color ) => {
+	if ( -1 === color.indexOf( '#' ) ) {
+		let getCssVar = color.match( /\((.*)\)/ ).pop();
+		if ( getCssVar ) {
+			let style = getComputedStyle( document.body );
+			return style.getPropertyValue( getCssVar );
+		}
+	}
+	return color;
+};