From 41fef687378d8690b0eccf3d17fab91ae2d53de1 Mon Sep 17 00:00:00 2001
From: Kaitlin Bolling <kaitlin@alley.com>
Date: Fri, 21 Jun 2024 17:32:54 -0400
Subject: [PATCH] fix issue with aside borders set to none

---
 assets/js/theme-edit.js                       |  8 ++
 includes/apple-exporter/class-theme.php       |  2 +-
 .../apple-exporter/components/class-aside.php | 83 ++++++++++++++-----
 3 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/assets/js/theme-edit.js b/assets/js/theme-edit.js
index 46508921..7fc2b95a 100644
--- a/assets/js/theme-edit.js
+++ b/assets/js/theme-edit.js
@@ -76,6 +76,14 @@
 				$( '#pullquote_border_color, #pullquote_border_width' ).parent().show().next( 'br' ).show();
 			}
 		} ).change();
+
+		$( '#aside_border_style' ).on( 'change', function () {
+			if ( 'none' === $( this ).val() ) {
+				$( '#aside_border_color, #aside_border_width' ).parent().hide().next( 'br' ).hide();
+			} else {
+				$( '#aside_border_color, #aside_border_width' ).parent().show().next( 'br' ).show();
+			}
+		} ).change();
 	}
 
 	function appleNewsThemeEditSortInit( activeSelector, activeKey, inactiveSelector, inactiveKey, connectWith ) {
diff --git a/includes/apple-exporter/class-theme.php b/includes/apple-exporter/class-theme.php
index cc8599bd..b6625012 100644
--- a/includes/apple-exporter/class-theme.php
+++ b/includes/apple-exporter/class-theme.php
@@ -2524,8 +2524,8 @@ private function initialize_groups() {
 				'settings'    => [
 					'aside_alignment',
 					'aside_background_color',
-					'aside_border_color',
 					'aside_border_style',
+					'aside_border_color',
 					'aside_border_width',
 					'aside_padding',
 					'dark_mode_colors_heading',
diff --git a/includes/apple-exporter/components/class-aside.php b/includes/apple-exporter/components/class-aside.php
index 7c36b85b..666b101b 100644
--- a/includes/apple-exporter/components/class-aside.php
+++ b/includes/apple-exporter/components/class-aside.php
@@ -84,29 +84,59 @@ public function register_specs() {
 			],
 		);
 
-		$aside_conditional_style = [];
-		if ( ! empty( $theme->get_value( 'aside_background_color_dark' ) ) || ! empty( $theme->get_value( 'aside_border_color_dark' ) ) ) {
-			$aside_conditional_style = [
-				'conditional' => [
-					'backgroundColor' => '#aside_background_color_dark#',
-					'border'          => [
-						'all' => [
-							'width' => '#blockquote_border_width#',
-							'style' => '#blockquote_border_style#',
-							'color' => '#aside_border_color_dark#',
-						],
-					],
-					'conditions'      => [
-						'minSpecVersion'       => '1.14',
-						'preferredColorScheme' => 'dark',
+		$aside_conditional_background_style = [];
+		if ( ! empty( $theme->get_value( 'aside_background_color_dark' ) ) ) {
+			$aside_conditional_background_style = [
+				'backgroundColor' => '#aside_background_color_dark#',
+			];
+		}
+	
+		$aside_conditional_border_style = [];
+		if ( ! empty( $theme->get_value( 'aside_border_color_dark' ) ) ) {
+			$aside_conditional_border_style = [
+				'border' => [
+					'all' => [
+						'width' => '#aside_border_width#',
+						'style' => '#aside_border_style#',
+						'color' => '#aside_border_color_dark#',
 					],
 				],
 			];
 		}
 
+		$aside_conditional_conditions = [
+			'conditions' => [
+				'minSpecVersion'       => '1.14',
+				'preferredColorScheme' => 'dark',
+			],
+		];
+
+		$aside_conditional_style_with_borders = ( ! empty( $aside_conditional_background_style ) || ! empty( $aside_conditional_border_style ) )
+			? [
+				'conditional' => [
+					array_merge(
+						$aside_conditional_background_style,
+						$aside_conditional_border_style,
+						$aside_conditional_conditions,
+					),
+				]
+			]
+			: [];
+
+		$aside_conditional_style_without_borders = ( ! empty( $aside_conditional_background_style ) || ! empty( $aside_conditional_border_style ) )
+			? [
+				'conditional' => [
+					array_merge(
+						$aside_conditional_background_style,
+						$aside_conditional_conditions,
+					),
+				]
+			]
+			: [];
+
 		$this->register_spec(
-			'default-aside',
-			__( 'Aside Style', 'apple-news' ),
+			'aside-with-border-json',
+			__( 'Aside With Border JSON', 'apple-news' ),
 			array_merge(
 				[
 					'backgroundColor' => '#aside_background_color#',
@@ -118,7 +148,18 @@ public function register_specs() {
 						],
 					],
 				],
-				$aside_conditional_style
+				$aside_conditional_style_with_borders
+			)
+		);
+
+		$this->register_spec(
+			'aside-without-border-json',
+			__( 'Aside Without Border JSON', 'apple-news' ),
+			array_merge(
+				[
+					'backgroundColor' => '#aside_background_color#',
+				],
+				$aside_conditional_style_without_borders
 			)
 		);
 
@@ -178,9 +219,13 @@ protected function build( $html ) {
 			],
 		);
 
+		$component_style = ( 'none' !== $theme->get_value( 'aside_border_style' ) )
+			? 'aside-with-border-json'
+			: 'aside-without-border-json';
+
 		$this->register_component_style(
 			'default-aside',
-			'default-aside',
+			$component_style,
 		);
 
 		$alignment   = $theme->get_value( 'aside_alignment' );