From c25015e77f7ed7da71d82dcb5073df5cb3a4af8c Mon Sep 17 00:00:00 2001
From: gilbert-hernandez <gilbert.hernandez@kadencewp.com>
Date: Wed, 21 Aug 2024 14:29:31 -0600
Subject: [PATCH] KAD-3245 inner section vertical alignment fixed for
 tablet/mobile

---
 .../class-kadence-blocks-column-block.php     | 196 +++++-------------
 1 file changed, 56 insertions(+), 140 deletions(-)

diff --git a/includes/blocks/class-kadence-blocks-column-block.php b/includes/blocks/class-kadence-blocks-column-block.php
index 67014d66a..f801b4455 100644
--- a/includes/blocks/class-kadence-blocks-column-block.php
+++ b/includes/blocks/class-kadence-blocks-column-block.php
@@ -443,146 +443,14 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 			}
 		}
 		// inside of Row.
-		if ( ! empty( $desktop_vertical_align ) ) {
-			// Restart $align variable to avoid inherit from above value assignment
-			$align = 'center';
-			$justify_content = '';
-			switch ( $desktop_vertical_align ) {
-				case 'top':
-					$align = 'flex-start';
-					$justify_content = 'flex-start';
-					break;
-				case 'bottom':
-					$align = 'flex-end';
-					$justify_content = 'flex-end';
-					break;
-				case 'space-between':
-					$justify_content = 'space-between';
-					break;
-				case 'space-around':
-					$justify_content = 'space-around';
-					break;
-				case 'space-evenly':
-					$justify_content = 'space-evenly';
-					break;
-				case 'stretch':
-					$justify_content = 'stretch';
-					break;
-				default:
-					$justify_content = 'center';
-					break;
-			}
-			if ( 'horizontal' === $desktop_direction || 'horizontal-reverse' === $desktop_direction ) {
-				$css->set_selector( '.kt-row-column-wrap > .kadence-column' . $unique_id );
-				$css->add_property( 'align-self', $align );
-				$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id );
-				$css->add_property( 'align-self', 'auto' );
-				$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
-				$css->add_property( 'align-items', $align );
-			} else {
-				$css->set_selector( '.kt-row-column-wrap > .kadence-column' . $unique_id );
-				$css->add_property( 'align-self', $align );
-				$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id );
-				$css->add_property( 'align-self', 'auto' );
-				$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
-				$css->add_property( 'flex-direction', 'column' );
-				$css->add_property( 'justify-content', $justify_content );
-			}
-		}
-		// inside of Row - tablet.
-		if ( ! empty( $tablet_vertical_align ) ) {
-			// Restart $align variable to avoid inherit from above value assignment
-			$align = 'center';
-			$justify_content = '';
-			switch ( $tablet_vertical_align ) {
-				case 'top':
-					$align = 'flex-start';
-					$justify_content = 'flex-start';
-					break;
-				case 'bottom':
-					$align = 'flex-end';
-					$justify_content = 'flex-end';
-					break;
-				case 'space-between':
-					$justify_content = 'space-between';
-					break;
-				case 'space-around':
-					$justify_content = 'space-around';
-					break;
-				case 'space-evenly':
-					$justify_content = 'space-evenly';
-					break;
-				case 'stretch':
-					$justify_content = 'stretch';
-					break;
-				default:
-					$justify_content = 'center';
-					break;
-			}
-			$css->set_media_state('tablet');
-			if ( 'horizontal' === $tablet_direction || 'horizontal-reverse' === $tablet_direction ) {
-				$css->set_selector( '.kt-row-column-wrap > .kadence-column' . $unique_id );
-				$css->add_property( 'align-self', $align );
-				$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id );
-				$css->add_property( 'align-self', 'auto' );
-				$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
-				$css->add_property( 'align-items', $align );
-			} else {
-				$css->set_selector( '.kt-row-column-wrap > .kadence-column' . $unique_id );
-				$css->add_property( 'align-self', $align );
-				$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id );
-				$css->add_property( 'align-self', 'auto' );
-				$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
-				$css->add_property( 'flex-direction', 'column' );
-				$css->add_property( 'justify-content', $justify_content );
-			}
-		}
-		// inside of Row - mobile
-		if ( ! empty( $mobile_vertical_align ) ) {
-			// Restart $align variable to avoid inherit from above value assignment
-			$align = 'center';
-			$justify_content = '';
-			switch ( $mobile_vertical_align ) {
-				case 'top':
-					$align = 'flex-start';
-					$justify_content = 'flex-start';
-					break;
-				case 'bottom':
-					$align = 'flex-end';
-					$justify_content = 'flex-end';
-					break;
-				case 'space-between':
-					$justify_content = 'space-between';
-					break;
-				case 'space-around':
-					$justify_content = 'space-around';
-					break;
-				case 'space-evenly':
-					$justify_content = 'space-evenly';
-					break;
-				case 'stretch':
-					$justify_content = 'stretch';
-					break;
-				default:
-					$justify_content = 'center';
-					break;
-			}
-			$css->set_media_state('mobile');
-			if ( 'horizontal' === $mobile_direction || 'horizontal-reverse' === $mobile_direction ) {
-				$css->set_selector( '.kt-row-column-wrap > .kadence-column' . $unique_id );
-				$css->add_property( 'align-self', $align );
-				$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id );
-				$css->add_property( 'align-self', 'auto' );
-				$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
-				$css->add_property( 'align-items', $align );
-			} else {
-				$css->set_selector( '.kt-row-column-wrap > .kadence-column' . $unique_id );
-				$css->add_property( 'align-self', $align );
-				$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id );
-				$css->add_property( 'align-self', 'auto' );
-				$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
-				$css->add_property( 'flex-direction', 'column' );
-				$css->add_property( 'justify-content', $justify_content );
+		$alignments = [
+			'desktop' => ['vertical_align' => $desktop_vertical_align, 'direction' => $desktop_direction],
+			'tablet' => ['vertical_align' => $tablet_vertical_align, 'direction' => $tablet_direction],
+			'mobile' => ['vertical_align' => $mobile_vertical_align, 'direction' => $mobile_direction],
+		];
+		foreach ($alignments as $media_state => $align) {
+			if ( ! empty($align['vertical_align']) ) {
+				$this->setVerticalAlign($media_state, $align['vertical_align'], $align['direction'], $css, $unique_id);
 			}
 		}
 		$css->set_media_state('desktop');
