Added support for separate X and Y grid widths

blocks/bar-graph/build/block.json

@@ -96,7 +96,11 @@
       "type": "string",
       "default": "#e0e0e0"
     },
-    "gridWidth": {
+    "xGridWidth": {
+      "type": "number",
+      "default": 1
+    },
+    "yGridWidth": {
       "type": "number",
       "default": 1
     },

blocks/bar-graph/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => '9e08ac91fd20a1bb3a3d');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n'), 'version' => 'd3e2bb3c261756c0085a');

blocks/bar-graph/src/block.json

@@ -96,7 +96,11 @@
 			"type": "string",
 			"default": "#e0e0e0"
 		},
-		"gridWidth": {
+		"xGridWidth": {
+			"type": "number",
+			"default": 1
+		},
+		"yGridWidth": {
 			"type": "number",
 			"default": 1
 		},

blocks/bar-graph/src/components/BarGraph.js

@@ -11,7 +11,8 @@ const BarGraph = ({
     showGridY,
     xGridColor,
     yGridColor,
-    gridWidth,
+    xGridWidth,
+    yGridWidth,
     showBarValues,
     xAxisLabel,
     yAxisLabel,
@@ -107,7 +108,7 @@ const BarGraph = ({
                 .attr('class', 'grid x-grid')
                 .attr('transform', `translate(0,${innerHeight})`)
                 .style('color', xGridColor)
-                .style('stroke-width', gridWidth)
+                .style('stroke-width', xGridWidth)
                 .call(d3.axisBottom(xScale)
                     .tickSize(-innerHeight)
                     .tickFormat(''));
@@ -118,7 +119,7 @@ const BarGraph = ({
             g.append('g')
                 .attr('class', 'grid y-grid')
                 .style('color', yGridColor)
-                .style('stroke-width', gridWidth)
+                .style('stroke-width', yGridWidth)
                 .call(d3.axisLeft(yScale)
                     .tickSize(-innerWidth)
                     .tickFormat(''));
@@ -181,7 +182,7 @@ const BarGraph = ({
                 .text(yAxisLabel);
         }
 
-    }, [data, width, height, title, showGridX, showGridY, xGridColor, yGridColor, gridWidth, showBarValues, xAxisLabel, yAxisLabel, colorSource, defaultBarColor, customColors, barOpacity]);
+    }, [data, width, height, title, showGridX, showGridY, xGridColor, yGridColor, xGridWidth, yGridWidth, showBarValues, xAxisLabel, yAxisLabel, colorSource, defaultBarColor, customColors, barOpacity]);
 
     return (
         <div 

blocks/bar-graph/src/edit.js

@@ -35,6 +35,8 @@ export default function Edit({ attributes, setAttributes }) {
         showGridY,
         yGridColor,
 		xGridColor,
+        xGridWidth,
+        yGridWidth,
         chartData,
         dataSource,
         displayChartTitle,
@@ -45,7 +47,6 @@ export default function Edit({ attributes, setAttributes }) {
         showFiltering,
         showBarValues,
         showGridX,
-        gridWidth,
         xAxisLabel,
         yAxisLabel,
         chartColorSource,
@@ -295,6 +296,7 @@ export default function Edit({ attributes, setAttributes }) {
                                             onChange={(value) => setAttributes({ showGridY: value })}
                                         />
 										{showGridY && (
+											<>
 												<div className="y-grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
 													<span>Y-Axis Grid Color</span>
 													<Button
@@ -320,9 +322,19 @@ export default function Edit({ attributes, setAttributes }) {
 														</Popover>
 													)}
 												</div>
+												<RangeControl
+													label={__('Y-Axis Grid Width', 'lcp')}
+													value={yGridWidth}
+													onChange={(value) => setAttributes({ yGridWidth: value })}
+													min={1}
+													max={5}
+													step={1}
+												/>
+											</>
 										)}
 
 										{showGridX && (
+											<>
 												<div className="x-grid-color-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
 													<span>X-Axis Grid Color</span>
 													<Button
@@ -348,17 +360,15 @@ export default function Edit({ attributes, setAttributes }) {
 														</Popover>
 													)}
 												</div>
-										)}
-
-										{(showGridX || showGridY) && (
 												<RangeControl
-												label={__('Grid Width', 'lcp')}
+													label={__('X-Axis Grid Width', 'lcp')}
-												value={gridWidth}
+													value={xGridWidth}
-												onChange={(value) => setAttributes({ gridWidth: value })}
+													onChange={(value) => setAttributes({ xGridWidth: value })}
 													min={1}
 													max={5}
 													step={1}
 												/>
+											</>
 										)}
 								</PanelBody>
 							</Panel>
@@ -430,7 +440,8 @@ export default function Edit({ attributes, setAttributes }) {
                     showGridY={showGridY}
                     yGridColor={yGridColor}
 					xGridColor={xGridColor}
-                    gridWidth={gridWidth}
+                    xGridWidth={xGridWidth}
+                    yGridWidth={yGridWidth}
                     title={displayChartTitle ? chartTitle : ''}
                     showSorting={showSorting}
                     showFiltering={showFiltering}