Skip to content

Commit

Permalink
KAD-3245 inner section vertical alignment fixed for tablet/mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@gilbert-hernandez
gilbert-hernandez committed Aug 21, 2024
1 parent ea08186 commit c25015e
Showing 1 changed file with 56 additions and 140 deletions.
196 changes: 56 additions & 140 deletions includes/blocks/class-kadence-blocks-column-block.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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();

0 comments on commit c25015e

Please sign in to comment.