Merge pull request #532 from stellarwp/bugfix/KAD-3245

bugfix/KAD-3245

Author: oakesjosh

includes/blocks/class-kadence-blocks-column-block.php

@@ -446,52 +446,17 @@ 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 );
+		$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->set_vertical_align($media_state, $align['vertical_align'], $align['direction'], $css, $unique_id);
 			}
 		}
+		$css->set_media_state('desktop');
 		// Background.
 		$background_type = ! empty( $attributes['backgroundType'] ) ? $attributes['backgroundType'] : 'normal';
 		$css->set_selector( '.kadence-column' . $unique_id . ' > .kt-inside-inner-col' );
@@ -892,5 +857,53 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) {
 		}
 		return $css->css_output();
 	}
+
+	private function set_vertical_align($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();