] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['captionBottomMarginTablet'], $attr['captionMarginUnitTablet'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['captionLeftMarginTablet'], $attr['captionMarginUnitTablet'] ), ]; $t_selectors['.wp-block-uagb-image--layout-overlay .wp-block-uagb-image--layout-overlay__inner'] = $overlay_border_css_tablet; $t_selectors['.wp-block-uagb-image .wp-block-uagb-image--layout-overlay__inner .uagb-image-heading'] = [ 'margin-top' => Spec_Gb_Helper::get_css_value( $attr['headingTopMarginTablet'], $attr['headingMarginUnitTablet'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['headingRightMarginTablet'], $attr['headingMarginUnitTablet'] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['headingBottomMarginTablet'], $attr['headingMarginUnitTablet'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['headingLeftMarginTablet'], $attr['headingMarginUnitTablet'] ), ]; $t_selectors['.wp-block-uagb-image .wp-block-uagb-image--layout-overlay__inner .uagb-image-separator'] = [ 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['separatorBottomMarginTablet'], $attr['separatorMarginUnitTablet'] ), 'margin-top' => Spec_Gb_Helper::get_css_value( $attr['separatorTopMarginTablet'], $attr['separatorMarginUnitTablet'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['separatorLeftMarginTablet'], $attr['separatorMarginUnitTablet'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['separatorRightMarginTablet'], $attr['separatorMarginUnitTablet'] ), ]; $t_selectors['.wp-block-uagb-image .wp-block-uagb-image__figure img'] = [ 'object-fit' => $attr['objectFitTablet'], 'width' => $width_tablet, 'height' => 'auto', ]; if ( $attr['customHeightSetTablet'] ) { $t_selectors['.wp-block-uagb-image .wp-block-uagb-image__figure img']['height'] = $height_tablet; } // mobile. $m_selectors['.wp-block-uagb-image--layout-default figure img'] = $image_border_css_mobile; $m_selectors['.wp-block-uagb-image--layout-overlay figure img'] = $image_border_css_mobile; $m_selectors['.wp-block-uagb-image .wp-block-uagb-image__figure img'] = [ 'width' => Spec_Gb_Helper::get_css_value( $attr['widthMobile'], 'px' ), ]; $m_selectors['.wp-block-uagb-image'] = [ 'margin-top' => Spec_Gb_Helper::get_css_value( $attr['imageTopMarginMobile'], $attr['imageMarginUnitMobile'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['imageRightMarginMobile'], $attr['imageMarginUnitMobile'] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['imageBottomMarginMobile'], $attr['imageMarginUnitMobile'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['imageLeftMarginMobile'], $attr['imageMarginUnitMobile'] ), 'text-align' => $attr['alignMobile'], 'justify-content' => $align_mobile, 'align-self' => $align_mobile, ]; $m_selectors[' .wp-block-uagb-image__figure'] = [ 'align-items' => $align_mobile, ]; $m_selectors['.wp-block-uagb-image .wp-block-uagb-image__figure figcaption'] = [ 'margin-top' => Spec_Gb_Helper::get_css_value( $attr['captionTopMarginMobile'], $attr['captionMarginUnitMobile'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['captionRightMarginMobile'], $attr['captionMarginUnitMobile'] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['captionBottomMarginMobile'], $attr['captionMarginUnitMobile'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['captionLeftMarginMobile'], $attr['captionMarginUnitMobile'] ), ]; $m_selectors['.wp-block-uagb-image .wp-block-uagb-image--layout-overlay__inner .uagb-image-heading'] = [ 'margin-top' => Spec_Gb_Helper::get_css_value( $attr['headingTopMarginMobile'], $attr['headingMarginUnitMobile'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['headingRightMarginMobile'], $attr['headingMarginUnitMobile'] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['headingBottomMarginMobile'], $attr['headingMarginUnitMobile'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['headingLeftMarginMobile'], $attr['headingMarginUnitMobile'] ), ]; $m_selectors['.wp-block-uagb-image--layout-overlay .wp-block-uagb-image--layout-overlay__inner'] = $overlay_border_css_mobile; $m_selectors['.wp-block-uagb-image .wp-block-uagb-image--layout-overlay__inner .uagb-image-separator'] = [ 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['separatorBottomMarginMobile'], $attr['separatorMarginUnitMobile'] ), 'margin-top' => Spec_Gb_Helper::get_css_value( $attr['separatorTopMarginMobile'], $attr['separatorMarginUnitMobile'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['separatorLeftMarginMobile'], $attr['separatorMarginUnitMobile'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['separatorRightMarginMobile'], $attr['separatorMarginUnitMobile'] ), ]; $m_selectors['.wp-block-uagb-image .wp-block-uagb-image__figure img'] = [ 'object-fit' => $attr['objectFitMobile'], 'width' => $width_mobile, 'height' => 'auto', ]; if ( $attr['customHeightSetMobile'] ) { $m_selectors['.wp-block-uagb-image .wp-block-uagb-image__figure img']['height'] = $height_mobile; } $combined_selectors = [ 'desktop' => $selectors, 'tablet' => $t_selectors, 'mobile' => $m_selectors, ]; $combined_selectors = Spec_Gb_Helper::get_typography_css( $attr, 'heading', '.wp-block-uagb-image--layout-overlay .wp-block-uagb-image--layout-overlay__inner .uagb-image-heading', $combined_selectors ); $combined_selectors = Spec_Gb_Helper::get_typography_css( $attr, 'caption', '.wp-block-uagb-image .wp-block-uagb-image__figure figcaption', $combined_selectors ); return Spec_Gb_Helper::generate_all_css( $combined_selectors, ' .uagb-block-' . $id ); } /** * Get Heading Block CSS * * @since 0.0.1 * @param array $attr The block attributes. * @param string $id The selector ID. * @return array The Widget List. */ public static function get_advanced_heading_css( $attr, $id ) { $defaults = Spec_Gb_Helper::$block_list['srfm/advanced-heading']['attributes']; $attr = array_merge( $defaults, $attr ); $t_selectors = []; $m_selectors = []; $selectors = []; $high_light_border_css = self::generate_border_css( $attr, 'highLight' ); $high_light_border_css_tablet = self::generate_border_css( $attr, 'highLight', 'tablet' ); $high_light_border_css_mobile = self::generate_border_css( $attr, 'highLight', 'mobile' ); $selectors = [ '.wp-block-uagb-advanced-heading .uagb-heading-text' => [ 'color' => $attr['headingColor'], ], '.wp-block-uagb-advanced-heading ' => [ 'background' => 'classic' === $attr['blockBackgroundType'] ? $attr['blockBackground'] : $attr['blockGradientBackground'], 'text-align' => $attr['headingAlign'], 'margin-top' => Spec_Gb_Helper::get_css_value( $attr['blockTopMargin'], $attr['blockMarginUnit'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['blockRightMargin'], $attr['blockMarginUnit'] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['blockBottomMargin'], $attr['blockMarginUnit'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['blockLeftMargin'], $attr['blockMarginUnit'] ), 'padding-top' => Spec_Gb_Helper::get_css_value( $attr['blockTopPadding'], $attr['blockPaddingUnit'] ), 'padding-right' => Spec_Gb_Helper::get_css_value( $attr['blockRightPadding'], $attr['blockPaddingUnit'] ), 'padding-bottom' => Spec_Gb_Helper::get_css_value( $attr['blockBottomPadding'], $attr['blockPaddingUnit'] ), 'padding-left' => Spec_Gb_Helper::get_css_value( $attr['blockLeftPadding'], $attr['blockPaddingUnit'] ), ], '.wp-block-uagb-advanced-heading a' => [ 'color' => $attr['linkColor'], ], '.wp-block-uagb-advanced-heading a:hover' => [ 'color' => $attr['linkHColor'], ], '.wp-block-uagb-advanced-heading .uagb-desc-text' => [ 'color' => $attr['subHeadingColor'], 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['subHeadSpace'], 'px' ), ], '.wp-block-uagb-advanced-heading .srfm-highlight' => array_merge( [ 'background' => $attr['highLightBackground'], 'color' => $attr['highLightColor'], '-webkit-text-fill-color' => $attr['highLightColor'], 'font-family' => $attr['highLightFontFamily'], 'font-style' => $attr['highLightFontStyle'], 'text-decoration' => $attr['highLightDecoration'], 'text-transform' => $attr['highLightTransform'], 'font-weight' => $attr['highLightFontWeight'], 'font-size' => Spec_Gb_Helper::get_css_value( $attr['highLightFontSize'], $attr['highLightFontSizeType'] ), 'line-height' => Spec_Gb_Helper::get_css_value( $attr['highLightLineHeight'], $attr['highLightLineHeightType'] ), 'padding-top' => Spec_Gb_Helper::get_css_value( $attr['highLightTopPadding'], $attr['highLightPaddingUnit'] ), 'padding-right' => Spec_Gb_Helper::get_css_value( $attr['highLightRightPadding'], $attr['highLightPaddingUnit'] ), 'padding-bottom' => Spec_Gb_Helper::get_css_value( $attr['highLightBottomPadding'], $attr['highLightPaddingUnit'] ), 'padding-left' => Spec_Gb_Helper::get_css_value( $attr['highLightLeftPadding'], $attr['highLightPaddingUnit'] ), ], $high_light_border_css ), '.wp-block-uagb-advanced-heading .srfm-highlight:hover' => [ 'border-color' => $attr['highLightBorderHColor'], ], ]; $heading_text_shadow_color = ( ! empty( $attr['headShadowColor'] ) ? Spec_Gb_Helper::get_css_value( $attr['headShadowHOffset'], 'px' ) . ' ' . Spec_Gb_Helper::get_css_value( $attr['headShadowVOffset'], 'px' ) . ' ' . Spec_Gb_Helper::get_css_value( $attr['headShadowBlur'], 'px' ) . ' ' . $attr['headShadowColor'] : '' ); if ( 'gradient' === $attr['headingColorType'] ) { $selectors['.wp-block-uagb-advanced-heading .uagb-heading-text'] = array_merge( $selectors['.wp-block-uagb-advanced-heading .uagb-heading-text'], [ 'background' => $attr['headingGradientColor'], '-webkit-background-clip' => 'text', '-webkit-text-fill-color' => 'transparent', 'filter' => 'drop-shadow( ' . $heading_text_shadow_color . ' )', ] ); $selectors['.wp-block-uagb-advanced-heading a'] = array_merge( $selectors['.wp-block-uagb-advanced-heading a'], [ '-webkit-text-fill-color' => $attr['linkColor'], ] ); $selectors['.wp-block-uagb-advanced-heading a:hover'] = array_merge( $selectors['.wp-block-uagb-advanced-heading a:hover'], [ '-webkit-text-fill-color' => $attr['linkHColor'], ] ); } else { $selectors['.wp-block-uagb-advanced-heading .uagb-heading-text'] = array_merge( $selectors['.wp-block-uagb-advanced-heading .uagb-heading-text'], [ 'text-shadow' => $heading_text_shadow_color, ] ); } // Text Selection & highlight. $highlight_selection_text = [ 'color' => $attr['highLightColor'], 'background' => $attr['highLightBackground'], '-webkit-text-fill-color' => $attr['highLightColor'], ]; $selectors['.wp-block-uagb-advanced-heading .srfm-highlight::-moz-selection'] = $highlight_selection_text; $selectors['.wp-block-uagb-advanced-heading .srfm-highlight::selection'] = $highlight_selection_text; $separator_style = isset( $attr['separatorStyle'] ) ? $attr['separatorStyle'] : ''; if ( 'none' !== $separator_style ) { $selectors['.wp-block-uagb-advanced-heading .uagb-separator'] = [ 'border-top-style' => $attr['separatorStyle'], 'border-top-width' => Spec_Gb_Helper::get_css_value( $attr['separatorHeight'], $attr['separatorHeightType'] ), 'width' => Spec_Gb_Helper::get_css_value( $attr['separatorWidth'], $attr['separatorWidthType'] ), 'border-color' => $attr['separatorColor'], 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['separatorSpace'], $attr['separatorSpaceType'] ), ]; $t_selectors['.wp-block-uagb-advanced-heading .uagb-separator'] = [ 'width' => Spec_Gb_Helper::get_css_value( $attr['separatorWidthTablet'], $attr['separatorWidthType'] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['separatorSpaceTablet'], $attr['separatorSpaceType'] ), ]; $m_selectors['.wp-block-uagb-advanced-heading .uagb-separator'] = [ 'width' => Spec_Gb_Helper::get_css_value( $attr['separatorWidthMobile'], $attr['separatorWidthType'] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['separatorSpaceMobile'], $attr['separatorSpaceType'] ), ]; } $t_selectors['.wp-block-uagb-advanced-heading '] = [ 'text-align' => $attr['headingAlignTablet'], 'padding-top' => Spec_Gb_Helper::get_css_value( $attr['blockTopPaddingTablet'], $attr['blockPaddingUnitTablet'] ), 'padding-right' => Spec_Gb_Helper::get_css_value( $attr['blockRightPaddingTablet'], $attr['blockPaddingUnitTablet'] ), 'padding-bottom' => Spec_Gb_Helper::get_css_value( $attr['blockBottomPaddingTablet'], $attr['blockPaddingUnitTablet'] ), 'padding-left' => Spec_Gb_Helper::get_css_value( $attr['blockLeftPaddingTablet'], $attr['blockPaddingUnitTablet'] ), 'margin-top' => Spec_Gb_Helper::get_css_value( $attr['blockTopMarginTablet'], $attr['blockMarginUnitTablet'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['blockRightMarginTablet'], $attr['blockMarginUnitTablet'] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['blockBottomMarginTablet'], $attr['blockMarginUnitTablet'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['blockLeftMarginTablet'], $attr['blockMarginUnitTablet'] ), ]; $t_selectors['.wp-block-uagb-advanced-heading .srfm-highlight'] = array_merge( [ 'padding-top' => Spec_Gb_Helper::get_css_value( $attr['highLightTopPaddingTablet'], $attr['highLightPaddingUnitTablet'] ), 'padding-right' => Spec_Gb_Helper::get_css_value( $attr['highLightRightPaddingTablet'], $attr['highLightPaddingUnitTablet'] ), 'padding-bottom' => Spec_Gb_Helper::get_css_value( $attr['highLightBottomPaddingTablet'], $attr['highLightPaddingUnitTablet'] ), 'padding-left' => Spec_Gb_Helper::get_css_value( $attr['highLightLeftPaddingTablet'], $attr['highLightPaddingUnitTablet'] ), ], $high_light_border_css_tablet ); $m_selectors['.wp-block-uagb-advanced-heading '] = [ 'text-align' => $attr['headingAlignMobile'], 'padding-top' => Spec_Gb_Helper::get_css_value( $attr['blockTopPaddingMobile'], $attr['blockPaddingUnitMobile'] ), 'padding-right' => Spec_Gb_Helper::get_css_value( $attr['blockRightPaddingMobile'], $attr['blockPaddingUnitMobile'] ), 'padding-bottom' => Spec_Gb_Helper::get_css_value( $attr['blockBottomPaddingMobile'], $attr['blockPaddingUnitMobile'] ), 'padding-left' => Spec_Gb_Helper::get_css_value( $attr['blockLeftPaddingMobile'], $attr['blockPaddingUnitMobile'] ), 'margin-top' => Spec_Gb_Helper::get_css_value( $attr['blockTopMarginMobile'], $attr['blockMarginUnitMobile'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['blockRightMarginMobile'], $attr['blockMarginUnitMobile'] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['blockBottomMarginMobile'], $attr['blockMarginUnitMobile'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['blockLeftMarginMobile'], $attr['blockMarginUnitMobile'] ), ]; $m_selectors['.wp-block-uagb-advanced-heading .srfm-highlight'] = array_merge( [ 'padding-top' => Spec_Gb_Helper::get_css_value( $attr['highLightTopPaddingMobile'], $attr['highLightPaddingUnitMobile'] ), 'padding-right' => Spec_Gb_Helper::get_css_value( $attr['highLightRightPaddingMobile'], $attr['highLightPaddingUnitMobile'] ), 'padding-bottom' => Spec_Gb_Helper::get_css_value( $attr['highLightBottomPaddingMobile'], $attr['highLightPaddingUnitMobile'] ), 'padding-left' => Spec_Gb_Helper::get_css_value( $attr['highLightLeftPaddingMobile'], $attr['highLightPaddingUnitMobile'] ), ], $high_light_border_css_mobile ); $t_selectors['.wp-block-uagb-advanced-heading .uagb-desc-text'] = [ 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['subHeadSpaceTablet'], $attr['subHeadSpaceType'] ), ]; $m_selectors['.wp-block-uagb-advanced-heading .uagb-desc-text'] = [ 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['subHeadSpaceMobile'], $attr['subHeadSpaceType'] ), ]; if ( $attr['headingDescToggle'] || 'none' !== $attr['separatorStyle'] ) { $selectors[' .uagb-heading-text'] = [ 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['headSpace'], 'px' ), ]; $t_selectors[' .uagb-heading-text'] = [ 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['headSpaceTablet'], $attr['headSpaceType'] ), ]; $m_selectors[' .uagb-heading-text'] = [ 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['headSpaceMobile'], $attr['headSpaceType'] ), ]; } $combined_selectors = Spec_Gb_Helper::get_combined_selectors( 'advanced-heading', [ 'desktop' => $selectors, 'tablet' => $t_selectors, 'mobile' => $m_selectors, ], $attr ); $combined_selectors = Spec_Gb_Helper::get_typography_css( $attr, 'head', ' .uagb-heading-text', $combined_selectors ); $combined_selectors = Spec_Gb_Helper::get_typography_css( $attr, 'subHead', ' .uagb-desc-text', $combined_selectors ); $combined_selectors = Spec_Gb_Helper::get_typography_css( $attr, 'highLight', '.wp-block-uagb-advanced-heading .srfm-highlight', $combined_selectors ); return Spec_Gb_Helper::generate_all_css( $combined_selectors, ' .uagb-block-' . $id ); } /** * Get Separator Block CSS * * @since 0.0.1 * @param array $attr The block attributes. * @param string $id The selector ID. * @return array The Widget List. */ public static function get_separator_css( $attr, $id ) { $defaults = Spec_Gb_Helper::$block_list['srfm/separator']['attributes']; $attr = array_merge( $defaults, $attr ); $t_selectors = []; $m_selectors = []; $selectors = []; $border_size = '100%'; $border_css = [ '-webkit-mask-size' => ( Spec_Gb_Helper::get_css_value( $attr['separatorSize'], $attr['separatorSizeType'] ) . ' ' . $border_size ), 'border-top-width' => Spec_Gb_Helper::get_css_value( $attr['separatorBorderHeight'], $attr['separatorBorderHeightUnit'] ), 'width' => Spec_Gb_Helper::get_css_value( $attr['separatorWidth'], $attr['separatorWidthType'] ), 'border-top-color' => $attr['separatorColor'], 'border-top-style' => $attr['separatorStyle'], ]; $border_style = []; $icon_spacing_style = []; if ( 'none' === $attr['elementType'] ) { $border_style['.wp-block-uagb-separator:not(.wp-block-uagb-separator--text):not(.wp-block-uagb-separator--icon) .wp-block-uagb-separator__inner'] = $border_css; } else { $align_css = Spec_Gb_Helper::alignment_css( $attr['separatorAlign'] ); $border_style = [ '.wp-block-uagb-separator .wp-block-uagb-separator__inner' => array_merge( [ 'width' => Spec_Gb_Helper::get_css_value( $attr['separatorWidth'], $attr['separatorWidthType'] ), ], $align_css ), ]; $border_style['.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::before'] = $border_css; $border_style['.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::before'] = $border_css; $border_style['.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::after'] = $border_css; $border_style['.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::after'] = $border_css; if ( 'left' === $attr['elementPosition'] ) { $icon_spacing_style['.wp-block-uagb-separator .wp-block-uagb-separator__inner .wp-block-uagb-separator-element'] = [ 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['elementSpacing'], $attr['elementSpacingUnit'] ), ]; $border_style['.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::before'] = [ 'display' => 'none', ]; $border_style['.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::before'] = [ 'display' => 'none', ]; } if ( 'right' === $attr['elementPosition'] ) { $icon_spacing_style['.wp-block-uagb-separator .wp-block-uagb-separator__inner .wp-block-uagb-separator-element'] = [ 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['elementSpacing'], $attr['elementSpacingUnit'] ), ]; $border_style['.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::after'] = [ 'display' => 'none', ]; $border_style['.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::after'] = [ 'display' => 'none', ]; } if ( 'center' === $attr['elementPosition'] ) { $icon_spacing_style['.wp-block-uagb-separator .wp-block-uagb-separator__inner .wp-block-uagb-separator-element'] = [ 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['elementSpacing'], $attr['elementSpacingUnit'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['elementSpacing'], $attr['elementSpacingUnit'] ), ]; } } $selectors = [ '.wp-block-uagb-separator.uagb-block .wp-block-uagb-separator-wrapper' => [ 'margin-top' => Spec_Gb_Helper::get_css_value( $attr['blockTopMargin'], $attr['blockMarginUnit'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['blockRightMargin'], $attr['blockMarginUnit'] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['blockBottomMargin'], $attr['blockMarginUnit'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['blockLeftMargin'], $attr['blockMarginUnit'] ), 'padding-top' => Spec_Gb_Helper::get_css_value( $attr['blockTopPadding'], $attr['blockPaddingUnit'] ), 'padding-right' => Spec_Gb_Helper::get_css_value( $attr['blockRightPadding'], $attr['blockPaddingUnit'] ), 'padding-bottom' => Spec_Gb_Helper::get_css_value( $attr['blockBottomPadding'], $attr['blockPaddingUnit'] ), 'padding-left' => Spec_Gb_Helper::get_css_value( $attr['blockLeftPadding'], $attr['blockPaddingUnit'] ), 'text-align' => $attr['separatorAlign'], ], '.wp-block-uagb-separator--text .wp-block-uagb-separator-element .uagb-html-tag' => [ 'font-family' => $attr['elementTextFontFamily'], 'font-style' => $attr['elementTextFontStyle'], 'text-decoration' => $attr['elementTextDecoration'], 'text-transform' => $attr['elementTextTransform'], 'font-weight' => $attr['elementTextFontWeight'], 'color' => $attr['elementColor'], 'font-size' => Spec_Gb_Helper::get_css_value( $attr['elementTextFontSize'], $attr['elementTextFontSizeType'] ), 'line-height' => Spec_Gb_Helper::get_css_value( $attr['elementTextLineHeight'], $attr['elementTextLineHeightType'] ), 'letter-spacing' => Spec_Gb_Helper::get_css_value( $attr['elementTextLetterSpacing'], $attr['elementTextLetterSpacingType'] ), ], '.wp-block-uagb-separator--icon .wp-block-uagb-separator-element svg' => [ 'font-size' => Spec_Gb_Helper::get_css_value( $attr['elementIconWidth'], $attr['elementIconWidthType'] ), 'width' => Spec_Gb_Helper::get_css_value( $attr['elementIconWidth'], $attr['elementIconWidthType'] ), 'height' => Spec_Gb_Helper::get_css_value( $attr['elementIconWidth'], $attr['elementIconWidthType'] ), 'line-height' => Spec_Gb_Helper::get_css_value( $attr['elementIconWidth'], $attr['elementIconWidthType'] ), 'color' => $attr['elementColor'], 'fill' => $attr['elementColor'], ], ]; $selectors = array_merge( $selectors, $border_style, $icon_spacing_style ); // Tablet. $border_css_tablet = [ '-webkit-mask-size' => ( Spec_Gb_Helper::get_css_value( $attr['separatorSizeTablet'], $attr['separatorSizeType'] ) . ' ' . $border_size ), 'border-top-width' => Spec_Gb_Helper::get_css_value( $attr['separatorBorderHeightTablet'], $attr['separatorBorderHeightUnit'] ), 'width' => Spec_Gb_Helper::get_css_value( $attr['separatorWidthTablet'], $attr['separatorWidthType'] ), 'border-top-color' => $attr['separatorColor'], 'border-top-style' => $attr['separatorStyle'], ]; $border_style_tablet = []; $icon_spacing_style_tablet = []; if ( 'none' === $attr['elementType'] ) { $border_style_tablet['.wp-block-uagb-separator:not(.wp-block-uagb-separator--text):not(.wp-block-uagb-separator--icon) .wp-block-uagb-separator__inner'] = $border_css_tablet; } else { $align_css = Spec_Gb_Helper::alignment_css( $attr['separatorAlignTablet'] ); $border_style_tablet = [ '.wp-block-uagb-separator .wp-block-uagb-separator__inner' => array_merge( [ 'width' => Spec_Gb_Helper::get_css_value( $attr['separatorWidthTablet'], $attr['separatorWidthType'] ), ], $align_css ), ]; $border_style_tablet['.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::before'] = $border_css_tablet; $border_style_tablet['.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::before'] = $border_css_tablet; $border_style_tablet['.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::after'] = $border_css_tablet; $border_style_tablet['.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::after'] = $border_css_tablet; if ( 'left' === $attr['elementPosition'] ) { $icon_spacing_style_tablet['.wp-block-uagb-separator .wp-block-uagb-separator__inner .wp-block-uagb-separator-element'] = [ 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['elementSpacingTablet'], $attr['elementSpacingUnit'] ), ]; $border_style_tablet['.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::before'] = [ 'display' => 'none', ]; $border_style_tablet['.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::before'] = [ 'display' => 'none', ]; } if ( 'center' === $attr['elementPosition'] ) { $icon_spacing_style_tablet['.wp-block-uagb-separator .wp-block-uagb-separator__inner .wp-block-uagb-separator-element'] = [ 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['elementSpacingTablet'], $attr['elementSpacingUnit'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['elementSpacingTablet'], $attr['elementSpacingUnit'] ), ]; } if ( 'right' === $attr['elementPosition'] ) { $icon_spacing_style_tablet['.wp-block-uagb-separator .wp-block-uagb-separator__inner .wp-block-uagb-separator-element'] = [ 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['elementSpacingTablet'], $attr['elementSpacingUnit'] ), ]; $border_style_tablet['.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::after'] = [ 'display' => 'none', ]; $border_style_tablet['.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::after'] = [ 'display' => 'none', ]; } } $t_selectors = [ '.wp-block-uagb-separator.uagb-block .wp-block-uagb-separator-wrapper' => [ 'margin-top' => Spec_Gb_Helper::get_css_value( $attr['blockTopMarginTablet'], $attr['blockMarginUnit'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['blockRightMarginTablet'], $attr['blockMarginUnit'] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['blockBottomMarginTablet'], $attr['blockMarginUnit'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['blockLeftMarginTablet'], $attr['blockMarginUnit'] ), 'padding-top' => Spec_Gb_Helper::get_css_value( $attr['blockTopPaddingTablet'], $attr['blockPaddingUnit'] ), 'padding-right' => Spec_Gb_Helper::get_css_value( $attr['blockRightPaddingTablet'], $attr['blockPaddingUnit'] ), 'padding-bottom' => Spec_Gb_Helper::get_css_value( $attr['blockBottomPaddingTablet'], $attr['blockPaddingUnit'] ), 'padding-left' => Spec_Gb_Helper::get_css_value( $attr['blockLeftPaddingTablet'], $attr['blockPaddingUnit'] ), 'text-align' => $attr['separatorAlignTablet'], ], '.wp-block-uagb-separator--text .wp-block-uagb-separator-element .uagb-html-tag' => [ 'font-family' => $attr['elementTextFontFamily'], 'font-style' => $attr['elementTextFontStyle'], 'text-decoration' => $attr['elementTextDecoration'], 'text-transform' => $attr['elementTextTransform'], 'font-weight' => $attr['elementTextFontWeight'], 'color' => $attr['elementColor'], 'margin-bottom' => 'initial', 'font-size' => Spec_Gb_Helper::get_css_value( $attr['elementTextFontSizeTablet'], $attr['elementTextFontSizeType'] ), 'line-height' => Spec_Gb_Helper::get_css_value( $attr['elementTextLineHeightTablet'], $attr['elementTextLineHeightType'] ), 'letter-spacing' => Spec_Gb_Helper::get_css_value( $attr['elementTextLetterSpacingTablet'], $attr['elementTextLetterSpacingType'] ), ], '.wp-block-uagb-separator--icon .wp-block-uagb-separator-element svg' => [ 'font-size' => Spec_Gb_Helper::get_css_value( $attr['elementIconWidthTablet'], $attr['elementIconWidthType'] ), 'width' => Spec_Gb_Helper::get_css_value( $attr['elementIconWidthTablet'], $attr['elementIconWidthType'] ), 'height' => Spec_Gb_Helper::get_css_value( $attr['elementIconWidthTablet'], $attr['elementIconWidthType'] ), 'line-height' => Spec_Gb_Helper::get_css_value( $attr['elementIconWidthTablet'], $attr ['elementIconWidthType'] ), 'color' => $attr['elementColor'], 'fill' => $attr['elementColor'], ], ]; $t_selectors = array_merge( $t_selectors, $border_style_tablet, $icon_spacing_style_tablet ); // Mobile. $border_css_mobile = [ '-webkit-mask-size' => ( Spec_Gb_Helper::get_css_value( $attr['separatorSizeMobile'], $attr['separatorSizeType'] ) . ' ' . $border_size ), 'border-top-width' => Spec_Gb_Helper::get_css_value( $attr['separatorBorderHeightMobile'], $attr['separatorBorderHeightUnit'] ), 'width' => Spec_Gb_Helper::get_css_value( $attr['separatorWidthMobile'], $attr['separatorWidthType'] ), 'border-top-color' => $attr['separatorColor'], 'border-top-style' => $attr['separatorStyle'], ]; $border_style_mobile = []; $icon_spacing_style_mobile = []; if ( 'none' === $attr['elementType'] ) { $border_style_mobile['.wp-block-uagb-separator:not(.wp-block-uagb-separator--text):not(.wp-block-uagb-separator--icon) .wp-block-uagb-separator__inner'] = $border_css_mobile; } else { $align_css = Spec_Gb_Helper::alignment_css( $attr['separatorAlignMobile'] ); $border_style_mobile = [ '.wp-block-uagb-separator .wp-block-uagb-separator__inner' => array_merge( [ 'width' => Spec_Gb_Helper::get_css_value( $attr['separatorWidthMobile'], $attr['separatorWidthType'] ), ], $align_css ), ]; $border_style_mobile['.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::before'] = $border_css_mobile; $border_style_mobile['.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::before'] = $border_css_mobile; $border_style_mobile['.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::after'] = $border_css_mobile; $border_style_mobile['.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::after'] = $border_css_mobile; if ( 'left' === $attr['elementPosition'] ) { $icon_spacing_style_mobile['.wp-block-uagb-separator .wp-block-uagb-separator__inner .wp-block-uagb-separator-element'] = [ 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['elementSpacingMobile'], $attr['elementSpacingUnit'] ), ]; $border_style_mobile['.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::before'] = [ 'display' => 'none', ]; $border_style_mobile['.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::before'] = [ 'display' => 'none', ]; } if ( 'center' === $attr['elementPosition'] ) { $icon_spacing_style_mobile['.wp-block-uagb-separator .wp-block-uagb-separator__inner .wp-block-uagb-separator-element'] = [ 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['elementSpacingMobile'], $attr['elementSpacingUnit'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['elementSpacingMobile'], $attr['elementSpacingUnit'] ), ]; } if ( 'right' === $attr['elementPosition'] ) { $icon_spacing_style_mobile['.wp-block-uagb-separator .wp-block-uagb-separator__inner .wp-block-uagb-separator-element'] = [ 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['elementSpacingMobile'], $attr['elementSpacingUnit'] ), ]; $border_style_mobile['.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::after'] = [ 'display' => 'none', ]; $border_style_mobile['.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::after'] = [ 'display' => 'none', ]; } } $m_selectors = [ '.wp-block-uagb-separator.uagb-block .wp-block-uagb-separator-wrapper' => [ 'margin-top' => Spec_Gb_Helper::get_css_value( $attr['blockTopMarginMobile'], $attr['blockMarginUnit'] ), 'margin-right' => Spec_Gb_Helper::get_css_value( $attr['blockRightMarginMobile'], $attr['blockMarginUnit'] ), 'margin-bottom' => Spec_Gb_Helper::get_css_value( $attr['blockBottomMarginMobile'], $attr['blockMarginUnit'] ), 'margin-left' => Spec_Gb_Helper::get_css_value( $attr['blockLeftMarginMobile'], $attr['blockMarginUnit'] ), 'padding-top' => Spec_Gb_Helper::get_css_value( $attr['blockTopPaddingMobile'], $attr['blockPaddingUnit'] ), 'padding-right' => Spec_Gb_Helper::get_css_value( $attr['blockRightPaddingMobile'], $attr['blockPaddingUnit'] ), 'padding-bottom' => Spec_Gb_Helper::get_css_value( $attr['blockBottomPaddingMobile'], $attr['blockPaddingUnit'] ), 'padding-left' => Spec_Gb_Helper::get_css_value( $attr['blockLeftPaddingMobile'], $attr['blockPaddingUnit'] ), 'text-align' => $attr['separatorAlignMobile'], ], '.wp-block-uagb-separator--text .wp-block-uagb-separator-element .uagb-html-tag' => [ 'font-family' => $attr['elementTextFontFamily'], 'font-style' => $attr['elementTextFontStyle'], 'text-decoration' => $attr['elementTextDecoration'], 'text-transform' => $attr['elementTextTransform'], 'font-weight' => $attr['elementTextFontWeight'], 'color' => $attr['elementColor'], 'margin-bottom' => 'initial', 'font-size' => Spec_Gb_Helper::get_css_value( $attr['elementTextFontSizeMobile'], $attr['elementTextFontSizeType'] ), 'line-height' => Spec_Gb_Helper::get_css_value( $attr['elementTextLineHeightMobile'], $attr['elementTextLineHeightType'] ), 'letter-spacing' => Spec_Gb_Helper::get_css_value( $attr['elementTextLetterSpacingMobile'], $attr['elementTextLetterSpacingType'] ), ], '.wp-block-uagb-separator--icon .wp-block-uagb-separator-element svg' => [ 'font-size' => Spec_Gb_Helper::get_css_value( $attr['elementIconWidthMobile'], $attr['elementIconWidthType'] ), 'width' => Spec_Gb_Helper::get_css_value( $attr['elementIconWidthMobile'], $attr['elementIconWidthType'] ), 'height' => Spec_Gb_Helper::get_css_value( $attr['elementIconWidthMobile'], $attr['elementIconWidthType'] ), 'line-height' => Spec_Gb_Helper::get_css_value( $attr['elementIconWidthMobile'], $attr ['elementIconWidthType'] ), 'color' => $attr['elementColor'], 'fill' => $attr['elementColor'], ], ]; $m_selectors = array_merge( $m_selectors, $border_style_mobile, $icon_spacing_style_mobile ); $combined_selectors = [ 'desktop' => $selectors, 'tablet' => $t_selectors, 'mobile' => $m_selectors, ]; return Spec_Gb_Helper::generate_all_css( $combined_selectors, ' .uagb-block-' . $id ); } /** * Border CSS generation Function. * * @since 0.0.1 * @param array $attr Attribute List. * @param string $prefix Attribuate prefix . * @param string $device Responsive. * @return array border css array. */ public static function generate_border_css( $attr, $prefix, $device = 'desktop' ) { $gen_border_css = []; if ( 'tablet' === $device ) { if ( 'none' !== $attr[ $prefix . 'BorderStyle' ] ) { $gen_border_css['border-top-width'] = self::get_css_value( $attr[ $prefix . 'BorderTopWidthTablet' ], 'px' ); $gen_border_css['border-left-width'] = self::get_css_value( $attr[ $prefix . 'BorderLeftWidthTablet' ], 'px' ); $gen_border_css['border-right-width'] = self::get_css_value( $attr[ $prefix . 'BorderRightWidthTablet' ], 'px' ); $gen_border_css['border-bottom-width'] = self::get_css_value( $attr[ $prefix . 'BorderBottomWidthTablet' ], 'px' ); } $gen_border_unit_tablet = isset( $attr[ $prefix . 'BorderRadiusUnitTablet' ] ) ? $attr[ $prefix . 'BorderRadiusUnitTablet' ] : 'px'; $gen_border_css['border-top-left-radius'] = self::get_css_value( $attr[ $prefix . 'BorderTopLeftRadiusTablet' ], $gen_border_unit_tablet ); $gen_border_css['border-top-right-radius'] = self::get_css_value( $attr[ $prefix . 'BorderTopRightRadiusTablet' ], $gen_border_unit_tablet ); $gen_border_css['border-bottom-left-radius'] = self::get_css_value( $attr[ $prefix . 'BorderBottomLeftRadiusTablet' ], $gen_border_unit_tablet ); $gen_border_css['border-bottom-right-radius'] = self::get_css_value( $attr[ $prefix . 'BorderBottomRightRadiusTablet' ], $gen_border_unit_tablet ); } elseif ( 'mobile' === $device ) { if ( 'none' !== $attr[ $prefix . 'BorderStyle' ] ) { $gen_border_css['border-top-width'] = self::get_css_value( $attr[ $prefix . 'BorderTopWidthMobile' ], 'px' ); $gen_border_css['border-left-width'] = self::get_css_value( $attr[ $prefix . 'BorderLeftWidthMobile' ], 'px' ); $gen_border_css['border-right-width'] = self::get_css_value( $attr[ $prefix . 'BorderRightWidthMobile' ], 'px' ); $gen_border_css['border-bottom-width'] = self::get_css_value( $attr[ $prefix . 'BorderBottomWidthMobile' ], 'px' ); } $gen_border_unit_mobile = isset( $attr[ $prefix . 'BorderTopLeftRadiusMobile' ] ) ? $attr[ $prefix . 'BorderTopLeftRadiusMobile' ] : 'px'; $gen_border_css['border-top-left-radius'] = self::get_css_value( $attr[ $prefix . 'BorderTopLeftRadiusMobile' ], $gen_border_unit_mobile ); $gen_border_css['border-top-right-radius'] = self::get_css_value( $attr[ $prefix . 'BorderTopRightRadiusMobile' ], $gen_border_unit_mobile ); $gen_border_css['border-bottom-left-radius'] = self::get_css_value( $attr[ $prefix . 'BorderBottomLeftRadiusMobile' ], $gen_border_unit_mobile ); $gen_border_css['border-bottom-right-radius'] = self::get_css_value( $attr[ $prefix . 'BorderBottomRightRadiusMobile' ], $gen_border_unit_mobile ); } else { if ( 'none' !== $attr[ $prefix . 'BorderStyle' ] ) { $gen_border_css['border-top-width'] = self::get_css_value( $attr[ $prefix . 'BorderTopWidth' ], 'px' ); $gen_border_css['border-left-width'] = self::get_css_value( $attr[ $prefix . 'BorderLeftWidth' ], 'px' ); $gen_border_css['border-right-width'] = self::get_css_value( $attr[ $prefix . 'BorderRightWidth' ], 'px' ); $gen_border_css['border-bottom-width'] = self::get_css_value( $attr[ $prefix . 'BorderBottomWidth' ], 'px' ); } $gen_border_unit = isset( $attr[ $prefix . 'BorderRadiusUnit' ] ) ? $attr[ $prefix . 'BorderRadiusUnit' ] : 'px'; $gen_border_css['border-top-left-radius'] = self::get_css_value( $attr[ $prefix . 'BorderTopLeftRadius' ], $gen_border_unit ); $gen_border_css['border-top-right-radius'] = self::get_css_value( $attr[ $prefix . 'BorderTopRightRadius' ], $gen_border_unit ); $gen_border_css['border-bottom-left-radius'] = self::get_css_value( $attr[ $prefix . 'BorderBottomLeftRadius' ], $gen_border_unit ); $gen_border_css['border-bottom-right-radius'] = self::get_css_value( $attr[ $prefix . 'BorderBottomRightRadius' ], $gen_border_unit ); } $border_style = $attr[ $prefix . 'BorderStyle' ]; $border_color = $attr[ $prefix . 'BorderColor' ]; $gen_border_css['border-style'] = $border_style; $gen_border_css['border-color'] = $border_color; return $gen_border_css; } /** * Get CSS value * * Syntax: * * get_css_value( VALUE, UNIT ); * * E.g. * * get_css_value( VALUE, 'em' ); * * @param string $value CSS value. * @param string $unit CSS unit. * @since 0.0.1 */ public static function get_css_value( $value = '', $unit = '' ) { if ( '' === $value ) { return $value; } $css_val = ''; if ( isset( $value ) ) { $css_val = esc_attr( $value ) . $unit; } return $css_val; } /** * Deprecated Border CSS generation Function. * * @since 0.0.1 * @param array $current_css Current style list. * @param string $border_width Border Width. * @param string $border_radius Border Radius. * @param string $border_color Border Color. * @param string $border_style Border Style. */ public static function generate_deprecated_border_css( $current_css, $border_width, $border_radius, $border_color = '', $border_style = '' ) { $gen_border_css = []; if ( is_numeric( $border_width ) ) { $gen_border_css['border-top-width'] = self::get_css_value( $border_width, 'px' ); $gen_border_css['border-left-width'] = self::get_css_value( $border_width, 'px' ); $gen_border_css['border-right-width'] = self::get_css_value( $border_width, 'px' ); $gen_border_css['border-bottom-width'] = self::get_css_value( $border_width, 'px' ); } if ( is_numeric( $border_radius ) ) { $gen_border_css['border-top-left-radius'] = self::get_css_value( $border_radius, 'px' ); $gen_border_css['border-top-right-radius'] = self::get_css_value( $border_radius, 'px' ); $gen_border_css['border-bottom-left-radius'] = self::get_css_value( $border_radius, 'px' ); $gen_border_css['border-bottom-right-radius'] = self::get_css_value( $border_radius, 'px' ); } if ( $border_color ) { $gen_border_css['border-color'] = $border_color; } if ( $border_style ) { $gen_border_css['border-style'] = $border_style; } return wp_parse_args( $gen_border_css, $current_css ); } } }