829 lines
33 KiB
PHP
829 lines
33 KiB
PHP
<?php
|
|
/**
|
|
* Handles the Headline block.
|
|
*
|
|
* @package GenerateBlocks
|
|
*/
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
exit; // Exit if accessed directly.
|
|
}
|
|
|
|
/**
|
|
* Add Headline related functions.
|
|
*/
|
|
class GenerateBlocks_Block_Headline {
|
|
/**
|
|
* Keep track of all blocks of this type on the page.
|
|
*
|
|
* @var array $block_ids The current block id.
|
|
*/
|
|
private static $block_ids = [];
|
|
|
|
/**
|
|
* Keep track of CSS we want to output once per block type.
|
|
*
|
|
* @var boolean
|
|
*/
|
|
private static $singular_css_added = false;
|
|
|
|
/**
|
|
* Block defaults.
|
|
*/
|
|
public static function defaults() {
|
|
return [
|
|
'element' => 'h2',
|
|
'cssClasses' => '',
|
|
'backgroundColor' => '',
|
|
'textColor' => '',
|
|
'linkColor' => '',
|
|
'linkColorHover' => '',
|
|
'highlightTextColor' => '',
|
|
'fontFamilyFallback' => '',
|
|
'googleFont' => false,
|
|
'googleFontVariants' => '',
|
|
'icon' => '',
|
|
'hasIcon' => false,
|
|
'iconColor' => '',
|
|
'iconLocation' => 'inline',
|
|
'iconLocationTablet' => '',
|
|
'iconLocationMobile' => '',
|
|
'removeText' => false,
|
|
'ariaLabel' => '',
|
|
// Deprecated attributes.
|
|
'backgroundColorOpacity' => 1,
|
|
'borderColorOpacity' => 1,
|
|
'iconColorOpacity' => 1,
|
|
'fontSize' => '',
|
|
'fontSizeTablet' => '',
|
|
'fontSizeMobile' => '',
|
|
'fontSizeUnit' => 'px',
|
|
'lineHeight' => '',
|
|
'lineHeightTablet' => '',
|
|
'lineHeightMobile' => '',
|
|
'lineHeightUnit' => 'em',
|
|
'letterSpacing' => '',
|
|
'letterSpacingTablet' => '',
|
|
'letterSpacingMobile' => '',
|
|
'fontWeight' => '',
|
|
'textTransform' => '',
|
|
'alignment' => '',
|
|
'alignmentTablet' => '',
|
|
'alignmentMobile' => '',
|
|
'iconVerticalAlignment' => 'center',
|
|
'iconVerticalAlignmentTablet' => '',
|
|
'iconVerticalAlignmentMobile' => '',
|
|
'inlineWidth' => false,
|
|
'inlineWidthTablet' => false,
|
|
'inlineWidthMobile' => false,
|
|
'fontFamily' => '',
|
|
'borderColor' => '',
|
|
'iconPaddingTop' => '',
|
|
'iconPaddingRight' => '0.5',
|
|
'iconPaddingBottom' => '',
|
|
'iconPaddingLeft' => '',
|
|
'iconPaddingTopTablet' => '',
|
|
'iconPaddingRightTablet' => '',
|
|
'iconPaddingBottomTablet' => '',
|
|
'iconPaddingLeftTablet' => '',
|
|
'iconPaddingTopMobile' => '',
|
|
'iconPaddingRightMobile' => '',
|
|
'iconPaddingBottomMobile' => '',
|
|
'iconPaddingLeftMobile' => '',
|
|
'iconPaddingUnit' => 'em',
|
|
'iconSize' => 1,
|
|
'iconSizeTablet' => '',
|
|
'iconSizeMobile' => '',
|
|
'iconSizeUnit' => 'em',
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Store our block ID in memory.
|
|
*
|
|
* @param string $id The block ID to store.
|
|
*/
|
|
public static function store_block_id( $id ) {
|
|
self::$block_ids[] = $id;
|
|
}
|
|
|
|
/**
|
|
* Check if our block ID exists.
|
|
*
|
|
* @param string $id The block ID to store.
|
|
*/
|
|
public static function block_id_exists( $id ) {
|
|
return in_array( $id, (array) self::$block_ids );
|
|
}
|
|
|
|
/**
|
|
* Compile our CSS data based on our block attributes.
|
|
*
|
|
* @param array $attributes Our block attributes.
|
|
*/
|
|
public static function get_css_data( $attributes ) {
|
|
$css = new GenerateBlocks_Dynamic_CSS();
|
|
$desktop_css = new GenerateBlocks_Dynamic_CSS();
|
|
$tablet_css = new GenerateBlocks_Dynamic_CSS();
|
|
$tablet_only_css = new GenerateBlocks_Dynamic_CSS();
|
|
$mobile_css = new GenerateBlocks_Dynamic_CSS();
|
|
$css_data = [];
|
|
|
|
$defaults = generateblocks_get_block_defaults();
|
|
|
|
$settings = wp_parse_args(
|
|
$attributes,
|
|
$defaults['headline']
|
|
);
|
|
|
|
$id = $attributes['uniqueId'];
|
|
$blockVersion = ! empty( $settings['blockVersion'] ) ? $settings['blockVersion'] : 1;
|
|
|
|
// Map deprecated settings.
|
|
$settings = GenerateBlocks_Map_Deprecated_Attributes::map_attributes( $settings );
|
|
|
|
$selector = generateblocks_get_css_selector( 'headline', $attributes );
|
|
|
|
// Back-compatibility for when icon held a value.
|
|
if ( $settings['icon'] ) {
|
|
$settings['hasIcon'] = true;
|
|
}
|
|
|
|
// Only add this CSS once.
|
|
if ( ! self::$singular_css_added ) {
|
|
// Singular CSS is no longer supported since 1.9.0.
|
|
do_action(
|
|
'generateblocks_block_one_time_css_data',
|
|
'headline',
|
|
$settings,
|
|
$css
|
|
);
|
|
|
|
self::$singular_css_added = true;
|
|
}
|
|
|
|
if ( ! isset( $attributes['hasWrapper'] ) ) {
|
|
$css->set_selector( $selector );
|
|
generateblocks_add_layout_css( $css, $settings );
|
|
generateblocks_add_sizing_css( $css, $settings );
|
|
generateblocks_add_flex_child_css( $css, $settings );
|
|
generateblocks_add_typography_css( $css, $settings );
|
|
generateblocks_add_spacing_css( $css, $settings );
|
|
generateblocks_add_border_css( $css, $settings );
|
|
$css->add_property( 'color', $settings['textColor'] );
|
|
$css->add_property( 'background-color', generateblocks_hex2rgba( $settings['backgroundColor'], $settings['backgroundColorOpacity'] ) );
|
|
|
|
if ( $blockVersion < 2 && $settings['inlineWidth'] ) {
|
|
if ( $settings['hasIcon'] ) {
|
|
$css->add_property( 'display', 'inline-flex' );
|
|
} else {
|
|
$css->add_property( 'display', 'inline-block' );
|
|
}
|
|
}
|
|
|
|
if ( $blockVersion < 2 && $settings['hasIcon'] ) {
|
|
if ( ! $settings['inlineWidth'] ) {
|
|
$css->add_property( 'display', 'flex' );
|
|
}
|
|
|
|
if ( 'above' === $settings['iconLocation'] ) {
|
|
$css->add_property( 'text-align', $settings['alignment'] );
|
|
} else {
|
|
$css->add_property( 'justify-content', generateblocks_get_flexbox_alignment( $settings['alignment'] ) );
|
|
}
|
|
|
|
if ( 'inline' === $settings['iconLocation'] ) {
|
|
$css->add_property( 'align-items', generateblocks_get_flexbox_alignment( $settings['iconVerticalAlignment'] ) );
|
|
}
|
|
|
|
if ( 'above' === $settings['iconLocation'] ) {
|
|
$css->add_property( 'flex-direction', 'column' );
|
|
}
|
|
}
|
|
|
|
$css->set_selector( $selector . ' a' );
|
|
$css->add_property( 'color', $settings['linkColor'] );
|
|
|
|
$css->set_selector( $selector . ' a:hover' );
|
|
$css->add_property( 'color', $settings['linkColorHover'] );
|
|
|
|
if ( $settings['hasIcon'] ) {
|
|
$css->set_selector( $selector . ' .gb-icon' );
|
|
$css->add_property( 'line-height', '0' );
|
|
$css->add_property( 'color', generateblocks_hex2rgba( $settings['iconColor'], $settings['iconColorOpacity'] ) );
|
|
|
|
if ( ! $settings['removeText'] ) {
|
|
if ( $blockVersion < 3 ) {
|
|
// Need to check for blockVersion here instead of mapping as iconPaddingRight has a default.
|
|
$css->add_property( 'padding', array( $settings['iconPaddingTop'], $settings['iconPaddingRight'], $settings['iconPaddingBottom'], $settings['iconPaddingLeft'] ), $settings['iconPaddingUnit'] );
|
|
} else {
|
|
$css->add_property(
|
|
'padding',
|
|
array(
|
|
generateblocks_get_array_attribute_value( 'paddingTop', $settings['iconStyles'] ),
|
|
generateblocks_get_array_attribute_value( 'paddingRight', $settings['iconStyles'] ),
|
|
generateblocks_get_array_attribute_value( 'paddingBottom', $settings['iconStyles'] ),
|
|
generateblocks_get_array_attribute_value( 'paddingLeft', $settings['iconStyles'] ),
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
if ( $blockVersion < 2 ) {
|
|
if ( 'above' === $settings['iconLocation'] ) {
|
|
$css->add_property( 'display', 'inline' );
|
|
} else {
|
|
$css->add_property( 'display', 'inline-flex' );
|
|
}
|
|
}
|
|
|
|
$css->set_selector( $selector . ' .gb-icon svg' );
|
|
|
|
if ( $blockVersion < 3 ) {
|
|
$css->add_property( 'width', $settings['iconSize'], $settings['iconSizeUnit'] );
|
|
$css->add_property( 'height', $settings['iconSize'], $settings['iconSizeUnit'] );
|
|
}
|
|
|
|
$css->add_property( 'width', generateblocks_get_array_attribute_value( 'width', $settings['iconStyles'] ) );
|
|
$css->add_property( 'height', generateblocks_get_array_attribute_value( 'height', $settings['iconStyles'] ) );
|
|
$css->add_property( 'fill', 'currentColor' );
|
|
}
|
|
|
|
if ( $settings['highlightTextColor'] ) {
|
|
$css->set_selector( $selector . ' .gb-highlight' );
|
|
$css->add_property( 'color', $settings['highlightTextColor'] );
|
|
}
|
|
|
|
$tablet_css->set_selector( $selector );
|
|
generateblocks_add_layout_css( $tablet_css, $settings, 'Tablet' );
|
|
generateblocks_add_sizing_css( $tablet_css, $settings, 'Tablet' );
|
|
generateblocks_add_flex_child_css( $tablet_css, $settings, 'Tablet' );
|
|
generateblocks_add_typography_css( $tablet_css, $settings, 'Tablet' );
|
|
generateblocks_add_spacing_css( $tablet_css, $settings, 'Tablet' );
|
|
generateblocks_add_border_css( $tablet_css, $settings, 'Tablet' );
|
|
|
|
if ( $blockVersion < 2 && $settings['inlineWidthTablet'] ) {
|
|
if ( $settings['hasIcon'] ) {
|
|
$tablet_css->add_property( 'display', 'inline-flex' );
|
|
} else {
|
|
$tablet_css->add_property( 'display', 'inline-block' );
|
|
}
|
|
}
|
|
|
|
if ( $settings['hasIcon'] ) {
|
|
if ( $blockVersion < 2 ) {
|
|
$tablet_css->add_property( 'justify-content', generateblocks_get_flexbox_alignment( $settings['alignmentTablet'] ) );
|
|
|
|
if ( 'inline' === $settings['iconLocationTablet'] ) {
|
|
$tablet_css->add_property( 'align-items', generateblocks_get_flexbox_alignment( $settings['iconVerticalAlignmentTablet'] ) );
|
|
}
|
|
|
|
if ( 'above' === $settings['iconLocationTablet'] ) {
|
|
$tablet_css->add_property( 'flex-direction', 'column' );
|
|
}
|
|
}
|
|
|
|
$tablet_css->set_selector( $selector . ' .gb-icon' );
|
|
|
|
if ( ! $settings['removeText'] ) {
|
|
if ( $blockVersion < 3 ) {
|
|
$tablet_css->add_property( 'padding', array( $settings['iconPaddingTopTablet'], $settings['iconPaddingRightTablet'], $settings['iconPaddingBottomTablet'], $settings['iconPaddingLeftTablet'] ), $settings['iconPaddingUnit'] );
|
|
} else {
|
|
$tablet_css->add_property(
|
|
'padding',
|
|
array(
|
|
generateblocks_get_array_attribute_value( 'paddingTopTablet', $settings['iconStyles'] ),
|
|
generateblocks_get_array_attribute_value( 'paddingRightTablet', $settings['iconStyles'] ),
|
|
generateblocks_get_array_attribute_value( 'paddingBottomTablet', $settings['iconStyles'] ),
|
|
generateblocks_get_array_attribute_value( 'paddingLeftTablet', $settings['iconStyles'] ),
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
if ( $blockVersion < 2 ) {
|
|
if ( 'above' === $settings['iconLocationTablet'] || ( 'above' === $settings['iconLocation'] && '' == $settings['iconLocationTablet'] ) ) { // phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
|
|
$tablet_css->add_property( 'align-self', generateblocks_get_flexbox_alignment( $settings['alignmentTablet'] ) );
|
|
}
|
|
|
|
if ( 'above' === $settings['iconLocationTablet'] ) {
|
|
$tablet_css->add_property( 'display', 'inline' );
|
|
}
|
|
}
|
|
|
|
$tablet_css->set_selector( $selector . ' .gb-icon svg' );
|
|
|
|
if ( $blockVersion < 3 ) {
|
|
$tablet_css->add_property( 'width', $settings['iconSizeTablet'], $settings['iconSizeUnit'] );
|
|
$tablet_css->add_property( 'height', $settings['iconSizeTablet'], $settings['iconSizeUnit'] );
|
|
}
|
|
|
|
$tablet_css->add_property( 'width', generateblocks_get_array_attribute_value( 'widthTablet', $settings['iconStyles'] ) );
|
|
$tablet_css->add_property( 'height', generateblocks_get_array_attribute_value( 'heightTablet', $settings['iconStyles'] ) );
|
|
}
|
|
|
|
$mobile_css->set_selector( $selector );
|
|
generateblocks_add_layout_css( $mobile_css, $settings, 'Mobile' );
|
|
generateblocks_add_sizing_css( $mobile_css, $settings, 'Mobile' );
|
|
generateblocks_add_flex_child_css( $mobile_css, $settings, 'Mobile' );
|
|
generateblocks_add_typography_css( $mobile_css, $settings, 'Mobile' );
|
|
generateblocks_add_spacing_css( $mobile_css, $settings, 'Mobile' );
|
|
generateblocks_add_border_css( $mobile_css, $settings, 'Mobile' );
|
|
|
|
if ( $blockVersion < 2 && $settings['inlineWidthMobile'] ) {
|
|
if ( $settings['hasIcon'] ) {
|
|
$mobile_css->add_property( 'display', 'inline-flex' );
|
|
} else {
|
|
$mobile_css->add_property( 'display', 'inline-block' );
|
|
}
|
|
}
|
|
|
|
if ( $settings['hasIcon'] ) {
|
|
if ( $blockVersion < 2 ) {
|
|
$mobile_css->add_property( 'justify-content', generateblocks_get_flexbox_alignment( $settings['alignmentMobile'] ) );
|
|
|
|
if ( 'inline' === $settings['iconLocationMobile'] ) {
|
|
$mobile_css->add_property( 'align-items', generateblocks_get_flexbox_alignment( $settings['iconVerticalAlignmentMobile'] ) );
|
|
}
|
|
|
|
if ( 'above' === $settings['iconLocationMobile'] ) {
|
|
$mobile_css->add_property( 'flex-direction', 'column' );
|
|
}
|
|
}
|
|
|
|
$mobile_css->set_selector( $selector . ' .gb-icon' );
|
|
|
|
if ( ! $settings['removeText'] ) {
|
|
if ( $blockVersion < 3 ) {
|
|
$mobile_css->add_property( 'padding', array( $settings['iconPaddingTopMobile'], $settings['iconPaddingRightMobile'], $settings['iconPaddingBottomMobile'], $settings['iconPaddingLeftMobile'] ), $settings['iconPaddingUnit'] );
|
|
} else {
|
|
$mobile_css->add_property(
|
|
'padding',
|
|
array(
|
|
generateblocks_get_array_attribute_value( 'paddingTopMobile', $settings['iconStyles'] ),
|
|
generateblocks_get_array_attribute_value( 'paddingRightMobile', $settings['iconStyles'] ),
|
|
generateblocks_get_array_attribute_value( 'paddingBottomMobile', $settings['iconStyles'] ),
|
|
generateblocks_get_array_attribute_value( 'paddingLeftMobile', $settings['iconStyles'] ),
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
if ( $blockVersion < 2 ) {
|
|
if ( 'above' === $settings['iconLocationMobile'] || ( 'above' === $settings['iconLocation'] && '' == $settings['iconLocationMobile'] ) ) { // phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
|
|
$mobile_css->add_property( 'align-self', generateblocks_get_flexbox_alignment( $settings['alignmentMobile'] ) );
|
|
}
|
|
|
|
if ( 'above' === $settings['iconLocationMobile'] ) {
|
|
$mobile_css->add_property( 'display', 'inline' );
|
|
}
|
|
}
|
|
|
|
$mobile_css->set_selector( $selector . ' .gb-icon svg' );
|
|
|
|
if ( $blockVersion < 3 ) {
|
|
$mobile_css->add_property( 'width', $settings['iconSizeMobile'], $settings['iconSizeUnit'] );
|
|
$mobile_css->add_property( 'height', $settings['iconSizeMobile'], $settings['iconSizeUnit'] );
|
|
}
|
|
|
|
$mobile_css->add_property( 'width', generateblocks_get_array_attribute_value( 'widthMobile', $settings['iconStyles'] ) );
|
|
$mobile_css->add_property( 'height', generateblocks_get_array_attribute_value( 'heightMobile', $settings['iconStyles'] ) );
|
|
}
|
|
} else {
|
|
/**
|
|
* All of the below CSS is when the Headline block had a surrounding `div` element.
|
|
* This surroundng div was deprecated in 1.2.0.
|
|
*
|
|
* @TODO Move this CSS to separate function to clean up this function.
|
|
*/
|
|
$fontFamily = $settings['fontFamily'];
|
|
|
|
if ( $fontFamily && $settings['fontFamilyFallback'] ) {
|
|
$fontFamily = $fontFamily . ', ' . $settings['fontFamilyFallback'];
|
|
}
|
|
|
|
$css->set_selector( '.gb-headline-wrapper' );
|
|
$css->add_property( 'display', 'flex' );
|
|
|
|
$css->set_selector( '.gb-headline-wrapper > .gb-headline' );
|
|
$css->add_property( 'margin', '0' );
|
|
$css->add_property( 'padding', '0' );
|
|
|
|
$css->set_selector( '.gb-headline-' . $id );
|
|
$css->add_property( 'font-family', $fontFamily );
|
|
$css->add_property( 'text-align', $settings['alignment'] );
|
|
$css->add_property( 'color', $settings['textColor'] );
|
|
|
|
if ( ! $settings['hasIcon'] ) {
|
|
$css->add_property( 'background-color', generateblocks_hex2rgba( $settings['backgroundColor'], $settings['backgroundColorOpacity'] ) );
|
|
|
|
if ( $settings['inlineWidth'] ) {
|
|
$css->add_property( 'display', 'inline-block' );
|
|
}
|
|
|
|
$css->add_property( 'border-width', array( $settings['borderSizeTop'], $settings['borderSizeRight'], $settings['borderSizeBottom'], $settings['borderSizeLeft'] ), 'px' );
|
|
$css->add_property( 'border-color', generateblocks_hex2rgba( $settings['borderColor'], $settings['borderColorOpacity'] ) );
|
|
}
|
|
|
|
$css->add_property( 'font-size', $settings['fontSize'], $settings['fontSizeUnit'] );
|
|
$css->add_property( 'font-weight', $settings['fontWeight'] );
|
|
$css->add_property( 'text-transform', $settings['textTransform'] );
|
|
$css->add_property( 'line-height', $settings['lineHeight'], $settings['lineHeightUnit'] );
|
|
$css->add_property( 'letter-spacing', $settings['letterSpacing'], 'em' );
|
|
|
|
if ( ! $settings['hasIcon'] ) {
|
|
$css->add_property( 'padding', array( $settings['paddingTop'], $settings['paddingRight'], $settings['paddingBottom'], $settings['paddingLeft'] ), $settings['paddingUnit'] );
|
|
$css->add_property( 'margin', array( $settings['marginTop'], $settings['marginRight'], $settings['marginBottom'], $settings['marginLeft'] ), $settings['marginUnit'] );
|
|
|
|
if ( function_exists( 'generate_get_default_fonts' ) && '' === $settings['marginBottom'] ) {
|
|
$defaultBlockStyles = generateblocks_get_default_styles();
|
|
|
|
if ( isset( $defaultBlockStyles['headline'][ $settings['element'] ]['marginBottom'] ) ) {
|
|
$css->add_property( 'margin-bottom', $defaultBlockStyles['headline'][ $settings['element'] ]['marginBottom'], $defaultBlockStyles['headline'][ $settings['element'] ]['marginUnit'] );
|
|
}
|
|
}
|
|
}
|
|
|
|
$css->set_selector( '.gb-headline-' . $id . ' a, .gb-headline-' . $id . ' a:visited' );
|
|
$css->add_property( 'color', $settings['linkColor'] );
|
|
|
|
$css->set_selector( '.gb-headline-' . $id . ' a:hover' );
|
|
$css->add_property( 'color', $settings['linkColorHover'] );
|
|
|
|
if ( $settings['hasIcon'] ) {
|
|
$css->set_selector( '.gb-headline-wrapper-' . $id . ' .gb-icon' );
|
|
$css->add_property( 'line-height', '0' );
|
|
|
|
if ( ! $settings['removeText'] ) {
|
|
$css->add_property( 'padding', array( $settings['iconPaddingTop'], $settings['iconPaddingRight'], $settings['iconPaddingBottom'], $settings['iconPaddingLeft'] ), $settings['iconPaddingUnit'] );
|
|
}
|
|
|
|
$css->add_property( 'color', generateblocks_hex2rgba( $settings['iconColor'], $settings['iconColorOpacity'] ) );
|
|
|
|
if ( 'above' === $settings['iconLocation'] ) {
|
|
$css->add_property( 'display', 'inline' );
|
|
}
|
|
|
|
$css->set_selector( '.gb-headline-wrapper-' . $id . ' .gb-icon svg' );
|
|
$css->add_property( 'width', $settings['iconSize'], $settings['iconSizeUnit'] );
|
|
$css->add_property( 'height', $settings['iconSize'], $settings['iconSizeUnit'] );
|
|
$css->add_property( 'fill', 'currentColor' );
|
|
|
|
$css->set_selector( '.gb-headline-wrapper-' . $id );
|
|
$css->add_property( 'padding', array( $settings['paddingTop'], $settings['paddingRight'], $settings['paddingBottom'], $settings['paddingLeft'] ), $settings['paddingUnit'] );
|
|
$css->add_property( 'margin', array( $settings['marginTop'], $settings['marginRight'], $settings['marginBottom'], $settings['marginLeft'] ), $settings['marginUnit'] );
|
|
|
|
$defaultBlockStyles = generateblocks_get_default_styles();
|
|
|
|
if ( '' === $settings['marginBottom'] && ! $settings['removeText'] && isset( $defaultBlockStyles['headline'][ $settings['element'] ]['marginBottom'] ) && is_numeric( $defaultBlockStyles['headline'][ $settings['element'] ]['marginBottom'] ) ) {
|
|
$css->add_property( 'margin-bottom', $defaultBlockStyles['headline'][ $settings['element'] ]['marginBottom'], $defaultBlockStyles['headline'][ $settings['element'] ]['marginUnit'] );
|
|
}
|
|
|
|
if ( '' === $settings['fontSize'] && ! $settings['removeText'] && isset( $defaultBlockStyles['headline'][ $settings['element'] ]['fontSize'] ) ) {
|
|
$css->add_property( 'font-size', $defaultBlockStyles['headline'][ $settings['element'] ]['fontSize'], $defaultBlockStyles['headline'][ $settings['element'] ]['fontSizeUnit'] );
|
|
} else {
|
|
$css->add_property( 'font-size', $settings['fontSize'], $settings['fontSizeUnit'] );
|
|
}
|
|
|
|
if ( 'above' === $settings['iconLocation'] ) {
|
|
$css->add_property( 'text-align', $settings['alignment'] );
|
|
} else {
|
|
$css->add_property( 'justify-content', generateblocks_get_flexbox_alignment( $settings['alignment'] ) );
|
|
}
|
|
|
|
if ( $settings['inlineWidth'] ) {
|
|
$css->add_property( 'display', 'inline-flex' );
|
|
}
|
|
|
|
if ( 'inline' === $settings['iconLocation'] ) {
|
|
$css->add_property( 'align-items', generateblocks_get_flexbox_alignment( $settings['iconVerticalAlignment'] ) );
|
|
}
|
|
|
|
$css->add_property( 'background-color', generateblocks_hex2rgba( $settings['backgroundColor'], $settings['backgroundColorOpacity'] ) );
|
|
$css->add_property( 'color', $settings['textColor'] );
|
|
$css->add_property( 'border-width', array( $settings['borderSizeTop'], $settings['borderSizeRight'], $settings['borderSizeBottom'], $settings['borderSizeLeft'] ), 'px' );
|
|
$css->add_property( 'border-color', generateblocks_hex2rgba( $settings['borderColor'], $settings['borderColorOpacity'] ) );
|
|
|
|
if ( 'above' === $settings['iconLocation'] ) {
|
|
$css->add_property( 'flex-direction', 'column' );
|
|
}
|
|
}
|
|
|
|
if ( $settings['highlightTextColor'] ) {
|
|
$css->set_selector( '.gb-headline-' . $id . ' .gb-highlight' );
|
|
$css->add_property( 'color', $settings['highlightTextColor'] );
|
|
}
|
|
|
|
$tablet_css->set_selector( '.gb-headline-' . $id );
|
|
$tablet_css->add_property( 'text-align', $settings['alignmentTablet'] );
|
|
$tablet_css->add_property( 'font-size', $settings['fontSizeTablet'], $settings['fontSizeUnit'] );
|
|
$tablet_css->add_property( 'line-height', $settings['lineHeightTablet'], $settings['lineHeightUnit'] );
|
|
$tablet_css->add_property( 'letter-spacing', $settings['letterSpacingTablet'], 'em' );
|
|
|
|
if ( ! $settings['hasIcon'] ) {
|
|
$tablet_css->add_property( 'margin', array( $settings['marginTopTablet'], $settings['marginRightTablet'], $settings['marginBottomTablet'], $settings['marginLeftTablet'] ), $settings['marginUnit'] );
|
|
$tablet_css->add_property( 'padding', array( $settings['paddingTopTablet'], $settings['paddingRightTablet'], $settings['paddingBottomTablet'], $settings['paddingLeftTablet'] ), $settings['paddingUnit'] );
|
|
$tablet_css->add_property( 'border-width', array( $settings['borderSizeTopTablet'], $settings['borderSizeRightTablet'], $settings['borderSizeBottomTablet'], $settings['borderSizeLeftTablet'] ), 'px' );
|
|
|
|
if ( $settings['inlineWidthTablet'] ) {
|
|
$tablet_css->add_property( 'display', 'inline-flex' );
|
|
}
|
|
}
|
|
|
|
if ( $settings['hasIcon'] ) {
|
|
$tablet_css->set_selector( '.gb-headline-wrapper-' . $id . ' .gb-icon' );
|
|
|
|
if ( ! $settings['removeText'] ) {
|
|
$tablet_css->add_property( 'padding', array( $settings['iconPaddingTopTablet'], $settings['iconPaddingRightTablet'], $settings['iconPaddingBottomTablet'], $settings['iconPaddingLeftTablet'] ), $settings['iconPaddingUnit'] );
|
|
}
|
|
|
|
if ( 'above' === $settings['iconLocationTablet'] || ( 'above' === $settings['iconLocation'] && '' == $settings['iconLocationTablet'] ) ) { // phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
|
|
$tablet_css->add_property( 'align-self', generateblocks_get_flexbox_alignment( $settings['alignmentTablet'] ) );
|
|
}
|
|
|
|
$tablet_css->set_selector( '.gb-headline-wrapper-' . $id . ' .gb-icon svg' );
|
|
$tablet_css->add_property( 'width', $settings['iconSizeTablet'], $settings['iconSizeUnit'] );
|
|
$tablet_css->add_property( 'height', $settings['iconSizeTablet'], $settings['iconSizeUnit'] );
|
|
|
|
$tablet_css->set_selector( '.gb-headline-wrapper-' . $id );
|
|
$tablet_css->add_property( 'margin', array( $settings['marginTopTablet'], $settings['marginRightTablet'], $settings['marginBottomTablet'], $settings['marginLeftTablet'] ), $settings['marginUnit'] );
|
|
$tablet_css->add_property( 'padding', array( $settings['paddingTopTablet'], $settings['paddingRightTablet'], $settings['paddingBottomTablet'], $settings['paddingLeftTablet'] ), $settings['paddingUnit'] );
|
|
$tablet_css->add_property( 'border-width', array( $settings['borderSizeTopTablet'], $settings['borderSizeRightTablet'], $settings['borderSizeBottomTablet'], $settings['borderSizeLeftTablet'] ), 'px' );
|
|
$tablet_css->add_property( 'justify-content', generateblocks_get_flexbox_alignment( $settings['alignmentTablet'] ) );
|
|
|
|
$defaultBlockStyles = generateblocks_get_default_styles();
|
|
|
|
if ( '' === $settings['marginBottomTablet'] && ! $settings['removeText'] && isset( $defaultBlockStyles['headline'][ $settings['element'] ]['marginBottomTablet'] ) && is_numeric( $defaultBlockStyles['headline'][ $settings['element'] ]['marginBottomTablet'] ) ) {
|
|
$tablet_css->add_property( 'margin-bottom', $defaultBlockStyles['headline'][ $settings['element'] ]['marginBottomTablet'], $defaultBlockStyles['headline'][ $settings['element'] ]['marginUnit'] );
|
|
}
|
|
|
|
if ( '' === $settings['fontSizeTablet'] && ! $settings['removeText'] && isset( $defaultBlockStyles['headline'][ $settings['element'] ]['fontSizeTablet'] ) ) {
|
|
$tablet_css->add_property( 'font-size', $defaultBlockStyles['headline'][ $settings['element'] ]['fontSizeTablet'], $defaultBlockStyles['headline'][ $settings['element'] ]['fontSizeUnit'] );
|
|
} else {
|
|
$tablet_css->add_property( 'font-size', $settings['fontSizeTablet'], $settings['fontSizeUnit'] );
|
|
}
|
|
|
|
if ( $settings['inlineWidthTablet'] ) {
|
|
$tablet_css->add_property( 'display', 'inline-flex' );
|
|
}
|
|
|
|
if ( 'inline' === $settings['iconLocationTablet'] ) {
|
|
$tablet_css->add_property( 'align-items', generateblocks_get_flexbox_alignment( $settings['iconVerticalAlignmentTablet'] ) );
|
|
}
|
|
|
|
if ( 'above' === $settings['iconLocationTablet'] ) {
|
|
$tablet_css->add_property( 'flex-direction', 'column' );
|
|
}
|
|
}
|
|
|
|
$mobile_css->set_selector( '.gb-headline-' . $id );
|
|
$mobile_css->add_property( 'text-align', $settings['alignmentMobile'] );
|
|
$mobile_css->add_property( 'font-size', $settings['fontSizeMobile'], $settings['fontSizeUnit'] );
|
|
$mobile_css->add_property( 'line-height', $settings['lineHeightMobile'], $settings['lineHeightUnit'] );
|
|
$mobile_css->add_property( 'letter-spacing', $settings['letterSpacingMobile'], 'em' );
|
|
|
|
if ( ! $settings['hasIcon'] ) {
|
|
$mobile_css->add_property( 'margin', array( $settings['marginTopMobile'], $settings['marginRightMobile'], $settings['marginBottomMobile'], $settings['marginLeftMobile'] ), $settings['marginUnit'] );
|
|
$mobile_css->add_property( 'padding', array( $settings['paddingTopMobile'], $settings['paddingRightMobile'], $settings['paddingBottomMobile'], $settings['paddingLeftMobile'] ), $settings['paddingUnit'] );
|
|
$mobile_css->add_property( 'border-width', array( $settings['borderSizeTopMobile'], $settings['borderSizeRightMobile'], $settings['borderSizeBottomMobile'], $settings['borderSizeLeftMobile'] ), 'px' );
|
|
|
|
if ( $settings['inlineWidthMobile'] ) {
|
|
$mobile_css->add_property( 'display', 'inline-flex' );
|
|
}
|
|
}
|
|
|
|
if ( $settings['hasIcon'] ) {
|
|
$mobile_css->set_selector( '.gb-headline-wrapper-' . $id . ' .gb-icon' );
|
|
|
|
if ( ! $settings['removeText'] ) {
|
|
$mobile_css->add_property( 'padding', array( $settings['iconPaddingTopMobile'], $settings['iconPaddingRightMobile'], $settings['iconPaddingBottomMobile'], $settings['iconPaddingLeftMobile'] ), $settings['iconPaddingUnit'] );
|
|
}
|
|
|
|
if ( 'above' === $settings['iconLocationMobile'] || ( 'above' === $settings['iconLocation'] && '' == $settings['iconLocationMobile'] ) || ( 'above' === $settings['iconLocationTablet'] && '' == $settings['iconLocationMobile'] ) ) { // phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
|
|
$mobile_css->add_property( 'align-self', generateblocks_get_flexbox_alignment( $settings['alignmentMobile'] ) );
|
|
}
|
|
|
|
$mobile_css->set_selector( '.gb-headline-wrapper-' . $id . ' .gb-icon svg' );
|
|
$mobile_css->add_property( 'width', $settings['iconSizeMobile'], $settings['iconSizeUnit'] );
|
|
$mobile_css->add_property( 'height', $settings['iconSizeMobile'], $settings['iconSizeUnit'] );
|
|
|
|
$mobile_css->set_selector( '.gb-headline-wrapper-' . $id );
|
|
$mobile_css->add_property( 'margin', array( $settings['marginTopMobile'], $settings['marginRightMobile'], $settings['marginBottomMobile'], $settings['marginLeftMobile'] ), $settings['marginUnit'] );
|
|
$mobile_css->add_property( 'padding', array( $settings['paddingTopMobile'], $settings['paddingRightMobile'], $settings['paddingBottomMobile'], $settings['paddingLeftMobile'] ), $settings['paddingUnit'] );
|
|
$mobile_css->add_property( 'justify-content', generateblocks_get_flexbox_alignment( $settings['alignmentMobile'] ) );
|
|
|
|
$defaultBlockStyles = generateblocks_get_default_styles();
|
|
|
|
if ( '' === $settings['marginBottomMobile'] && ! $settings['removeText'] && isset( $defaultBlockStyles['headline'][ $settings['element'] ]['marginBottomMobile'] ) && is_numeric( $defaultBlockStyles['headline'][ $settings['element'] ]['marginBottomMobile'] ) ) {
|
|
$mobile_css->add_property( 'margin-bottom', $defaultBlockStyles['headline'][ $settings['element'] ]['marginBottomMobile'], $defaultBlockStyles['headline'][ $settings['element'] ]['marginUnit'] );
|
|
}
|
|
|
|
if ( '' === $settings['fontSizeMobile'] && ! $settings['removeText'] && ! empty( $defaultBlockStyles['headline'][ $settings['element'] ]['fontSizeMobile'] ) ) {
|
|
$mobile_css->add_property( 'font-size', $defaultBlockStyles['headline'][ $settings['element'] ]['fontSizeMobile'], $defaultBlockStyles['headline'][ $settings['element'] ]['fontSizeUnit'] );
|
|
} else {
|
|
$mobile_css->add_property( 'font-size', $settings['fontSizeMobile'], $settings['fontSizeUnit'] );
|
|
}
|
|
|
|
if ( $settings['inlineWidthMobile'] ) {
|
|
$mobile_css->add_property( 'display', 'inline-flex' );
|
|
}
|
|
|
|
if ( 'inline' === $settings['iconLocationMobile'] ) {
|
|
$mobile_css->add_property( 'align-items', generateblocks_get_flexbox_alignment( $settings['iconVerticalAlignmentMobile'] ) );
|
|
}
|
|
|
|
if ( 'above' === $settings['iconLocationMobile'] ) {
|
|
$mobile_css->add_property( 'flex-direction', 'column' );
|
|
}
|
|
}
|
|
}
|
|
|
|
// Store this block ID in memory.
|
|
self::store_block_id( $id );
|
|
|
|
/**
|
|
* Do generateblocks_block_css_data hook
|
|
*
|
|
* @since 1.0
|
|
*
|
|
* @param string $name The name of our block.
|
|
* @param array $settings The settings for the current block.
|
|
* @param object $css Our desktop/main CSS data.
|
|
* @param object $desktop_css Our desktop only CSS data.
|
|
* @param object $tablet_css Our tablet CSS data.
|
|
* @param object $tablet_only_css Our tablet only CSS data.
|
|
* @param object $mobile_css Our mobile CSS data.
|
|
*/
|
|
do_action(
|
|
'generateblocks_block_css_data',
|
|
'headline',
|
|
$settings,
|
|
$css,
|
|
$desktop_css,
|
|
$tablet_css,
|
|
$tablet_only_css,
|
|
$mobile_css
|
|
);
|
|
|
|
return [
|
|
'main' => $css->css_output(),
|
|
'desktop' => $desktop_css->css_output(),
|
|
'tablet' => $tablet_css->css_output(),
|
|
'tablet_only' => $tablet_only_css->css_output(),
|
|
'mobile' => $mobile_css->css_output(),
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Wrapper function for our dynamic buttons.
|
|
*
|
|
* @since 1.6.0
|
|
* @param array $attributes The block attributes.
|
|
* @param string $content The dynamic text to display.
|
|
* @param WP_Block $block Block instance.
|
|
*/
|
|
public static function render_block( $attributes, $content, $block ) {
|
|
if ( strpos( trim( $content ), '<div class="gb-headline-wrapper' ) === 0 ) {
|
|
$attributes['hasWrapper'] = true;
|
|
}
|
|
|
|
if ( ! isset( $attributes['useDynamicData'] ) || ! $attributes['useDynamicData'] ) {
|
|
// Add styles to this block if needed.
|
|
$content = generateblocks_maybe_add_block_css(
|
|
$content,
|
|
[
|
|
'class_name' => 'GenerateBlocks_Block_Headline',
|
|
'attributes' => $attributes,
|
|
'block_ids' => self::$block_ids,
|
|
]
|
|
);
|
|
|
|
return $content;
|
|
}
|
|
|
|
$allow_empty_content = false;
|
|
|
|
if ( empty( $attributes['dynamicContentType'] ) ) {
|
|
$dynamic_content = GenerateBlocks_Dynamic_Content::get_static_content( $content );
|
|
|
|
if ( ! empty( $attributes['hasIcon'] ) && ! empty( $attributes['removeText'] ) ) {
|
|
// Allow icon-only items to continue.
|
|
$allow_empty_content = true;
|
|
}
|
|
} else {
|
|
$dynamic_content = GenerateBlocks_Dynamic_Content::get_content( $attributes, $block );
|
|
}
|
|
|
|
if ( ! $dynamic_content && '0' !== $dynamic_content && ! $allow_empty_content ) {
|
|
return '';
|
|
}
|
|
|
|
$defaults = generateblocks_get_block_defaults();
|
|
|
|
$settings = wp_parse_args(
|
|
$attributes,
|
|
$defaults['headline']
|
|
);
|
|
|
|
$classNames = array(
|
|
'gb-headline',
|
|
'gb-headline-' . $settings['uniqueId'],
|
|
);
|
|
|
|
if ( ! empty( $settings['className'] ) ) {
|
|
$classNames[] = $settings['className'];
|
|
}
|
|
|
|
if ( empty( $settings['hasIcon'] ) ) {
|
|
$classNames[] = 'gb-headline-text';
|
|
}
|
|
|
|
$tagName = apply_filters(
|
|
'generateblocks_dynamic_headline_tagname',
|
|
$settings['element'],
|
|
$attributes,
|
|
$block
|
|
);
|
|
|
|
$allowedTagNames = apply_filters(
|
|
'generateblocks_dynamic_headline_allowed_tagnames',
|
|
array(
|
|
'h1',
|
|
'h2',
|
|
'h3',
|
|
'h4',
|
|
'h5',
|
|
'h6',
|
|
'div',
|
|
'p',
|
|
'figcaption',
|
|
),
|
|
$attributes,
|
|
$block
|
|
);
|
|
|
|
if ( ! in_array( $tagName, $allowedTagNames ) ) {
|
|
$tagName = 'div';
|
|
}
|
|
|
|
// Add styles to this block if needed.
|
|
$output = generateblocks_maybe_add_block_css(
|
|
'',
|
|
[
|
|
'class_name' => 'GenerateBlocks_Block_Headline',
|
|
'attributes' => $attributes,
|
|
'block_ids' => self::$block_ids,
|
|
]
|
|
);
|
|
|
|
$output .= sprintf(
|
|
'<%1$s %2$s>',
|
|
$tagName,
|
|
generateblocks_attr(
|
|
'dynamic-headline',
|
|
array(
|
|
'id' => isset( $settings['anchor'] ) ? $settings['anchor'] : null,
|
|
'class' => implode( ' ', $classNames ),
|
|
),
|
|
$settings,
|
|
$block
|
|
)
|
|
);
|
|
|
|
$icon_html = '';
|
|
|
|
// Extract our icon from the static HTML.
|
|
if ( $settings['hasIcon'] ) {
|
|
$icon_html = GenerateBlocks_Dynamic_Content::get_icon_html( $content );
|
|
|
|
if ( $icon_html ) {
|
|
$output .= $icon_html;
|
|
$output .= '<span class="gb-headline-text">';
|
|
}
|
|
}
|
|
|
|
$dynamic_link = GenerateBlocks_Dynamic_Content::get_dynamic_url( $attributes, $block );
|
|
|
|
if ( $dynamic_link ) {
|
|
$dynamic_content = sprintf(
|
|
'<a href="%s">%s</a>',
|
|
esc_url( $dynamic_link ),
|
|
$dynamic_content
|
|
);
|
|
}
|
|
|
|
$output .= $dynamic_content;
|
|
|
|
if ( $icon_html ) {
|
|
$output .= '</span>';
|
|
}
|
|
|
|
$output .= sprintf(
|
|
'</%s>',
|
|
$tagName
|
|
);
|
|
|
|
return $output;
|
|
}
|
|
}
|