@@ -986,5 +854,53 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 		}
 		return $css->css_output();
 	}
+
+	private function setVerticalAlign($media_state, $media_vertical_align, $media_direction, $css, $unique_id) {
+		// Restart $align variable to avoid inherit from above value assignment
+		$align = 'center';
+		$justify_content = '';
+		switch ( $media_vertical_align ) {
+			case 'top':
+				$align = 'flex-start';
+				$justify_content = 'flex-start';
+				break;
+			case 'bottom':
+				$align = 'flex-end';
+				$justify_content = 'flex-end';
+				break;
+			case 'space-between':
+				$justify_content = 'space-between';
+				break;
+			case 'space-around':
+				$justify_content = 'space-around';
+				break;
+			case 'space-evenly':
+				$justify_content = 'space-evenly';
+				break;
+			case 'stretch':
+				$justify_content = 'stretch';
+				break;
+			default:
+				$justify_content = 'center';
+				break;
+		}
+		$css->set_media_state($media_state);
+		if ( 'horizontal' === $media_direction || 'horizontal-reverse' === $media_direction ) {
+			$css->set_selector( '.kt-row-column-wrap > .kadence-column' . $unique_id );
+			$css->add_property( 'align-self', $align );
+			$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id );
+			$css->add_property( 'align-self', 'auto' );
+			$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
+			$css->add_property( 'align-items', $align );
+		} else {
+			$css->set_selector( '.kt-row-column-wrap > .kadence-column' . $unique_id );
+			$css->add_property( 'align-self', $align );
+			$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id );
+			$css->add_property( 'align-self', 'auto' );
+			$css->set_selector( '.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
+			$css->add_property( 'flex-direction', 'column' );
+			$css->add_property( 'justify-content', $justify_content );
+		}
+	}
 }
 Kadence_Blocks_Column_Block::get_instance();