fixing issue with column styles and matching editor to frontend fro r…

…ow selectors https://stellarwp.atlassian.net/browse/KAD-3950
stellarwp · Dec 11, 2024 · 41fbf1c · 41fbf1c
1 parent 9035e71
commit 41fbf1c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
diff --git a/includes/blocks/class-kadence-blocks-table-block.php b/includes/blocks/class-kadence-blocks-table-block.php
@@ -177,7 +177,13 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 		if( !empty( $attributes['columnBackgrounds'] ) ) {
 			foreach( $attributes['columnBackgrounds'] as $index => $background ) {
 				if ( $background ) {
-					$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' td:nth-of-type(' . ( $index + 1 ) . '), .kb-table-container .kb-table' . esc_attr( $unique_id ) . ' th:nth-of-type(' . ( $index + 1 ) . ')' );
+					if( $attributes['isFirstColumnHeader'] ) {
+						$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' td:nth-of-type(' . ( $index ) . ')' );
+					} else {
+						$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' td:nth-of-type(' . ( $index + 1 ) . ')' );
+					}
+					$css->add_property( 'background-color', $css->render_color( $background ) );
+					$css->set_selector( '.kb-table-container .kb-table' . esc_attr( $unique_id ) . ' th:nth-of-type(' . ( $index + 1 ) . ')' );
 					$css->add_property( 'background-color', $css->render_color( $background ) );
 				}
 			}

diff --git a/src/blocks/table/children/row/backend-styles/index.js b/src/blocks/table/children/row/backend-styles/index.js
@@ -24,19 +24,15 @@ export default function BackendStyles(props) {
 
 	const css = new KadenceBlocksCSS();
 
-	css.set_selector(
-		`.kb-table-container .kb-table tr.kb-table-row${uniqueID}, .kb-table-container .kb-table tr.kb-table-row${uniqueID} th, .kb-table-container .kb-table tr.kb-table-row${uniqueID} td`
-	);
+	css.set_selector(`.kb-table-container .kb-table tr.kb-table-row${uniqueID}`);
 	if (previewMinHeight) {
 		css.add_property('height', previewMinHeight + minHeightType);
 	}
 	if (backgroundColor !== '') {
 		css.add_property('background-color', KadenceColorOutput(backgroundColor));
 	}
 
-	css.set_selector(
-		`.kb-table-container .kb-table tr.kb-table-row${uniqueID}:hover, .kb-table-container .kb-table tr.kb-table-row${uniqueID}:hover th, .kb-table-container .kb-table tr.kb-table-row${uniqueID}:hover td`
-	);
+	css.set_selector(`.kb-table-container .kb-table tr.kb-table-row${uniqueID}:hover`);
 	if (backgroundHoverColor !== '') {
 		css.add_property('background-color', KadenceColorOutput(backgroundHoverColor));
 	}

diff --git a/src/blocks/table/components/backend-styles/index.js b/src/blocks/table/components/backend-styles/index.js
@@ -57,6 +57,7 @@ export default function BackendStyles(props) {
 		tabletMargin,
 		mobileMargin,
 		marginType,
+		isFirstColumnHeader,
 	} = attributes;
 	const css = new KadenceBlocksCSS();
 
@@ -197,11 +198,13 @@ export default function BackendStyles(props) {
 	if (columnBackgrounds) {
 		columnBackgrounds.forEach((background, index) => {
 			if (background) {
-				css.set_selector(
-					`.kb-table${uniqueID} td:nth-of-type(${index + 1}), .kb-table${uniqueID} th:nth-of-type(${
-						index + 1
-					})`
-				);
+				if (isFirstColumnHeader) {
+					css.set_selector(`.kb-table${uniqueID} td:nth-of-type(${index})`);
+				} else {
+					css.set_selector(`.kb-table${uniqueID} td:nth-of-type(${index + 1})`);
+				}
+				css.add_property('background-color', KadenceColorOutput(background));
+				css.set_selector(`.kb-table${uniqueID} th:nth-of-type(${index + 1})`);
 				css.add_property('background-color', KadenceColorOutput(background));
 			}
 		});