has_style ) { if ( ! wp_style_is( 'kadence-blocks-' . $this->block_name, 'enqueued' ) ) { $this->enqueue_style( 'kadence-blocks-' . $this->block_name ); if ( $inline ) { $this->should_render_inline_stylesheet( 'kadence-blocks-' . $this->block_name ); } } } if ( ( isset( $attributes['bgImg'] ) && ! empty( $attributes['bgImg'] ) && isset( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ) || ( isset( $attributes['overlayBgImg'] ) && ! empty( $attributes['overlayBgImg'] ) && isset( $attributes['overlayBgImgAttachment'] ) && 'parallax' === $attributes['overlayBgImgAttachment'] ) ) { $this->enqueue_script( 'kadence-blocks-parallax-js' ); } if ( isset( $attributes['backgroundSettingTab'] ) && 'slider' === $attributes['backgroundSettingTab'] ) { $this->enqueue_style( 'kadence-blocks-splide' ); if ( $inline ) { $this->should_render_inline_stylesheet( 'kadence-blocks-splide' ); } $this->enqueue_script( 'kadence-blocks-splide-init' ); } $is_background_video = isset( $attributes['backgroundSettingTab'] ) && 'video' === $attributes['backgroundSettingTab']; $has_background_video_content = $is_background_video && isset( $attributes['backgroundVideo'] ) && isset( $attributes['backgroundVideo'][0] ); $show_play_pause = $has_background_video_content && isset( $attributes['backgroundVideo'][0]['btns'] ) && true === $attributes['backgroundVideo'][0]['btns']; $show_audio_is_default = ( $has_background_video_content && ( ! isset( $attributes['backgroundVideo'][0]['btnsMute'] ) ) ); $show_audio = $has_background_video_content && ( ( $show_audio_is_default && $show_play_pause && isset( $attributes['backgroundVideo'][0]['mute'] ) && false === $attributes['backgroundVideo'][0]['mute'] ) || ( isset( $attributes['backgroundVideo'][0]['btnsMute'] ) && $attributes['backgroundVideo'][0]['btnsMute'] ) ); if ( $show_play_pause || $show_audio ) { $this->enqueue_script( 'kadence-blocks-video-bg' ); } } /** * Return a grid tempate coulmns string for custom column widths. * * @param object $css the css object. * @param int $columns the amount of columns. * @param string $gap the gap. * @param int $column1 the first column width. * @param int $column2 the second column width. * @param int $column3 the third column width. * @param int $column4 the fourth column width. * @param int $column5 the fifth column width. * @param int $column6 the sixth column width. */ public function get_custom_layout( $css, $columns, $gap = '', $column1 = null, $column2 = null, $column3 = null, $column4 = null, $column5 = null, $column6 = null ) { $grid_layout_string = ''; if ( $columns > 1 ) { $gap_string = ! empty( $gap ) ? $gap : 'var(--kb-default-row-gutter, var(--global-row-gutter-md, 2rem))'; $column_widths = array( $column1, $column2, $column3, $column4, $column5, $column6 ); $column_width_sum = 0; foreach ( range( 0, $columns - 1 ) as $column ) { $column_width = $column_widths[ $column ]; if ( $column == $columns - 1 ) { //assume the last column width to make 100 $column_width = abs( $column_width_sum - 100 ); } $grid_layout_string .= 'minmax(0, calc(' . $column_width . '% - ((' . $gap_string . ' * ' . ($columns - 1) . ' )/' . $columns . ')))'; $column_width_sum += $column_width; } } return $grid_layout_string; } /** * Render for block scripts block. * * @param object $css the css object. * @param int $columns the amount of columns. * @param string $layout the layout of the row. * @param string $inner_selector the inner selector. * @param string $gap the gap. * @param int $column1 the first column width. * @param int $column2 the second column width. * @param int $column3 the third column width. * @param int $column4 the fourth column width. * @param int $column5 the fifth column width. * @param int $column6 the sixth column width. */ public function get_template_columns( $css, $columns, $layout, $inner_selector, $gap = '', $column1 = null, $column2 = null, $column3 = null, $column4 = null, $column5 = null, $column6 = null ) { $grid_layout = 'minmax(0, 1fr)'; switch ( $columns ) { case 1: switch ( $layout ) { case 'grid-layout': $grid_layout = 'repeat(12, minmax(0, 1fr))'; break; } break; case 2: if ( ! empty( $column1 ) ) { $grid_layout = $this->get_custom_layout( $css, $columns, $gap, $column1, $column2, $column3, $column4, $column5, $column6 ); } else { switch ( $layout ) { case 'left-golden': $grid_layout = 'minmax(0, 2fr) minmax(0, 1fr)'; break; case 'right-golden': $grid_layout = 'minmax(0, 1fr) minmax(0, 2fr)'; break; case 'row': $grid_layout = 'minmax(0, 1fr)'; break; default: $grid_layout = 'repeat(2, minmax(0, 1fr))'; break; } } break; case 3: if ( ! empty( $column1 ) && ! empty( $column2 ) ) { if ( abs( $column1 ) === 50 && abs( $column2 ) === 25 ) { $grid_layout = 'minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr)'; } else if ( abs( $column1 ) === 25 && abs( $column2 ) === 50 ) { $grid_layout = 'minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)'; } else if ( abs( $column1 ) === 25 && abs( $column2 ) === 25 ) { $grid_layout = 'minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr)'; } else { $grid_layout = $this->get_custom_layout( $css, $columns, $gap, $column1, $column2, $column3, $column4, $column5, $column6 ); } } else { switch ( $layout ) { case 'left-half': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr)'; break; case 'right-half': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr)'; break; case 'center-half': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)'; break; case 'center-wide': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr)'; break; case 'center-exwide': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'minmax(0, 1fr) minmax(0, 6fr) minmax(0, 1fr)'; break; case 'first-row': $grid_layout = 'repeat(2, minmax(0, 1fr))'; $css->set_selector( $inner_selector . ' > *:nth-child(3n+1 of *:not(style))' ); $css->add_property( 'grid-column', '1 / -1' ); $css->set_selector( $inner_selector ); break; case 'last-row': $grid_layout = 'repeat(2, minmax(0, 1fr))'; $css->set_selector( $inner_selector . ' > *:nth-child(3n of *:not(style))' ); $css->add_property( 'grid-column', '1 / -1' ); $css->set_selector( $inner_selector ); break; case 'two-grid': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'repeat(2, minmax(0, 1fr))'; break; case 'row': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'minmax(0, 1fr)'; break; default: $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'repeat(3, minmax(0, 1fr))'; break; } } break; case 4: if ( ! empty( $column1 ) && ! empty( $column2 ) && ! empty( $column3 ) ) { $grid_layout = $this->get_custom_layout( $css, $columns, $gap, $column1, $column2, $column3, $column4, $column5, $column6 ); } else { switch ( $layout ) { case 'left-forty': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)'; break; case 'right-forty': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr)'; break; case 'two-grid': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'repeat(2, minmax(0, 1fr))'; break; case 'row': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'minmax(0, 1fr)'; break; default: $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'repeat(4, minmax(0, 1fr))'; break; } } break; case 5: if ( ! empty( $column1 ) && ! empty( $column2 ) && ! empty( $column3 ) && ! empty( $column4 ) ) { $grid_layout = $this->get_custom_layout( $css, $columns, $gap, $column1, $column2, $column3, $column4, $column5, $column6 ); } else { switch ( $layout ) { case 'first-row': $grid_layout = 'repeat(4, minmax(0, 1fr))'; $css->set_selector( $inner_selector . ' > *:nth-child(5n+1 of *:not(style))' ); $css->add_property( 'grid-column', '1 / -1' ); $css->set_selector( $inner_selector ); break; case 'last-row': $grid_layout = 'repeat(4, minmax(0, 1fr))'; $css->set_selector( $inner_selector . ' > *:nth-child(5n of *:not(style))' ); $css->add_property( 'grid-column', '1 / -1' ); $css->set_selector( $inner_selector ); break; case 'two-grid': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'repeat(2, minmax(0, 1fr))'; break; case 'three-grid': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'repeat(3, minmax(0, 1fr))'; break; case 'row': $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'minmax(0, 1fr)'; break; default: $this->reset_grid_colum_for_template_columns( $css, $inner_selector ); $grid_layout = 'repeat(5, minmax(0, 1fr))'; break; } } break; case 6: if ( ! empty( $column1 ) && ! empty( $column2 ) && ! empty( $column3 ) && ! empty( $column4 ) && ! empty( $column5 ) ) { $grid_layout = $this->get_custom_layout( $css, $columns, $gap, $column1, $column2, $column3, $column4, $column5, $column6 ); } else { switch ( $layout ) { case 'two-grid': $grid_layout = 'repeat(2, minmax(0, 1fr))'; break; case 'three-grid': $grid_layout = 'repeat(3, minmax(0, 1fr))'; break; case 'row': $grid_layout = 'minmax(0, 1fr)'; break; default: $grid_layout = 'repeat(6, minmax(0, 1fr))'; break; } } break; } return $grid_layout; } /** * A reset helper for the template columns */ public function reset_grid_colum_for_template_columns( $css, $inner_selector ) { $css->set_selector( $inner_selector . ' > div:not(.added-for-specificity)' ); $css->add_property( 'grid-column', 'initial' ); $css->set_selector( $inner_selector ); } /** * Builds CSS for block. * * @param array $attributes the blocks attributes. * @param string $css the css class for blocks. * @param string $unique_id the blocks attr ID. * @param string $unique_style_id the blocks alternate ID for queries. */ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) { $css->set_style_id( 'kb-' . $this->block_name . $unique_style_id ); $updated_version = ! empty( $attributes['kbVersion'] ) && $attributes['kbVersion'] > 1 ? true : false; if ( ! empty( $attributes['kbVersion'] ) && $attributes['kbVersion'] > 1 ) { $margin_selector = '.kb-row-layout-wrap.wp-block-kadence-rowlayout.kb-row-layout-id' . $unique_id; $base_selector = '.kb-row-layout-id' . $unique_id; $inner_selector = '.kb-row-layout-id' . $unique_id . ' > .kt-row-column-wrap'; } else { $margin_selector = '#kt-layout-id' . $unique_id; $base_selector = '#kt-layout-id' . $unique_id; $inner_selector = '#kt-layout-id' . $unique_id . ' > .kt-row-column-wrap'; } // Margin, check for old attributes and use if present. $css->set_selector( $margin_selector ); // Fix to prevent generatepress from breaking things with their css. if ( class_exists( 'GeneratePress_CSS' ) ) { $css->add_property( 'margin-bottom', '0px' ); } if ( $css->is_number( $attributes['topMargin'] ) || $css->is_number( $attributes['bottomMargin'] ) || $css->is_number( $attributes['topMarginT'] ) || $css->is_number( $attributes['bottomMarginT'] ) || $css->is_number( $attributes['topMarginM'] ) || $css->is_number( $attributes['bottomMarginM'] ) ) { if ( $css->is_number( $attributes['topMargin'] ) ) { $css->add_property( 'margin-top', $attributes['topMargin'] . ( ! empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['bottomMargin'] ) ) { $css->add_property( 'margin-bottom', $attributes['bottomMargin'] . ( ! empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' ) ); } $css->set_media_state( 'tablet' ); if ( $css->is_number( $attributes['topMarginT'] ) ) { $css->add_property( 'margin-top', $attributes['topMarginT'] . ( ! empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['bottomMarginT'] ) ) { $css->add_property( 'margin-bottom', $attributes['bottomMarginT'] . ( ! empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' ) ); } $css->set_media_state( 'mobile' ); if ( $css->is_number( $attributes['topMarginM'] ) ) { $css->add_property( 'margin-top', $attributes['topMarginM'] . ( ! empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['bottomMarginM'] ) ) { $css->add_property( 'margin-bottom', $attributes['bottomMarginM'] . ( ! empty( $attributes['marginUnit'] ) ? $attributes['marginUnit'] : 'px' ) ); } $css->set_media_state( 'desktop' ); } else { $args = array( 'unit_key' => 'marginUnit', ); $css->render_measure_output( $attributes, 'margin', 'margin', $args ); } // Vertical Alignment. $css->set_selector( $inner_selector ); if ( ! $updated_version && ( ( ! empty( $attributes['topSep'] ) && 'none' !== $attributes['topSep'] ) || ( ! empty( $attributes['bottomSep'] ) && 'none' !== $attributes['bottomSep'] ) ) ) { $css->add_property( 'z-index', '10' ); $css->add_property( 'position', 'relative' ); } if ( ! empty( $attributes['verticalAlignment'] ) ) { switch ( $attributes['verticalAlignment'] ) { case 'middle': $css->add_property( 'align-content', 'center' ); $css->set_selector( ':where(' . $inner_selector . ') > .wp-block-kadence-column' ); $css->add_property( 'justify-content', 'center' ); $css->set_selector( $inner_selector ); break; case 'bottom': $css->add_property( 'align-content', 'end' ); $css->set_selector( ':where(' . $inner_selector . ') > .wp-block-kadence-column' ); $css->add_property( 'justify-content', 'end' ); $css->set_selector( $inner_selector ); break; case 'top': $css->add_property( 'align-content', 'start' ); $css->set_selector( ':where(' . $inner_selector . ') > .wp-block-kadence-column' ); $css->add_property( 'justify-content', 'start' ); $css->set_selector( $inner_selector ); break; } } // Gutter. $css->render_row_gap( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'column-gap', 'customGutter', 'gutterType' ); $css->render_row_gap( $attributes, array( 'collapseGutter', 'tabletRowGutter', 'mobileRowGutter' ), 'row-gap', 'customRowGutter', 'rowGutterType' ); // Max Width. if ( isset( $attributes['inheritMaxWidth'] ) && true === $attributes['inheritMaxWidth'] ) { global $content_width; if ( isset( $content_width ) ) { if ( class_exists( 'Kadence\Theme' ) ) { $css->add_property( 'max-width', 'var( --global-content-width, ' . absint( $content_width ) . 'px )' ); $css->add_property( 'padding-left', 'var(--global-content-edge-padding)' ); $css->add_property( 'padding-right', 'var(--global-content-edge-padding)' ); } else { $css->add_property( 'max-width', absint( $content_width ) . 'px' ); } } else { $css->add_property( 'max-width', 'var(--wp--style--global--content-size)' ); } } else { if ( $css->is_number( $attributes['maxWidth'] ) ) { $css->add_property( 'max-width', $attributes['maxWidth'] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) ); $css->add_property( 'margin-left', 'auto' ); $css->add_property( 'margin-right', 'auto' ); } if ( $css->is_number( $attributes['responsiveMaxWidth'][0] ) ) { $css->set_media_state( 'tablet' ); $css->add_property( 'max-width', $attributes['responsiveMaxWidth'][0] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) ); $css->add_property( 'margin-left', 'auto' ); $css->add_property( 'margin-right', 'auto' ); $css->set_media_state( 'desktop' ); } if ( $css->is_number( $attributes['responsiveMaxWidth'][1] ) ) { $css->set_media_state( 'mobile' ); $css->add_property( 'max-width', $attributes['responsiveMaxWidth'][1] . ( ! empty( $attributes['maxWidthUnit'] ) ? $attributes['maxWidthUnit'] : 'px' ) ); $css->add_property( 'margin-left', 'auto' ); $css->add_property( 'margin-right', 'auto' ); $css->set_media_state( 'desktop' ); } } // Padding, check for old attributes and use if present. if ( empty( $attributes['kbVersion'] ) ) { // Add old defaults back in. $css->add_property( 'padding-top', 'var( --global-kb-row-default-top, 25px )' ); $css->add_property( 'padding-bottom', 'var( --global-kb-row-default-bottom, 25px )' ); } if ( $css->is_number( $attributes['topPadding'] ) || $css->is_number( $attributes['bottomPadding'] ) || $css->is_number( $attributes['leftPadding'] ) || $css->is_number( $attributes['rightPadding'] ) || $css->is_number( $attributes['topPaddingM'] ) || $css->is_number( $attributes['bottomPaddingM'] ) || $css->is_number( $attributes['leftPaddingM'] ) || $css->is_number( $attributes['rightPaddingM'] ) ) { if ( $css->is_number( $attributes['topPadding'] ) || ( ! empty( $attributes['paddingUnit'] ) && 'px' !== $attributes['paddingUnit'] ) ) { $css->add_property( 'padding-top', ( $css->is_number( $attributes['topPadding'] ) ? $attributes['topPadding'] : '25' ) . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['bottomPadding'] ) || ( ! empty( $attributes['paddingUnit'] ) && 'px' !== $attributes['paddingUnit'] ) ) { $css->add_property( 'padding-bottom', ( $css->is_number( $attributes['bottomPadding'] ) ? $attributes['bottomPadding'] : '25' ) . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['leftPadding'] ) ) { $css->add_property( 'padding-left', $attributes['leftPadding'] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['rightPadding'] ) ) { $css->add_property( 'padding-right', $attributes['rightPadding'] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) ); } $css->set_media_state( 'tablet' ); if ( $css->is_number( $attributes['tabletPadding'][0] ) ) { $css->add_property( 'padding-top', $attributes['tabletPadding'][0] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['tabletPadding'][1] ) ) { $css->add_property( 'padding-right', $attributes['tabletPadding'][1] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['tabletPadding'][2] ) ) { $css->add_property( 'padding-bottom', $attributes['tabletPadding'][2] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['tabletPadding'][3] ) ) { $css->add_property( 'padding-left', $attributes['tabletPadding'][3] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) ); } $css->set_media_state( 'mobile' ); if ( $css->is_number( $attributes['topPaddingM'] ) ) { $css->add_property( 'padding-top', $attributes['topPaddingM'] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['bottomPaddingM'] ) ) { $css->add_property( 'padding-bottom', $attributes['bottomPaddingM'] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['leftPaddingM'] ) ) { $css->add_property( 'padding-left', $attributes['leftPaddingM'] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['rightPaddingM'] ) ) { $css->add_property( 'padding-right', $attributes['rightPaddingM'] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ) ); } $css->set_media_state( 'desktop' ); } else { $args = array( 'unit_key' => 'paddingUnit', ); // If no padding is set, use the default. if ( ! isset( $attributes['padding'] ) ) { // $attributes['padding'] = [ // 'sm', '', 'sm', '' // ]; $css->add_property( 'padding-top', 'var( --global-kb-row-default-top, var(--global-kb-spacing-sm, 1.5rem) )' ); $css->add_property( 'padding-bottom', 'var( --global-kb-row-default-bottom, var(--global-kb-spacing-sm, 1.5rem) )' ); } $css->render_measure_output( $attributes, 'padding', 'padding', $args ); } // Min Height. if ( ! empty( $attributes['minHeight'] ) ) { $css->add_property( 'min-height', $attributes['minHeight'] . ( ! empty( $attributes['minHeightUnit'] ) ? $attributes['minHeightUnit'] : 'px' ) ); } if ( $css->is_number( $attributes['minHeightTablet'] ) ) { $css->set_media_state( 'tablet' ); $css->add_property( 'min-height', $attributes['minHeightTablet'] . ( ! empty( $attributes['minHeightUnit'] ) ? $attributes['minHeightUnit'] : 'px' ) ); $css->set_media_state( 'desktop' ); } if ( $css->is_number( $attributes['minHeightMobile'] ) ) { $css->set_media_state( 'mobile' ); $css->add_property( 'min-height', $attributes['minHeightMobile'] . ( ! empty( $attributes['minHeightUnit'] ) ? $attributes['minHeightUnit'] : 'px' ) ); $css->set_media_state( 'desktop' ); } // Layout. $columns = ( ! empty( $attributes['columns'] ) ? $attributes['columns'] : 2 ); $layout = ( ! empty( $attributes['colLayout'] ) ? $attributes['colLayout'] : 'equal' ); $column1 = ( ! empty( $attributes['firstColumnWidth'] ) ? $attributes['firstColumnWidth'] : '' ); $column2 = ( ! empty( $attributes['secondColumnWidth'] ) ? $attributes['secondColumnWidth'] : '' ); $column3 = ( ! empty( $attributes['thirdColumnWidth'] ) ? $attributes['thirdColumnWidth'] : '' ); $column4 = ( ! empty( $attributes['fourthColumnWidth'] ) ? $attributes['fourthColumnWidth'] : '' ); $column5 = ( ! empty( $attributes['fifthColumnWidth'] ) ? $attributes['fifthColumnWidth'] : '' ); $column6 = ( ! empty( $attributes['sixthColumnWidth'] ) ? $attributes['sixthColumnWidth'] : '' ); $column1_tablet = ( ! empty( $attributes['firstColumnWidthTablet'] ) ? $attributes['firstColumnWidthTablet'] : '' ); $column2_tablet = ( ! empty( $attributes['secondColumnWidthTablet'] ) ? $attributes['secondColumnWidthTablet'] : '' ); $column3_tablet = ( ! empty( $attributes['thirdColumnWidthTablet'] ) ? $attributes['thirdColumnWidthTablet'] : '' ); $column4_tablet = ( ! empty( $attributes['fourthColumnWidthTablet'] ) ? $attributes['fourthColumnWidthTablet'] : '' ); $column5_tablet = ( ! empty( $attributes['fifthColumnWidthTablet'] ) ? $attributes['fifthColumnWidthTablet'] : '' ); $column6_tablet = ( ! empty( $attributes['sixthColumnWidthTablet'] ) ? $attributes['sixthColumnWidthTablet'] : '' ); $column1_mobile = ( ! empty( $attributes['firstColumnWidthMobile'] ) ? $attributes['firstColumnWidthMobile'] : '' ); $column2_mobile = ( ! empty( $attributes['secondColumnWidthMobile'] ) ? $attributes['secondColumnWidthMobile'] : '' ); $column3_mobile = ( ! empty( $attributes['thirdColumnWidthMobile'] ) ? $attributes['thirdColumnWidthMobile'] : '' ); $column4_mobile = ( ! empty( $attributes['fourthColumnWidthMobile'] ) ? $attributes['fourthColumnWidthMobile'] : '' ); $column5_mobile = ( ! empty( $attributes['fifthColumnWidthMobile'] ) ? $attributes['fifthColumnWidthMobile'] : '' ); $column6_mobile = ( ! empty( $attributes['sixthColumnWidthMobile'] ) ? $attributes['sixthColumnWidthMobile'] : '' ); $collapse_layouts = array( 'row', 'two-grid', 'three-grid', 'last-row', 'first-row' ); $has_custom_widths = $this->has_custom_widths( $columns, $column1, $column2, $column3, $column4, $column5, $column6 ); $has_custom_widths_tablet = $this->has_custom_widths( $columns, $column1_tablet, $column2_tablet, $column3_tablet, $column4_tablet, $column5_tablet, $column6_tablet ); $has_custom_widths_mobile = $this->has_custom_widths( $columns, $column1_mobile, $column2_mobile, $column3_mobile, $column4_mobile, $column5_mobile, $column6_mobile ); //base desktop layout. $grid_layout = $this->get_template_columns( $css, $columns, $layout, $inner_selector, $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'desktop', 'customGutter', 'gutterType' ), $column1, $column2, $column3, $column4, $column5, $column6 ); $css->add_property( 'grid-template-columns', $grid_layout ); //Desktop ordering if ( ! empty( $attributes['collapseOrder'] ) && 'left-to-right' !== $attributes['collapseOrder'] && in_array( $layout, $collapse_layouts ) ) { $css->set_media_state( 'tablet' ); foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . $item_count . ')' ); $css->add_property( 'order', ( $columns - $item_count + 1 ) ); } // Row Two. foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns ) . ')' ); $css->add_property( 'order', ( $columns - $item_count + 11 ) ); } // Row Three. foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns ) . ')' ); $css->add_property( 'order', ( $columns - $item_count + 21 ) ); } // Row Four. foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns + $columns ) . ')' ); $css->add_property( 'order', ( $columns - $item_count + 31 ) ); } $css->set_media_state( 'desktop' ); } //Tablet layout if ( empty( $attributes['tabletLayout'] ) && ! empty( $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'tablet', 'customGutter', 'gutterType' ) ) ) { //no tablet layout, but we have a tablet guttter width, so render the inherited column layout from desktop, potentially with custom widths. $css->set_media_state( 'tablet' ); $css->set_selector( $inner_selector ); //if no custom widths, need to use desktop widths if ( $has_custom_widths_tablet ) { $grid_layout = $this->get_template_columns( $css, $columns, $layout, $inner_selector, $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'tablet', 'customGutter', 'gutterType' ), $column1_tablet, $column2_tablet, $column3_tablet, $column4_tablet, $column5_tablet, $column6_tablet ); } else { $grid_layout = $this->get_template_columns( $css, $columns, $layout, $inner_selector, $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'tablet', 'customGutter', 'gutterType' ), $column1, $column2, $column3, $column4, $column5, $column6 ); } $css->add_property( 'grid-template-columns', $grid_layout ); } if ( ! empty( $attributes['tabletLayout'] ) || $column1_tablet ) { //use tablet layout. Potentially with custom widths $layout = ( ! empty( $attributes['colLayout'] ) ? $attributes['colLayout'] : 'equal' ); $tabletLayout = ( ! empty( $attributes['tabletLayout'] ) && $attributes['tabletLayout'] !== 'inherit' ? $attributes['tabletLayout'] : $layout ); $css->set_media_state( 'tablet' ); $css->set_selector( $inner_selector ); $grid_layout = $this->get_template_columns( $css, $columns, $tabletLayout, $inner_selector, $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'tablet', 'customGutter', 'gutterType' ), $column1_tablet, $column2_tablet, $column3_tablet, $column4_tablet, $column5_tablet, $column6_tablet ); $css->add_property( 'grid-template-columns', $grid_layout ); //tablet ordering if ( ! empty( $attributes['collapseOrder'] ) && 'left-to-right' !== $attributes['collapseOrder'] && in_array( $tabletLayout, $collapse_layouts ) ) { foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . $item_count . ')' ); $css->add_property( 'order', ( $columns - $item_count + 1 ) ); } // Row Two. foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns ) . ')' ); $css->add_property( 'order', ( $columns - $item_count + 11 ) ); } // Row Three. foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns ) . ')' ); $css->add_property( 'order', ( $columns - $item_count + 21 ) ); } // Row Four. foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns + $columns ) . ')' ); $css->add_property( 'order', ( $columns - $item_count + 31 ) ); } } $css->set_media_state( 'desktop' ); } elseif ( $columns > 4 ) { //If no tablet layout and more than 4 columns use mobile layout. (this does not match editor behavior) $collapse_tab_layout = ( ! empty( $attributes['mobileLayout'] ) ? $attributes['mobileLayout'] : 'row' ); $css->set_media_state( 'tablet' ); $css->set_selector( $inner_selector ); $grid_layout = $this->get_template_columns( $css, $columns, $collapse_tab_layout, $inner_selector, $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'tablet', 'customGutter', 'gutterType' ), $column1_mobile, $column2_mobile, $column3_mobile, $column4_mobile, $column5_mobile, $column6_mobile ); $css->add_property( 'grid-template-columns', $grid_layout ); //tablet collapse ordering if ( ! empty( $attributes['collapseOrder'] ) && 'left-to-right' !== $attributes['collapseOrder'] && in_array( $collapse_tab_layout, $collapse_layouts ) ) { foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . $item_count . ')' ); $css->add_property( 'order', ( $columns - $item_count + 1 ) ); } // Row Two. foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns ) . ')' ); $css->add_property( 'order', ( $columns - $item_count + 11 ) ); } // Row Three. foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns ) . ')' ); $css->add_property( 'order', ( $columns - $item_count + 21 ) ); } // Row Four. foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns + $columns ) . ')' ); $css->add_property( 'order', ( $columns - $item_count + 31 ) ); } } $css->set_media_state( 'desktop' ); } //mobile layout $mobile_layout = ( ! empty( $attributes['mobileLayout'] ) ? $attributes['mobileLayout'] : 'row' ); $css->set_media_state( 'mobile' ); $css->set_selector( $inner_selector ); $grid_layout = $this->get_template_columns( $css, $columns, $mobile_layout, $inner_selector, $css->render_row_gap_property( $attributes, array( 'columnGutter', 'tabletGutter', 'mobileGutter' ), 'mobile', 'customGutter', 'gutterType' ), $column1_mobile, $column2_mobile, $column3_mobile, $column4_mobile, $column5_mobile, $column6_mobile ); $css->add_property( 'grid-template-columns', $grid_layout ); //mobile ordering if ( ! empty( $attributes['collapseOrder'] ) && 'left-to-right' !== $attributes['collapseOrder'] && in_array( $mobile_layout, $collapse_layouts ) ) { foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . $item_count . ')' ); $css->add_property( 'order', ( $columns - $item_count + 1 ) ); } // Row Two. foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns ) . ')' ); $css->add_property( 'order', ( $columns - $item_count + 11 ) ); } // Row Three. foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns ) . ')' ); $css->add_property( 'order', ( $columns - $item_count + 21 ) ); } // Row Four. foreach ( range( 1, $columns ) as $item_count ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(' . ( $item_count + $columns + $columns + $columns ) . ')' ); $css->add_property( 'order', ( $columns - $item_count + 31 ) ); } } $css->set_media_state( 'desktop' ); if ( isset( $attributes['inheritMaxWidth'] ) && true === $attributes['inheritMaxWidth'] && ! empty( $attributes['align'] ) && 'full' === $attributes['align'] && 2 === $columns && 'row' !== $layout && ( ( isset( $attributes['breakoutLeft'] ) && true === $attributes['breakoutLeft'] ) || ( isset( $attributes['breakoutRight'] ) && true === $attributes['breakoutRight'] ) ) ) { global $content_width; if ( isset( $content_width ) ) { if ( class_exists( 'Kadence\Theme' ) ) { $inherit_content_width = 'var( --global-content-width, ' . absint( $content_width ) . 'px )'; } else { $inherit_content_width = absint( $content_width ) . 'px'; } } else { $inherit_content_width = 'var(--wp--style--global--content-size)'; } $padding_left = '0px'; $padding_right = '0px'; if ( class_exists( 'Kadence\Theme' ) ) { $padding_left = 'var(--global-content-edge-padding)'; $padding_right = 'var(--global-content-edge-padding)'; } if ( isset( $attributes['padding'][1] ) && $css->is_number( $attributes['padding'][1] ) ) { $padding_right = $attributes['padding'][1] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ); } else if ( isset( $attributes['padding'][1] ) && $css->is_variable_value( $attributes['padding'][1] ) ) { $padding_right = $css->get_variable_value( $attributes['padding'][1] ); } if ( isset( $attributes['padding'][3] ) && $css->is_number( $attributes['padding'][3] ) ) { $padding_left = $attributes['padding'][3] . ( ! empty( $attributes['paddingUnit'] ) ? $attributes['paddingUnit'] : 'px' ); } else if ( isset( $attributes['padding'][3] ) && $css->is_variable_value( $attributes['padding'][3] ) ) { $padding_left = $css->get_variable_value( $attributes['padding'][3] ); } $css->set_selector( $base_selector ); $css->add_property( '--breakout-negative-margin-right', 'calc( ( ( ( var(--global-vw, 100vw) - ( ' . $inherit_content_width . ' - ( ' . $padding_right . '*2 ) ) ) / 2 ) *-1) + -1px)' ); $css->add_property( '--breakout-negative-margin-left', 'calc( ( ( ( var(--global-vw, 100vw) - ( ' . $inherit_content_width . ' - ( ' . $padding_left . '*2 ) ) ) / 2 ) *-1) + -1px)' ); if ( apply_filters( 'kadence_blocks_css_output_media_queries', true ) ) { $css->set_media_state( 'desktopOnly' ); } if ( ( isset( $attributes['breakoutLeft'] ) && true === $attributes['breakoutLeft'] ) ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(1)' ); $css->add_property( 'margin-inline-start', 'calc( ' . $padding_left . ' *-1 )' ); } if ( ( isset( $attributes['breakoutRight'] ) && true === $attributes['breakoutRight'] ) ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(2)' ); $css->add_property( 'margin-inline-end', 'calc( ' . $padding_right . ' *-1 )' ); } $css->set_media_state( 'desktop' ); if ( apply_filters( 'kadence_blocks_css_output_media_queries', true ) ) { if ( isset( $content_width ) && ! empty( $content_width ) ) { $css->start_media_query( '(min-width:' . absint( $content_width ) . 'px)' ); if ( ( isset( $attributes['breakoutLeft'] ) && true === $attributes['breakoutLeft'] ) ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(1):not(.specificity)' ); $css->add_property( 'margin-inline-start', 'var(--breakout-negative-margin-left)' ); } if ( ( isset( $attributes['breakoutRight'] ) && true === $attributes['breakoutRight'] ) ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(2):not(.specificity)' ); $css->add_property( 'margin-inline-end', 'var(--breakout-negative-margin-right)' ); } $css->stop_media_query(); } else { $css->set_media_state( 'desktopOnly' ); if ( ( isset( $attributes['breakoutLeft'] ) && true === $attributes['breakoutLeft'] ) ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(1)' ); $css->add_property( 'margin-inline-start', 'var(--breakout-negative-margin-left)' ); } if ( ( isset( $attributes['breakoutRight'] ) && true === $attributes['breakoutRight'] ) ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(2)' ); $css->add_property( 'margin-inline-end', 'var(--breakout-negative-margin-right)' ); } $css->set_media_state( 'desktop' ); } } else { if ( ( isset( $attributes['breakoutLeft'] ) && true === $attributes['breakoutLeft'] ) ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(1):not(.specificity)' ); $css->add_property( 'margin-inline-start', 'var(--breakout-negative-margin-left, calc( ' . $padding_left . ' *-1 ) )' ); } if ( ( isset( $attributes['breakoutRight'] ) && true === $attributes['breakoutRight'] ) ) { $css->set_selector( $inner_selector . ' > .wp-block-kadence-column:nth-of-type(2):not(.specificity)' ); $css->add_property( 'margin-inline-end', 'var(--breakout-negative-margin-right, calc( ' . $padding_right . ' *-1 ))' ); } } $css->set_media_state( 'tabletOnly' ); if ( ( isset( $attributes['breakoutLeft'] ) && true === $attributes['breakoutLeft'] ) ) { $css->set_selector( $inner_selector . ':not(.kt-tab-layout-row) > .wp-block-kadence-column:nth-of-type(1)' ); $css->add_property( 'margin-inline-start', 'calc( ' . $padding_left . ' *-1 )' ); } if ( ( isset( $attributes['breakoutRight'] ) && true === $attributes['breakoutRight'] ) ) { $css->set_selector( $inner_selector . ':not(.kt-tab-layout-row) > .wp-block-kadence-column:nth-of-type(2)' ); $css->add_property( 'margin-inline-end', 'calc( ' . $padding_right . ' *-1 )' ); } $css->set_media_state( 'desktop' ); } // Border radius. $css->set_selector( $base_selector ); $css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array( 'unit_key' => 'borderRadiusUnit' ) ); $has_radius = false; if ( isset( $attributes['borderRadius'][0] ) && $css->is_number( $attributes['borderRadius'][0] ) && 0 !== $attributes['borderRadius'][0] ) { $has_radius = true; } if ( isset( $attributes['borderRadius'][1] ) && $css->is_number( $attributes['borderRadius'][1] ) && 0 !== $attributes['borderRadius'][1] ) { $has_radius = true; } if ( isset( $attributes['borderRadius'][2] ) && $css->is_number( $attributes['borderRadius'][2] ) && 0 !== $attributes['borderRadius'][2] ) { $has_radius = true; } if ( isset( $attributes['borderRadius'][3] ) && $css->is_number( $attributes['borderRadius'][3] ) && 0 !== $attributes['borderRadius'][3] ) { $has_radius = true; } if ( $has_radius ) { if ( ! isset( $attributes['borderRadiusOverflow'] ) || ( isset( $attributes['borderRadiusOverflow'] ) && false !== $attributes['borderRadiusOverflow'] ) ) { $css->add_property( 'overflow', 'clip' ); } $css->add_property( 'isolation', 'isolate' ); $css->set_selector( $base_selector . ' > .kt-row-layout-overlay' ); $css->render_measure_output( $attributes, 'borderRadius', 'border-radius', array( 'unit_key' => 'borderRadiusUnit' ) ); } $css->set_selector( $base_selector ); // Box shadow if ( isset( $attributes['displayBoxShadow'] ) && true == $attributes['displayBoxShadow'] ) { if ( isset( $attributes['boxShadow'] ) && is_array( $attributes['boxShadow'] ) && isset( $attributes['boxShadow'][0] ) && is_array( $attributes['boxShadow'][0] ) ) { $css->add_property( 'box-shadow', ( isset( $attributes['boxShadow'][0]['inset'] ) && true === $attributes['boxShadow'][0]['inset'] ? 'inset ' : '' ) . ( isset( $attributes['boxShadow'][0]['hOffset'] ) && is_numeric( $attributes['boxShadow'][0]['hOffset'] ) ? $attributes['boxShadow'][0]['hOffset'] : '0' ) . 'px ' . ( isset( $attributes['boxShadow'][0]['vOffset'] ) && is_numeric( $attributes['boxShadow'][0]['vOffset'] ) ? $attributes['boxShadow'][0]['vOffset'] : '0' ) . 'px ' . ( isset( $attributes['boxShadow'][0]['blur'] ) && is_numeric( $attributes['boxShadow'][0]['blur'] ) ? $attributes['boxShadow'][0]['blur'] : '14' ) . 'px ' . ( isset( $attributes['boxShadow'][0]['spread'] ) && is_numeric( $attributes['boxShadow'][0]['spread'] ) ? $attributes['boxShadow'][0]['spread'] : '0' ) . 'px ' . $css->render_color( ( isset( $attributes['boxShadow'][0]['color'] ) && ! empty( $attributes['boxShadow'][0]['color'] ) ? $attributes['boxShadow'][0]['color'] : '#000000' ), ( isset( $attributes['boxShadow'][0]['opacity'] ) && is_numeric( $attributes['boxShadow'][0]['opacity'] ) ? $attributes['boxShadow'][0]['opacity'] : 0.2 ) ) ); } else { $css->add_property( 'box-shadow', 'rgba(0, 0, 0, 0.2) 0px 0px 14px 0px' ); } } // Border, have to check for old styles first. if ( ! empty( $attributes['border'] ) || ! empty( $attributes['tabletBorder'] ) || ! empty( $attributes['mobileBorder'] ) || $css->is_number( $attributes['borderWidth'][0] ) || $css->is_number( $attributes['borderWidth'][1] ) || $css->is_number( $attributes['borderWidth'][2] ) || $css->is_number( $attributes['borderWidth'][3] ) || $css->is_number( $attributes['tabletBorderWidth'][0] ) || $css->is_number( $attributes['tabletBorderWidth'][1] ) || $css->is_number( $attributes['tabletBorderWidth'][2] ) || $css->is_number( $attributes['tabletBorderWidth'][3] ) || $css->is_number( $attributes['mobileBorderWidth'][0] ) || $css->is_number( $attributes['mobileBorderWidth'][1] ) || $css->is_number( $attributes['mobileBorderWidth'][2] ) || $css->is_number( $attributes['mobileBorderWidth'][3] ) ) { if ( ! empty( $attributes['border'] ) ) { $css->add_property( 'border-color', $css->render_color( $attributes['border'] ) ); } $css->render_measure_output( $attributes, 'borderWidth', 'border-width' ); if ( ! empty( $attributes['tabletBorder'] ) ) { $css->set_media_state( 'tablet' ); $css->add_property( 'border-color', $css->render_color( $attributes['tabletBorder'] ) ); $css->set_media_state( 'desktop' ); } if ( ! empty( $attributes['mobileBorder'] ) ) { $css->set_media_state( 'mobile' ); $css->add_property( 'border-color', $css->render_color( $attributes['mobileBorder'] ) ); $css->set_media_state( 'desktop' ); } } else { $css->render_border_styles( $attributes, 'borderStyle' ); } // Background. $background_type = ! empty( $attributes['backgroundSettingTab'] ) ? $attributes['backgroundSettingTab'] : 'normal'; $css->set_selector( $base_selector ); switch ( $background_type ) { case 'normal': if ( ! empty( $attributes['bgColor'] ) ) { if ( class_exists( 'Kadence\Theme' ) ) { if ( empty( $attributes['bgColorClass'] ) ) { $css->render_color_output( $attributes, 'bgColor', 'background-color' ); } } else if ( strpos( $attributes['bgColor'], 'palette' ) === 0 ) { $css->render_color_output( $attributes, 'bgColor', 'background-color' ); } else if ( empty( $attributes['bgColorClass'] ) ) { $css->render_color_output( $attributes, 'bgColor', 'background-color' ); } } if ( ! empty( $attributes['bgImg'] ) ) { if ( isset( $attributes['bgImgAttachment'] ) ) { if ( 'parallax' === $attributes['bgImgAttachment'] ) { $bg_attach = 'fixed'; } else { $bg_attach = $attributes['bgImgAttachment']; } } else { $bg_attach = 'scroll'; } $css->add_property( 'background-image', sprintf( "url('%s')", $attributes['bgImg'] ) ); $css->add_property( 'background-size', ( isset( $attributes['bgImgSize'] ) ? $attributes['bgImgSize'] : 'cover' ) ); $css->add_property( 'background-position', ( isset( $attributes['bgImgPosition'] ) ? $attributes['bgImgPosition'] : 'center center' ) ); $css->add_property( 'background-attachment', $bg_attach ); $css->add_property( 'background-repeat', ( isset( $attributes['bgImgRepeat'] ) ? $attributes['bgImgRepeat'] : 'no-repeat' ) ); if ( 'fixed' === $bg_attach && ! apply_filters( 'kadence_blocks_attachment_fixed_on_mobile', false ) ) { $css->set_media_state( 'tabletPro' ); $css->add_property( 'background-attachment', 'scroll' ); $css->set_media_state( 'desktop' ); } } break; case 'gradient': if ( ! empty( $attributes['gradient'] ) ) { $css->add_property( 'background-image', $css->render_gradient( $attributes['gradient'] ) ); } break; } // Tablet Background. $tablet_background = ( isset( $attributes['tabletBackground'][0] ) && is_array( $attributes['tabletBackground'][0] ) ? $attributes['tabletBackground'][0] : array() ); if ( isset( $tablet_background['enable'] ) && $tablet_background['enable'] ) { $css->set_media_state( 'tabletPro' ); $css->set_selector( $margin_selector ); $tablet_background_type = ! empty( $tablet_background['type'] ) ? $tablet_background['type'] : 'normal'; switch ( $tablet_background_type ) { case 'normal': if ( ! empty( $tablet_background['bgImg'] ) ) { $bg_selector = 'background-color'; } else { $bg_selector = 'background'; } if ( ! empty( $tablet_background['bgColor'] ) ) { $css->render_color_output( $tablet_background, 'bgColor', $bg_selector ); } if ( ! empty( $tablet_background['bgImg'] ) ) { if ( ! empty( $tablet_background['bgImgAttachment'] ) ) { if ( 'parallax' === $tablet_background['bgImgAttachment'] ) { $bg_attach = 'fixed'; } else { $bg_attach = $tablet_background['bgImgAttachment']; } } else { $bg_attach = 'scroll'; } $is_important = ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && isset( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] && isset( $tablet_background['bgImgAttachment'] ) && 'parallax' !== $tablet_background['bgImgAttachment'] ? '!important' : '' ); if ( isset( $attributes['backgroundInline'] ) && true === $attributes['backgroundInline'] ) { $is_important = '!important'; } $css->add_property( 'background-image', sprintf( "url('%s')", $tablet_background['bgImg'] ) . $is_important ); $css->add_property( 'background-size', ( ! empty( $tablet_background['bgImgSize'] ) ? $tablet_background['bgImgSize'] : 'cover' ) ); $css->add_property( 'background-position', ( ! empty( $tablet_background['bgImgPosition'] ) ? $tablet_background['bgImgPosition'] : 'center center' ) ); $css->add_property( 'background-attachment', $bg_attach ); $css->add_property( 'background-repeat', ( ! empty( $tablet_background['bgImgRepeat'] ) ? $tablet_background['bgImgRepeat'] : 'no-repeat' ) ); } else if ( isset( $tablet_background['forceOverDesk'] ) && $tablet_background['forceOverDesk'] ) { // Force No image for tablet. //$css->set_media_state( 'tabletOnly' ); $css->set_selector( $base_selector ); $css->add_property( 'background-image', 'none !important' ); $css->set_selector( $base_selector . ' [id*="jarallax-container-"]' ); $css->add_property( 'display', 'none !important' ); //$css->set_media_state( 'tablet' ); } if ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] && ! empty( $tablet_background['bgImg'] ) && ! empty( $tablet_background['bgImgAttachment'] ) && 'parallax' !== $tablet_background['bgImgAttachment'] ) { $css->set_selector( $base_selector . ' [id*="jarallax-container-"]' ); $css->add_property( 'display', 'none !important' ); } break; case 'gradient': if ( ! empty( $tablet_background['gradient'] ) ) { $is_important = ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ? '!important' : '' ); if ( isset( $attributes['backgroundInline'] ) && true === $attributes['backgroundInline'] ) { $is_important = '!important'; } $css->add_property( 'background-image', $css->render_gradient( $tablet_background['gradient'] ) . $is_important ); if ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ) { $css->set_selector( $base_selector . ' [id*="jarallax-container-"]' ); $css->add_property( 'display', 'none !important' ); } } break; } if ( 'normal' !== $background_type ) { $css->set_selector( $base_selector . ' .kb-blocks-bg-video-container,' . $base_selector . ' .kb-blocks-bg-slider' ); $css->add_property( 'display', 'none' ); } $css->set_media_state( 'desktop' ); } // Mobile Background. $mobile_background = ( isset( $attributes['mobileBackground'][0] ) && is_array( $attributes['mobileBackground'][0] ) ? $attributes['mobileBackground'][0] : array() ); if ( isset( $mobile_background['enable'] ) && $mobile_background['enable'] ) { $css->set_media_state( 'mobile' ); $css->set_selector( $margin_selector ); $mobile_background_type = ! empty( $mobile_background['type'] ) ? $mobile_background['type'] : 'normal'; switch ( $mobile_background_type ) { case 'normal': if ( ! empty( $mobile_background['bgImg'] ) ) { $bg_selector = 'background-color'; } else { $bg_selector = 'background'; } if ( ! empty( $mobile_background['bgColor'] ) ) { $css->render_color_output( $mobile_background, 'bgColor', $bg_selector ); } if ( ! empty( $mobile_background['bgImg'] ) ) { if ( ! empty( $mobile_background['bgImgAttachment'] ) ) { if ( 'parallax' === $mobile_background['bgImgAttachment'] ) { $bg_attach = 'fixed'; } else { $bg_attach = $mobile_background['bgImgAttachment']; } } else { $bg_attach = 'scroll'; } $is_important = ( isset( $attributes['bgImg'] ) && ! empty( $attributes['bgImg'] ) && isset( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] && isset( $mobile_background['bgImgAttachment'] ) && 'parallax' !== $mobile_background['bgImgAttachment'] ? '!important' : '' ); if ( 'normal' === $mobile_background_type && ! empty( $tablet_background['bgImg'] ) && isset( $tablet_background['bgImgAttachment'] ) && 'parallax' === $tablet_background['bgImgAttachment'] && isset( $mobile_background['bgImgAttachment'] ) && 'parallax' !== $mobile_background['bgImgAttachment'] ) { $is_important = '!important'; } if ( isset( $attributes['backgroundInline'] ) && true === $attributes['backgroundInline'] ) { $is_important = '!important'; } $css->add_property( 'background-image', sprintf( "url('%s')", $mobile_background['bgImg'] ) . $is_important ); $css->add_property( 'background-size', ( ! empty( $mobile_background['bgImgSize'] ) ? $mobile_background['bgImgSize'] : 'cover' ) ); $css->add_property( 'background-position', ( ! empty( $mobile_background['bgImgPosition'] ) ? $mobile_background['bgImgPosition'] : 'center center' ) ); $css->add_property( 'background-attachment', $bg_attach ); $css->add_property( 'background-repeat', ( ! empty( $mobile_background['bgImgRepeat'] ) ? $mobile_background['bgImgRepeat'] : 'no-repeat' ) ); } else if ( isset( $mobile_background['forceOverDesk'] ) && $mobile_background['forceOverDesk'] ) { $css->add_property( 'background-image', 'none !important' ); $css->set_selector( $base_selector . ' [id*="jarallax-container-"]' ); $css->add_property( 'display', 'none !important' ); } if ( ( ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ) || ( 'normal' === $mobile_background_type && ! empty( $tablet_background['bgImg'] ) && isset( $tablet_background['bgImgAttachment'] ) && 'parallax' === $tablet_background['bgImgAttachment'] ) ) && isset( $mobile_background['bgImg'] ) && ! empty( $mobile_background['bgImg'] ) && isset( $mobile_background['bgImgAttachment'] ) && 'parallax' !== $mobile_background['bgImgAttachment'] ) { $css->set_selector( $base_selector . ' [id*="jarallax-container-"]' ); $css->add_property( 'display', 'none !important' ); } break; case 'gradient': if ( ! empty( $mobile_background['gradient'] ) ) { $is_important = ( ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ? '!important' : '' ); if ( 'normal' === $mobile_background_type && ! empty( $tablet_background['bgImg'] ) && isset( $tablet_background['bgImgAttachment'] ) && 'parallax' === $tablet_background['bgImgAttachment'] ) { $is_important = '!important'; } if ( isset( $attributes['backgroundInline'] ) && true === $attributes['backgroundInline'] ) { $is_important = '!important'; } $css->add_property( 'background-image', $css->render_gradient( $mobile_background['gradient'] ) . $is_important ); if ( ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ) || ( 'normal' === $mobile_background_type && ! empty( $tablet_background['bgImg'] ) && isset( $tablet_background['bgImgAttachment'] ) && 'parallax' === $tablet_background['bgImgAttachment'] ) ) { $css->set_selector( $base_selector . ' [id*="jarallax-container-"]' ); $css->add_property( 'display', 'none !important' ); } } break; } if ( 'normal' !== $background_type ) { $css->set_selector( $base_selector . ' .kb-blocks-bg-video-container,' . $base_selector . ' .kb-blocks-bg-slider' ); $css->add_property( 'display', 'none' ); } $css->set_media_state( 'desktop' ); } // Overlay. if ( ! empty( $attributes['overlay'] ) || ! empty( $attributes['overlayBgImg'] ) || ! empty( $attributes['overlaySecond'] ) || ! empty( $attributes['overlayGradient'] ) ) { $css->set_selector( $base_selector . ' > .kt-row-layout-overlay' ); $css->render_opacity_from_100( $attributes, 'overlayOpacity' ); $overlay_type = ! empty( $attributes['currentOverlayTab'] ) ? $attributes['currentOverlayTab'] : 'normal'; switch ( $overlay_type ) { case 'normal': if ( isset( $attributes['overlay'] ) ) { $css->add_property( 'background-color', $css->render_color( $attributes['overlay'], ( isset( $attributes['overlayFirstOpacity'] ) && is_numeric( $attributes['overlayFirstOpacity'] ) ? $attributes['overlayFirstOpacity'] : 1 ) ) ); } if ( ! empty( $attributes['overlayBgImg'] ) ) { if ( isset( $attributes['overlayBgImgAttachment'] ) ) { if ( 'parallax' === $attributes['overlayBgImgAttachment'] ) { $overbg_attach = 'fixed'; } else { $overbg_attach = $attributes['overlayBgImgAttachment']; } } else { $overbg_attach = 'scroll'; } $css->add_property( 'background-image', sprintf( "url('%s')", $attributes['overlayBgImg'] ) ); $css->add_property( 'background-size', ( isset( $attributes['overlayBgImgSize'] ) ? $attributes['overlayBgImgSize'] : 'cover' ) ); $css->add_property( 'background-position', ( isset( $attributes['overlayBgImgPosition'] ) ? $attributes['overlayBgImgPosition'] : 'center center' ) ); $css->add_property( 'background-attachment', $overbg_attach ); $css->add_property( 'background-repeat', ( isset( $attributes['overlayBgImgRepeat'] ) ? $attributes['overlayBgImgRepeat'] : 'no-repeat' ) ); if ( 'fixed' === $overbg_attach && ! apply_filters( 'kadence_blocks_attachment_fixed_on_mobile', false ) ) { $css->set_media_state( 'tabletPro' ); $css->add_property( 'background-attachment', 'scroll' ); $css->set_media_state( 'desktop' ); } } break; case 'gradient': if ( ! empty( $attributes['overlayGradient'] ) ) { $css->add_property( 'background', $css->render_gradient( $attributes['overlayGradient'] ) ); } break; case 'grad': // Old Gradient Support. $type = ( isset( $attributes['overlayGradType'] ) ? $attributes['overlayGradType'] : 'linear' ); if ( 'radial' === $type ) { $angle = ( isset( $attributes['overlayBgImgPosition'] ) ? 'at ' . $attributes['overlayBgImgPosition'] : 'at center center' ); } else { $angle = ( isset( $attributes['overlayGradAngle'] ) ? $attributes['overlayGradAngle'] . 'deg' : '180deg' ); } $loc = ( isset( $attributes['overlayGradLoc'] ) ? $attributes['overlayGradLoc'] : '0' ); $color = ( isset( $attributes['overlay'] ) ? $css->render_color( $attributes['overlay'], ( isset( $attributes['overlayFirstOpacity'] ) && is_numeric( $attributes['overlayFirstOpacity'] ) ? $attributes['overlayFirstOpacity'] : 1 ) ) : 'transparent' ); $locsecond = ( isset( $attributes['overlayGradLocSecond'] ) ? $attributes['overlayGradLocSecond'] : '100' ); $colorsecond = ( isset( $attributes['overlaySecond'] ) ? $css->render_color( $attributes['overlaySecond'], ( isset( $attributes['overlaySecondOpacity'] ) && is_numeric( $attributes['overlaySecondOpacity'] ) ? $attributes['overlaySecondOpacity'] : 1 ) ) : '#00B5E2' ); $css->add_property( 'background-image', $type . '-gradient(' . $angle . ', ' . $color . ' ' . $loc . '%, ' . $colorsecond . ' ' . $locsecond . '%)' ); break; } if ( ! empty( $attributes['overlayBlendMode'] ) && 'none' !== $attributes['overlayBlendMode'] ) { $css->add_property( 'mix-blend-mode', $attributes['overlayBlendMode'] ); } } $tablet_overlay = ( isset( $attributes['tabletOverlay'] ) && is_array( $attributes['tabletOverlay'] ) && isset( $attributes['tabletOverlay'][0] ) && is_array( $attributes['tabletOverlay'][0] ) ? $attributes['tabletOverlay'][0] : array() ); if ( isset( $tablet_overlay['enable'] ) && $tablet_overlay['enable'] ) { $css->set_media_state( 'tablet' ); $css->set_selector( $base_selector . ' > .kt-row-layout-overlay' ); $css->render_opacity_from_100( $tablet_overlay, 'overlayOpacity' ); $overlay_type = ! empty( $tablet_overlay['currentOverlayTab'] ) ? $tablet_overlay['currentOverlayTab'] : 'normal'; switch ( $overlay_type ) { case 'normal': if ( ! empty( $tablet_overlay['overlayBgImg'] ) ) { $bg_selector = 'background-color'; } else { $bg_selector = 'background'; } if ( ! empty( $tablet_overlay['overlay'] ) ) { $css->render_color_output( $tablet_overlay, 'overlay', $bg_selector ); } if ( ! empty( $tablet_overlay['overlayBgImg'] ) ) { if ( ! empty( $tablet_overlay['overlayBgImgAttachment'] ) ) { if ( 'parallax' === $tablet_overlay['overlayBgImgAttachment'] ) { $overbg_attach = 'fixed'; } else { $overbg_attach = $tablet_overlay['overlayBgImgAttachment']; } } else { $overbg_attach = 'scroll'; } $css->add_property( 'background-image', sprintf( "url('%s')", $tablet_overlay['overlayBgImg'] ) ); $css->add_property( 'background-size', ( ! empty( $tablet_overlay['overlayBgImgSize'] ) ? $tablet_overlay['overlayBgImgSize'] : 'cover' ) ); $css->add_property( 'background-position', ( ! empty( $tablet_overlay['overlayBgImgPosition'] ) ? $tablet_overlay['overlayBgImgPosition'] : 'center center' ) ); $css->add_property( 'background-attachment', $overbg_attach ); $css->add_property( 'background-repeat', ( ! empty( $tablet_overlay['overlayBgImgRepeat'] ) ? $tablet_overlay['overlayBgImgRepeat'] : 'no-repeat' ) ); } break; case 'gradient': $css->add_property( 'background', $css->render_gradient( $tablet_overlay['gradient'] ) ); break; case 'grad': // Old Gradient Support. $type = ( ! empty( $tablet_overlay['overlayGradType'] ) ? $tablet_overlay['overlayGradType'] : 'linear' ); if ( 'radial' === $type ) { $angle = ( ! empty( $tablet_overlay['overlayBgImgPosition'] ) ? 'at ' . $tablet_overlay['overlayBgImgPosition'] : 'at center center' ); } else { $angle = ( ! empty( $tablet_overlay['overlayGradAngle'] ) ? $tablet_overlay['overlayGradAngle'] . 'deg' : '180deg' ); } $loc = ( ! empty( $tablet_overlay['overlayGradLoc'] ) ? $tablet_overlay['overlayGradLoc'] : '0' ); $color = ( ! empty( $tablet_overlay['overlay'] ) ? $css->render_color( $tablet_overlay['overlay'] ) : 'transparent' ); $locsecond = ( ! empty( $tablet_overlay['overlayGradLocSecond'] ) ? $tablet_overlay['overlayGradLocSecond'] : '100' ); $colorsecond = ( ! empty( $tablet_overlay['overlaySecond'] ) ? $css->render_color( $tablet_overlay['overlaySecond'] ) : '#00B5E2' ); $css->add_property( 'background-image', $type . '-gradient(' . $angle . ', ' . $color . ' ' . $loc . '%, ' . $colorsecond . ' ' . $locsecond . '%)' ); break; } if ( ! empty( $tablet_overlay['overlayBlendMode'] ) ) { $css->add_property( 'mix-blend-mode', $tablet_overlay['overlayBlendMode'] ); } $css->set_media_state( 'desktop' ); } $mobile_overlay = ( isset( $attributes['mobileOverlay'] ) && is_array( $attributes['mobileOverlay'] ) && isset( $attributes['mobileOverlay'][0] ) && is_array( $attributes['mobileOverlay'][0] ) ? $attributes['mobileOverlay'][0] : array() ); if ( isset( $mobile_overlay['enable'] ) && $mobile_overlay['enable'] ) { $css->set_media_state( 'mobile' ); $css->set_selector( $base_selector . ' > .kt-row-layout-overlay' ); $css->render_opacity_from_100( $mobile_overlay, 'overlayOpacity' ); $overlay_type = ! empty( $mobile_overlay['currentOverlayTab'] ) ? $mobile_overlay['currentOverlayTab'] : 'normal'; switch ( $overlay_type ) { case 'normal': if ( ! empty( $mobile_overlay['overlayBgImg'] ) ) { $bg_selector = 'background-color'; } else { $bg_selector = 'background'; } if ( ! empty( $mobile_overlay['overlay'] ) ) { $css->render_color_output( $mobile_overlay, 'overlay', $bg_selector ); } if ( ! empty( $mobile_overlay['overlayBgImg'] ) ) { if ( ! empty( $mobile_overlay['overlayBgImgAttachment'] ) ) { if ( 'parallax' === $mobile_overlay['overlayBgImgAttachment'] ) { $overbg_attach = 'fixed'; } else { $overbg_attach = $mobile_overlay['overlayBgImgAttachment']; } } else { $overbg_attach = 'scroll'; } $css->add_property( 'background-image', sprintf( "url('%s')", $mobile_overlay['overlayBgImg'] ) ); $css->add_property( 'background-size', ( ! empty( $mobile_overlay['overlayBgImgSize'] ) ? $mobile_overlay['overlayBgImgSize'] : 'cover' ) ); $css->add_property( 'background-position', ( ! empty( $mobile_overlay['overlayBgImgPosition'] ) ? $mobile_overlay['overlayBgImgPosition'] : 'center center' ) ); $css->add_property( 'background-attachment', $overbg_attach ); $css->add_property( 'background-repeat', ( ! empty( $mobile_overlay['overlayBgImgRepeat'] ) ? $mobile_overlay['overlayBgImgRepeat'] : 'no-repeat' ) ); } break; case 'gradient': $css->add_property( 'background', $css->render_gradient( $mobile_overlay['gradient'] ) ); break; case 'grad': $type = ( ! empty( $mobile_overlay['overlayGradType'] ) ? $mobile_overlay['overlayGradType'] : 'linear' ); if ( 'radial' === $type ) { $angle = ( ! empty( $mobile_overlay['overlayBgImgPosition'] ) ? 'at ' . $mobile_overlay['overlayBgImgPosition'] : 'at center center' ); } else { $angle = ( ! empty( $mobile_overlay['overlayGradAngle'] ) ? $mobile_overlay['overlayGradAngle'] . 'deg' : '180deg' ); } $loc = ( ! empty( $mobile_overlay['overlayGradLoc'] ) ? $mobile_overlay['overlayGradLoc'] : '0' ); $color = ( ! empty( $mobile_overlay['overlay'] ) ? $css->render_color( $mobile_overlay['overlay'] ) : 'transparent' ); $locsecond = ( ! empty( $mobile_overlay['overlayGradLocSecond'] ) ? $mobile_overlay['overlayGradLocSecond'] : '100' ); $colorsecond = ( ! empty( $mobile_overlay['overlaySecond'] ) ? $css->render_color( $mobile_overlay['overlaySecond'] ) : '#00B5E2' ); $css->add_property( 'background-image', $type . '-gradient(' . $angle . ', ' . $color . ' ' . $loc . '%, ' . $colorsecond . ' ' . $locsecond . '%)' ); break; } if ( ! empty( $mobile_overlay['overlayBlendMode'] ) ) { $css->add_property( 'mix-blend-mode', $mobile_overlay['overlayBlendMode'] ); } $css->set_media_state( 'desktop' ); } if ( $css->is_number( $attributes['zIndex'] ) ) { if ( ! empty( $attributes['kbVersion'] ) && $attributes['kbVersion'] > 1 ) { $css->set_selector( $base_selector ); } else { $css->set_selector( $inner_selector ); } $css->add_property( 'z-index', $attributes['zIndex'] ); $css->add_property( 'position', 'relative' ); } // Text Color. if ( ! empty( $attributes['textColor'] ) ) { $css->set_selector( $base_selector . ' ,' . $base_selector . ' h1,' . $base_selector . ' h2,' . $base_selector . ' h3,' . $base_selector . ' h4,' . $base_selector . ' h5,' . $base_selector . ' h6' ); $css->render_color_output( $attributes, 'textColor', 'color' ); } if ( ! empty( $attributes['linkColor'] ) ) { $css->set_selector( $base_selector . ' a' ); $css->render_color_output( $attributes, 'linkColor', 'color' ); } if ( ! empty( $attributes['linkHoverColor'] ) ) { $css->set_selector( $base_selector . ' a:hover' ); $css->render_color_output( $attributes, 'linkHoverColor', 'color' ); } // Bottom Sep. if ( isset( $attributes['bottomSep'] ) && 'none' != $attributes['bottomSep'] ) { $bottomSepUnit = ! empty( $attributes['bottomSepHeightUnit'] ) ? $attributes['bottomSepHeightUnit'] : 'px'; $bottomSepHeight = ! empty( $attributes['bottomSepHeight'] ) ? $attributes['bottomSepHeight'] : '100'; $css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep' ); $css->add_property( 'height', $bottomSepHeight . $bottomSepUnit ); if ( isset( $attributes['bottomSepWidth'] ) ) { $css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep svg' ); $css->add_property( 'width', $attributes['bottomSepWidth'] . '%' ); } if ( ! empty( $attributes['bottomSepColor'] ) ) { $css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep svg' ); $css->add_property( 'fill', $css->render_color( $attributes['bottomSepColor'] ) . '!important' ); } if ( isset( $attributes['bottomSepHeightTab'] ) || isset( $attributes['bottomSepWidthTab'] ) ) { $css->set_media_state( 'tablet' ); if ( isset( $attributes['bottomSepHeightTab'] ) ) { $css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep' ); $css->add_property( 'height', $attributes['bottomSepHeightTab'] . $bottomSepUnit ); } if ( isset( $attributes['bottomSepWidthTab'] ) ) { $css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep svg' ); $css->add_property( 'width', $attributes['bottomSepWidthTab'] . '%' ); } $css->set_media_state( 'desktop' ); } if ( isset( $attributes['bottomSepHeightMobile'] ) || isset( $attributes['bottomSepWidthMobile'] ) ) { $css->set_media_state( 'mobile' ); if ( isset( $attributes['bottomSepHeightMobile'] ) ) { $css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep' ); $css->add_property( 'height', $attributes['bottomSepHeightMobile'] . $bottomSepUnit ); } if ( isset( $attributes['bottomSepWidthMobile'] ) ) { $css->set_selector( $base_selector . ' .kt-row-layout-bottom-sep svg' ); $css->add_property( 'width', $attributes['bottomSepWidthMobile'] . '%' ); } $css->set_media_state( 'desktop' ); } } // Top Sep. if ( isset( $attributes['topSep'] ) && 'none' != $attributes['topSep'] ) { $topSepUnit = !empty( $attributes['topSepHeightUnit']) ? $attributes['topSepHeightUnit'] : 'px'; $topSepHeight = !empty ($attributes['topSepHeight']) ? $attributes['topSepHeight'] : '100'; $css->set_selector( $base_selector . ' .kt-row-layout-top-sep' ); $css->add_property( 'height', $topSepHeight . $topSepUnit ); if ( $css->is_number( $attributes['topSepWidth'] ) ) { $css->set_selector( $base_selector . ' .kt-row-layout-top-sep svg' ); $css->add_property( 'width', $attributes['topSepWidth'] . '%' ); } if ( ! empty( $attributes['topSepColor'] ) ) { $css->set_selector( $base_selector . ' .kt-row-layout-top-sep svg' ); $css->add_property( 'fill', $css->render_color( $attributes['topSepColor'] ) . '!important' ); } $css->set_media_state( 'tablet' ); if ( $css->is_number( $attributes['topSepHeightTab'] ) ) { $css->set_selector( $base_selector . ' .kt-row-layout-top-sep' ); $css->add_property( 'height', $attributes['topSepHeightTab'] . $topSepUnit ); } if ( $css->is_number( $attributes['topSepWidthTab'] ) ) { $css->set_selector( $base_selector . ' .kt-row-layout-top-sep svg' ); $css->add_property( 'width', $attributes['topSepWidthTab'] . '%' ); } $css->set_media_state( 'mobile' ); if ( $css->is_number( $attributes['topSepHeightMobile'] ) ) { $css->set_selector( $base_selector . ' .kt-row-layout-top-sep' ); $css->add_property( 'height', $attributes['topSepHeightMobile'] . $topSepUnit ); } if ( $css->is_number( $attributes['topSepWidthMobile'] ) ) { $css->set_selector( $base_selector . ' .kt-row-layout-top-sep svg' ); $css->add_property( 'width', $attributes['topSepWidthMobile'] . '%' ); } $css->set_media_state( 'desktop' ); } if ( isset( $attributes['vsdesk'] ) && $attributes['vsdesk'] ) { $css->set_media_state( 'desktopOnly' ); $css->set_selector( $base_selector ); $css->add_property( 'display', 'none !important' ); } if ( isset( $attributes['vstablet'] ) && $attributes['vstablet'] ) { $css->set_media_state( 'tabletOnly' ); $css->set_selector( $base_selector ); $css->add_property( 'display', 'none !important' ); } if ( isset( $attributes['vsmobile'] ) && $attributes['vsmobile'] ) { $css->set_media_state( 'mobile' ); $css->set_selector( $base_selector ); $css->add_property( 'display', 'none !important' ); } $css->set_media_state( 'desktop' ); // Background Slider Pause Button Styles. if ( isset( $attributes['backgroundSettingTab'] ) && 'slider' === $attributes['backgroundSettingTab'] ) { $arrow_style = ! empty( $attributes['backgroundSliderSettings'][0]['arrowStyle'] ) ? $attributes['backgroundSliderSettings'][0]['arrowStyle'] : 'none'; $show_pause_button = isset( $attributes['backgroundSliderSettings'][0]['showPauseButton'] ) ? $attributes['backgroundSliderSettings'][0]['showPauseButton'] : false; if ( $show_pause_button ) { $css->set_selector( $base_selector . ' .kb-blocks-bg-slider .kb-gallery-pause-button' ); // Set styles based on arrow style. switch ( $arrow_style ) { case 'blackonlight': $css->add_property( 'background-color', 'rgba(255, 255, 255, 0.8)' ); $css->add_property( 'color', '#000' ); $css->add_property( 'border', 'none' ); break; case 'outlineblack': $css->add_property( 'background-color', 'transparent' ); $css->add_property( 'color', '#000' ); $css->add_property( 'border', '2px solid #000' ); break; case 'outlinewhite': $css->add_property( 'background-color', 'transparent' ); $css->add_property( 'color', '#fff' ); $css->add_property( 'border', '2px solid #fff' ); break; case 'none': default: $css->add_property( 'background-color', 'rgba(0, 0, 0, 0.8)' ); $css->add_property( 'color', '#fff' ); $css->add_property( 'border', 'none' ); break; } } } if ( isset( $attributes['kadenceBlockCSS'] ) && ! empty( $attributes['kadenceBlockCSS'] ) ) { $css->add_css_string( str_replace( 'selector', $base_selector, $attributes['kadenceBlockCSS'] ) ); } return $css->css_output(); } /** * Render svg divider. * * @param string $divider the divider slug. * @param string $location - top or bottom. */ public function get_divider_render( $divider, $location ) { $paths = array(); $paths['ct'] = ''; $paths['cti'] = ''; $paths['ctd'] = ''; $paths['ctdi'] = ''; $paths['sltl'] = ''; $paths['sltli'] = ''; $paths['sltr'] = ''; $paths['sltri'] = ''; $paths['crv'] = ''; $paths['crvi'] = ''; $paths['crvl'] = ''; $paths['crvli'] = ''; $paths['crvr'] = ''; $paths['crvri'] = ''; $paths['wave'] = ''; $paths['wavei'] = ''; $paths['waves'] = ''; $paths['wavesi'] = ''; $paths['mtns'] = ''; $paths['littri'] = ''; $paths['littrii'] = ''; $paths['threelevels'] = ''; $paths['threelevelsi'] = ''; $paths = apply_filters( 'kadence_blocks_row_divider_paths', $paths, $location ); $output = ''; if ( isset( $paths[ $divider ] ) ) { $output .= '
'; $output .= ''; $output .= $paths[ $divider ]; $output .= ''; $output .= '
'; } return $output; } /** * Checks to see if we should render an overlay. * * @param array $attributes for the block. */ public function has_overlay( $attributes ) { $has_overlay = false; $overlay_type = ( ! empty( $attributes['currentOverlayTab'] ) ? $attributes['currentOverlayTab'] : 'normal' ); switch ( $overlay_type ) { case 'normal': $has_overlay = ( ! empty( $attributes['overlay'] ) || ! empty( $attributes['overlayBgImg'] ) ? true : false ); break; case 'gradient': $has_overlay = ( ! empty( $attributes['overlayGradient'] ) ? true : false ); break; case 'grad': $has_overlay = ( ! empty( $attributes['overlay'] ) ? true : false ); break; } if ( ! $has_overlay ) { $tablet_overlay = ( isset( $attributes['tabletOverlay'] ) && is_array( $attributes['tabletOverlay'] ) && isset( $attributes['tabletOverlay'][0] ) && is_array( $attributes['tabletOverlay'][0] ) ? $attributes['tabletOverlay'][0] : array() ); if ( isset( $tablet_overlay['enable'] ) && $tablet_overlay['enable'] ) { $tablet_overlay_type = ( ! empty( $tablet_overlay['currentOverlayTab'] ) ? $tablet_overlay['currentOverlayTab'] : 'normal' ); switch ( $tablet_overlay_type ) { case 'normal': $has_overlay = ( ! empty( $tablet_overlay['overlay'] ) || ! empty( $tablet_overlay['overlayBgImg'] ) ? true : false ); break; case 'gradient': $has_overlay = ( ! empty( $tablet_overlay['gradient'] ) ? true : false ); break; case 'grad': $has_overlay = ( ! empty( $tablet_overlay['overlay'] ) ? true : false ); break; } } } if ( ! $has_overlay ) { $mobile_overlay = ( isset( $attributes['mobileOverlay'] ) && is_array( $attributes['mobileOverlay'] ) && isset( $attributes['mobileOverlay'][0] ) && is_array( $attributes['mobileOverlay'][0] ) ? $attributes['mobileOverlay'][0] : array() ); if ( isset( $mobile_overlay['enable'] ) && $mobile_overlay['enable'] ) { $mobile_overlay_type = ( ! empty( $mobile_overlay['currentOverlayTab'] ) ? $mobile_overlay['currentOverlayTab'] : 'normal' ); switch ( $mobile_overlay_type ) { case 'normal': $has_overlay = ( ! empty( $mobile_overlay['overlay'] ) || ! empty( $mobile_overlay['overlayBgImg'] ) ? true : false ); break; case 'gradient': $has_overlay = ( ! empty( $mobile_overlay['gradient'] ) ? true : false ); break; case 'grad': $has_overlay = ( ! empty( $mobile_overlay['overlay'] ) ? true : false ); break; } } } return $has_overlay; } /** * Generates the color output. * * @param string $color any color attribute. * @return string */ public function output_color( $color, $opacity = null ) { if ( empty( $color ) ) { return false; } if ( ! is_array( $color ) && strpos( $color, 'palette' ) === 0 ) { switch ( $color ) { case 'palette2': $fallback = '#2B6CB0'; break; case 'palette3': $fallback = '#1A202C'; break; case 'palette4': $fallback = '#2D3748'; break; case 'palette5': $fallback = '#4A5568'; break; case 'palette6': $fallback = '#718096'; break; case 'palette7': $fallback = '#EDF2F7'; break; case 'palette8': $fallback = '#F7FAFC'; break; case 'palette9': $fallback = '#ffffff'; break; default: $fallback = '#3182CE'; break; } $color = 'var(--global-' . $color . ', ' . $fallback . ')'; } elseif ( isset( $opacity ) && is_numeric( $opacity ) && 1 !== (int) $opacity ) { $color = kadence_blocks_hex2rgba( $color, $opacity ); } return $color; } /** * Renders out the background slider. * * @param array $attributes for the block. */ public function get_slider_render( $attributes ) { if ( empty( $attributes['backgroundSliderCount'] ) || empty( $attributes['backgroundSlider'] ) ) { return ''; } $output = ''; $dot_style = ! empty( $attributes['backgroundSliderSettings'][0]['dotStyle'] ) ? $attributes['backgroundSliderSettings'][0]['dotStyle'] : 'dark'; $arrow_style = ! empty( $attributes['backgroundSliderSettings'][0]['arrowStyle'] ) ? $attributes['backgroundSliderSettings'][0]['arrowStyle'] : 'none'; $tran_speed = ! empty( $attributes['backgroundSliderSettings'][0]['tranSpeed'] ) ? $attributes['backgroundSliderSettings'][0]['tranSpeed'] : 400; $speed = ! empty( $attributes['backgroundSliderSettings'][0]['speed'] ) ? $attributes['backgroundSliderSettings'][0]['speed'] : 7000; $fade = isset( $attributes['backgroundSliderSettings'][0]['fade'] ) ? $attributes['backgroundSliderSettings'][0]['fade'] : true; $auto = isset( $attributes['backgroundSliderSettings'][0]['autoPlay'] ) ? $attributes['backgroundSliderSettings'][0]['autoPlay'] : true; $show_pause_button = isset( $attributes['backgroundSliderSettings'][0]['showPauseButton'] ) ? $attributes['backgroundSliderSettings'][0]['showPauseButton'] : false; $output .= ''; return $output; } /** * Renders out the background video. * * @param array $attributes for the block. */ public function prevent_preload_when_hidden( $attributes ) { if ( ( ( ! empty( $attributes['tabletBackground'][0]['enable'] ) && true == $attributes['tabletBackground'][0]['enable'] ) || ( ! empty( $attributes['mobileBackground'][0]['enable'] ) && true == $attributes['mobileBackground'][0]['enable'] ) ) && apply_filters( 'kadence_blocks_rowlayout_prevent_preload_for_mobile', true ) ) { return true; } return false; } /** * Renders out the background video. * * @param array $attributes for the block. */ public function get_video_render( $attributes ) { if ( empty( $attributes['backgroundVideo'][0]['local'] ) && empty( $attributes['backgroundVideo'][0]['vimeo'] ) && empty( $attributes['backgroundVideo'][0]['youTube'] ) ) { return ''; } $output = ''; $video_attributes = $attributes['backgroundVideo'][0]; $background_video_type = isset( $attributes['backgroundVideoType'] ) && $attributes['backgroundVideoType'] ? $attributes['backgroundVideoType'] : 'local'; $prevent_preload = $this->prevent_preload_when_hidden( $attributes ); if ( 'local' == $background_video_type ) { $video_args = array( 'class' => 'kb-blocks-bg-video', 'id' => 'bg-row-video-' . esc_attr( $attributes['uniqueID'] ), 'playsinline' => '', 'muted' => ( isset( $video_attributes['mute'] ) && false === $video_attributes['mute'] ? 'false' : '' ), 'loop' => ( isset( $video_attributes['loop'] ) && false === $video_attributes['loop'] ? 'false' : '' ), 'src' => $video_attributes['local'], ); } else { $src_base = 'youtube' == $background_video_type ? 'https://www.youtube.com/embed/' : 'https://player.vimeo.com/video/'; $video_id = 'youtube' == $background_video_type ? $video_attributes['youTube'] : $video_attributes['vimeo']; // Vimeo and youtube share a bunch of params, that's convienent. $src_query_string = '?' . http_build_query( array( 'autoplay' => 1, 'controls' => 0, 'mute' => ( isset( $video_attributes['mute'] ) && false === $video_attributes['mute'] ? 0 : 1 ), 'muted' => ( isset( $video_attributes['mute'] ) && false === $video_attributes['mute'] ? 0 : 1 ), 'loop' => ( isset( $video_attributes['loop'] ) && false === $video_attributes['loop'] ? 0 : 1 ), 'playlist' => $video_id, 'disablekb' => 1, 'modestbranding' => 1, 'playsinline' => 1, 'rel' => 0, 'background' => 1, ) ); $video_args = array( 'class' => 'kb-blocks-bg-video ' . $background_video_type, 'id' => 'bg-row-video-' . esc_attr( $attributes['uniqueID'] ), 'src' => $src_base . $video_id . $src_query_string, ); } if ( ! empty( $attributes['bgImg'] ) && 'local' === $background_video_type ) { $video_args['poster'] = $attributes['bgImg']; } if ( $prevent_preload ) { $video_args['preload'] = 'none'; } if ( ! $prevent_preload ) { $video_args['autoplay'] = ''; } if ( isset( $video_args['loop'] ) && $video_args['loop'] == 'false' ) { unset( $video_args['loop'] ); } if ( isset( $video_args['muted'] ) && $video_args['muted'] == 'false' ) { unset( $video_args['muted'] ); } $video_html_attributes = array(); foreach ( $video_args as $key => $value ) { if ( empty( $value ) ) { $video_html_attributes[] = $key; } else { $video_html_attributes[] = $key . '="' . esc_attr( $value ) . '"'; } } $ratio = '16-9'; if ( ! empty( $video_attributes['ratio'] ) ) { $ratio = str_replace( '/', '-', $video_attributes['ratio'] ); } $btns_output = ''; $show_play_pause = ( isset( $video_attributes['btns'] ) && $video_attributes['btns'] ); $show_audio_is_default = ( ! isset( $video_attributes['btnsMute'] ) ); $is_unmuted = ( isset( $video_attributes['mute'] ) && false === $video_attributes['mute'] ); $show_audio = ( $show_audio_is_default && $show_play_pause && $is_unmuted ) || ( isset( $video_attributes['btnsMute'] ) && $video_attributes['btnsMute'] ); if ( $show_play_pause || $show_audio ) { $btns_output .= '
'; if ( $show_play_pause ) { $btns_output .= ''; $btns_output .= ''; } if ( $show_audio ) { $hidden_attrs = 'aria-hidden="true" style="display: none;"'; $unhidden_attrs = 'aria-hidden="false"'; $btns_output .= ''; $btns_output .= ''; } $btns_output .= '
'; } // if ( 'local' == $attributes['backgroundVideoType'] ) { if ( 'local' == $background_video_type ) { $output = sprintf( '
%2$s
', implode( ' ', $video_html_attributes ), $btns_output ); } else { $output = sprintf( '
', $ratio, implode( ' ', $video_html_attributes ) ); } return $output; } /** * Do we have any custom column width for the amount of rows in this block. * * @param mixed $columns The number of columns. * @param mixed $column1 The first column width. * @param mixed $column2 The second column width. * @param mixed $column3 The third column width. * @param mixed $column4 The fourth column width. * @param mixed $column5 The fifth column width. * @param mixed $column6 The sixth column width. */ public function has_custom_widths( $columns, $column1, $column2, $column3, $column4, $column5, $column6 ) { switch( $columns ) { case 1: return !empty($column1); case 2: return !empty($column1) || !empty($column2); case 3: return !empty($column1) || !empty($column2) || !empty($column3); case 4: return !empty($column1) || !empty($column2) || !empty($column3) || !empty($column4); case 5: return !empty($column1) || !empty($column2) || !empty($column3) || !empty($column4) || !empty($column5); case 6: return !empty($column1) || !empty($column2) || !empty($column3) || !empty($column4) || !empty($column5) || !empty($column6); } } /** * Build HTML for dynamic blocks * * @param $attributes * @param $unique_id * @param $content * @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered. * * @return mixed */ public function build_html( $attributes, $unique_id, $content, $block_instance ) { if ( ! empty( $attributes['kbVersion'] ) && $attributes['kbVersion'] > 1 ) { $html_tag = $this->get_html_tag( $attributes, 'htmlTag', 'div', $this->allowed_html_tags ); $outer_classes = array( 'kb-row-layout-wrap', 'kb-row-layout-id' . $unique_id ); $outer_classes[] = ! empty( $attributes['align'] ) ? 'align' . $attributes['align'] : 'alignnone'; if ( isset( $attributes['vsdesk'] ) && $attributes['vsdesk'] ) { $outer_classes[] = 'kb-v-lg-hidden'; } if ( isset( $attributes['vstablet'] ) && $attributes['vstablet'] ) { $outer_classes[] = 'kb-v-md-hidden'; } if ( isset( $attributes['vsmobile'] ) && $attributes['vsmobile'] ) { $outer_classes[] = 'kb-v-sm-hidden'; } if ( ! empty( $attributes['bgColorClass'] ) ) { $outer_classes[] = 'has-' . $attributes['bgColorClass'] . '-background-color'; } if ( ! empty( $attributes['bgImg'] ) || ! empty( $attributes['bgColor'] ) || ! empty( $attributes['gradient'] ) || ! empty( $attributes['overlay'] ) || ! empty( $attributes['overlayBgImg'] ) || ! empty( $attributes['overlayGradient'] ) ) { $outer_classes[] = 'kt-row-has-bg'; } if ( ! empty( $attributes['bgImg'] ) && ! empty( $attributes['bgImgAttachment'] ) && 'parallax' === $attributes['bgImgAttachment'] ) { $outer_classes[] = 'kt-jarallax'; } $inner_classes = array( 'kt-row-column-wrap' ); $inner_classes[] = ! empty( $attributes['columns'] ) ? 'kt-has-' . $attributes['columns'] . '-columns' : 'kt-has-2-columns'; $inner_classes[] = ! empty( $attributes['colLayout'] ) ? 'kt-row-layout-' . $attributes['colLayout'] : 'kt-row-layout-equal'; $inner_classes[] = ! empty( $attributes['tabletLayout'] ) ? 'kt-tab-layout-' . $attributes['tabletLayout'] : 'kt-tab-layout-inherit'; $inner_classes[] = ! empty( $attributes['mobileLayout'] ) ? 'kt-mobile-layout-' . $attributes['mobileLayout'] : 'kt-mobile-layout-inherit'; if ( ! empty( $attributes['verticalAlignment'] ) ) { $inner_classes[] = 'kt-row-valign-' . $attributes['verticalAlignment']; } if ( isset( $attributes['columnsInnerHeight'] ) && $attributes['columnsInnerHeight'] ) { $inner_classes[] = 'kt-inner-column-height-full'; } if ( isset( $attributes['inheritMaxWidth'] ) && $attributes['inheritMaxWidth'] ) { $inner_classes[] = 'kb-theme-content-width'; } $wrapper_args = array( 'class' => implode( ' ', $outer_classes ), ); $background_type = ! empty( $attributes['backgroundSettingTab'] ) ? $attributes['backgroundSettingTab'] : 'normal'; if ( 'normal' === $background_type && ! empty( $attributes['bgImg'] ) && isset( $attributes['backgroundInline'] ) && $attributes['backgroundInline'] ) { $wrapper_args['style'] = 'background-image: url(' . $attributes['bgImg'] . ');'; } if ( ! empty( $attributes['anchor'] ) ) { $wrapper_args['id'] = $attributes['anchor']; } $inner_args = array( 'class' => implode( ' ', $inner_classes ), ); $inner_wrap_attributes = array(); foreach ( $inner_args as $key => $value ) { $inner_wrap_attributes[] = $key . '="' . esc_attr( $value ) . '"'; } $extra_content = ''; if ( 'slider' === $background_type ) { $extra_content .= $this->get_slider_render( $attributes ); } if ( 'video' === $background_type ) { $extra_content .= $this->get_video_render( $attributes ); } if ( $this->has_overlay( $attributes ) ) { $overlay_type = ( ! empty( $attributes['currentOverlayTab'] ) ? $attributes['currentOverlayTab'] : 'normal' ); $extra_content .= '
'; } if ( ! empty( $attributes['topSep'] ) && 'none' !== $attributes['topSep'] ) { $extra_content .= $this->get_divider_render( $attributes['topSep'], 'top' ); } if ( ! empty( $attributes['bottomSep'] ) && 'none' !== $attributes['bottomSep'] ) { $extra_content .= $this->get_divider_render( $attributes['bottomSep'], 'bottom' ); } if ( ! empty( $attributes['bgImg'] ) && !empty($attributes['bgImgAttachment']) && $attributes['bgImgAttachment'] == 'parallax' ) { if ( ! empty( $attributes['bgImgPosition'] ) ) { $wrapper_args['data-img-position'] = $attributes['bgImgPosition']; } if ( ! empty( $attributes['bgImgSize'] ) ) { $wrapper_args['data-img-size'] = $attributes['bgImgSize']; if ( $attributes['bgImgSize'] !== 'cover' && ! empty( $attributes['bgImgRepeat'] ) ) { $wrapper_args['data-img-repeat'] = $attributes['bgImgRepeat']; } } } $wrapper_attributes = get_block_wrapper_attributes( $wrapper_args ); $inner_wrapper_attributes = implode( ' ', $inner_wrap_attributes ); $content = sprintf( '<%1$s %2$s>%3$s
%5$s
', $html_tag, $wrapper_attributes, $extra_content, $inner_wrapper_attributes, $content ); // Disable preloading if no video on mobile or tablet. if ( ! empty( $attributes['backgroundSettingTab'] ) && 'video' === $attributes['backgroundSettingTab'] && ! empty( $attributes['backgroundVideo'][0]['local'] ) && $this->prevent_preload_when_hidden( $attributes ) ) { if ( ! empty( $attributes['tabletBackground'][0]['enable'] ) && 'true' == $attributes['tabletBackground'][0]['enable'] ) { $size = 1024; } else { $size = 767; } $content = $content . ''; } } else { if ( ! empty( $attributes['backgroundSettingTab'] ) && 'video' === $attributes['backgroundSettingTab'] && ! empty( $attributes['backgroundVideo'][0]['local'] ) && ( ( ! empty( $attributes['tabletBackground'][0]['enable'] ) && true == $attributes['tabletBackground'][0]['enable'] ) || ( ! empty( $attributes['mobileBackground'][0]['enable'] ) && true == $attributes['mobileBackground'][0]['enable'] ) ) && apply_filters( 'kadence_blocks_rowlayout_prevent_preload_for_mobile', true ) ) { if ( ! empty( $attributes['tabletBackground'][0]['enable'] ) && 'true' == $attributes['tabletBackground'][0]['enable'] ) { $size = 1024; } else { $size = 767; } if ( ! empty( $attributes['bgImg'] ) ) { $content = str_replace( 'kt-layout-id' . esc_attr( $attributes['uniqueID'] ). '">