File: /var/www/html/insiders/wp-load/wp-content/plugins/gutenmate/block-supports/block-props.php
<?php
defined( 'GTM_BLOCK_SUPPORT_PROPS_KEY' ) || define( 'GTM_BLOCK_SUPPORT_PROPS_KEY', 'gtmBlockProps' );
function gtm_getBlockPropsSupport( $block_type ) {
$support = gtm_get_block_support( $block_type, [GTM_BLOCK_SUPPORT_PROPS_KEY], false );
if ( ! empty( $support ) ) {
return $support;
}
return false;
}
/**
* Registers the align block attribute for block types that support it.
*
* @param WP_Block_Type $block_type Block Type.
*/
function gtm_register_block_props_support( $block_type ) {
$support = gtm_getBlockPropsSupport( $block_type );
if ( $support ) {
add_filter( "gtm.BlockStyleCompiler.{$block_type->name}", 'gtm_compile_css_block_props', 10, 3 );
if ( ! $block_type->attributes ) {
$block_type->attributes = [];
}
if ( ! empty( $support['width'] ) ) {
if ( ! array_key_exists( 'gtmWidth', $block_type->attributes ) ) {
$block_type->attributes['gtmWidth'] = [
'type' => 'object',
'default' => [],
];
}
}
if ( ! empty( $support['height'] ) ) {
if ( ! array_key_exists( 'gtmHeight', $block_type->attributes ) ) {
$block_type->attributes['gtmHeight'] = [
'type' => 'object',
'default' => [],
];
}
}
if ( ! empty( $support['margin'] ) ) {
if ( ! array_key_exists( 'gtmMargin', $block_type->attributes ) ) {
$block_type->attributes['gtmMargin'] = [
'type' => 'object',
'default' => [],
];
}
}
if ( ! empty( $support['padding'] ) ) {
if ( ! array_key_exists( 'gtmPadding', $block_type->attributes ) ) {
$block_type->attributes['gtmPadding'] = [
'type' => 'object',
'default' => [],
];
}
}
if ( ! empty( $support['radius'] ) ) {
if ( ! array_key_exists( 'gtmRadius', $block_type->attributes ) ) {
$block_type->attributes['gtmRadius'] = [
'type' => ['string', 'object'],
'default' => "",
];
}
}
if ( ! empty( $support['shadow'] ) ) {
if ( ! array_key_exists( 'gtmShadow', $block_type->attributes ) ) {
$block_type->attributes['gtmShadow'] = [
'type' => 'string',
'default' => '',
];
}
}
if ( ! empty( $support['bg'] ) ) {
if ( ! array_key_exists( 'gtmBg', $block_type->attributes ) ) {
$block_type->attributes['gtmBg'] = [
'type' => 'object',
'default' => [],
];
}
}
if ( ! empty( $support['color'] ) ) {
if ( ! array_key_exists( 'gtmColor', $block_type->attributes ) ) {
$block_type->attributes['gtmColor'] = [
'type' => 'string',
'default' => '',
];
}
}
if ( ! empty( $support['typography'] ) ) {
if ( ! array_key_exists( 'gtmTypography', $block_type->attributes ) ) {
$block_type->attributes['gtmTypography'] = [
'type' => 'object',
'default' => [],
];
}
}
if ( ! empty( $support['textAlign'] ) ) {
if ( ! array_key_exists( 'gtmTextAlign', $block_type->attributes ) ) {
$block_type->attributes['gtmTextAlign'] = [
'type' => 'object',
'default' => [],
];
}
}
if ( ! empty( $support['flexLayout'] ) ) {
if ( ! array_key_exists( 'gtmFlexDirection', $block_type->attributes ) ) {
$block_type->attributes['gtmFlexDirection'] = [
'type' => 'object',
'default' => [],
];
}
if ( ! array_key_exists( 'gtmFlexAlignItems', $block_type->attributes ) ) {
$block_type->attributes['gtmFlexAlignItems'] = [
'type' => 'object',
'default' => [],
];
}
if ( ! array_key_exists( 'gtmFlexJustifyContent', $block_type->attributes ) ) {
$block_type->attributes['gtmFlexJustifyContent'] = [
'type' => 'object',
'default' => [],
];
}
if ( ! array_key_exists( 'gtmFlexWrap', $block_type->attributes ) ) {
$block_type->attributes['gtmFlexWrap'] = [
'type' => 'object',
'default' => [],
];
}
if ( ! array_key_exists( 'gtmFlexItemSpacing', $block_type->attributes ) ) {
$block_type->attributes['gtmFlexItemSpacing'] = [
'type' => 'object',
'default' => [],
];
}
}
if ( ! empty( $support['highDpiImage'] ) ) {
if ( ! array_key_exists( 'gtmImage2x', $block_type->attributes ) ) {
$block_type->attributes['gtmImage2x'] = [
'type' => 'number',
];
}
if ( ! array_key_exists( 'gtmImage3x', $block_type->attributes ) ) {
$block_type->attributes['gtmImage3x'] = [
'type' => 'number',
];
}
}
if ( ! empty( $support['hoverImage'] ) ) {
if ( ! array_key_exists( 'gtmHoverImage', $block_type->attributes ) ) {
$block_type->attributes['gtmHoverImage'] = [
'type' => 'number',
];
}
}
if ( ! empty( $support['lazyLoad'] ) ) {
if ( ! array_key_exists( 'gtmLazyLoad', $block_type->attributes ) ) {
$block_type->attributes['gtmLazyLoad'] = [
'type' => 'string',
'enum' => ['off', 'on'],
'default' => ['on'],
];
}
}
}
}
// Register the block support.
WP_Block_Supports::get_instance()->register(
GTM_BLOCK_SUPPORT_PROPS_KEY,
[
'register_attribute' => 'gtm_register_block_props_support',
]
);
function gtm_compile_css_block_props( $output, $attributes, $blockName ) {
$block_style = ['classes' => [], 'style' => []];
$support = gtm_getBlockPropsSupport( $blockName );
if ( isset( $attributes['gtmWidth'] ) ) {
gtm_css_compileCssVar( $block_style,
gtm_block_props_getSupportCssPropName( "width", $support, 'block-width' ),
$attributes['gtmWidth']
);
}
if ( isset( $attributes['gtmHeight'] ) ) {
gtm_css_compileCssVar( $block_style,
gtm_block_props_getSupportCssPropName( "height", $support, 'block-height' ),
$attributes['gtmHeight']
);
}
if ( isset( $attributes['gtmMargin'] ) ) {
gtm_css_compileCssVar( $block_style,
gtm_block_props_getSupportCssPropName( "margin", $support, 'block-margin' ),
gtm_css_parseResponsiveBoxProps( $attributes['gtmMargin'] )
);
}
if ( isset( $attributes['gtmPadding'] ) ) {
gtm_css_compileCssVar( $block_style,
gtm_block_props_getSupportCssPropName( "padding", $support, 'block-padding' ),
gtm_css_parseResponsiveBoxProps( $attributes['gtmPadding'] )
);
}
if ( isset( $attributes['gtmRadius'] ) ) {
gtm_css_compileCssVar( $block_style,
gtm_block_props_getSupportCssPropName( "radius", $support, 'block-radius' ),
gtm_css_parseBorderRadiusValue( $attributes['gtmRadius'] )
);
}
if ( isset( $attributes['gtmShadow'] ) ) {
gtm_css_compileCssVar( $block_style,
gtm_block_props_getSupportCssPropName( "shadow", $support, 'block-shadow' ),
gtm_css_parseShadowValue( $attributes['gtmShadow'] )
);
}
if ( isset( $attributes['gtmBg'] ) ) {
gtm_css_compileCssVar( $block_style,
gtm_block_props_getSupportCssPropName( "bg", $support, 'block-bg' ),
gtm_css_parseColorValue( $attributes['gtmBg'] )
);
}
if ( isset( $attributes['gtmColor'] ) ) {
gtm_css_compileCssVar( $block_style,
gtm_block_props_getSupportCssPropName( "color", $support, 'block-color' ),
gtm_css_parseColorValue( $attributes['gtmColor'] )
);
}
if ( isset( $attributes['gtmTypography'] ) ) {
gtm_css_compileCssVar( $block_style,
gtm_block_props_getSupportCssPropName( "typography", $support, 'block-typography' ),
gtm_css_parseTypographyProps( $attributes['gtmTypography'] )
);
}
if ( isset( $attributes['gtmTextAlign'] ) ) {
gtm_css_compileCssVarClass( $block_style,
gtm_block_props_getSupportCssPropName( "textAlign", $support, 'block-text-align' ),
$attributes['gtmTextAlign']
);
}
/* Flex layout */
$hasFlexLayout = isset( $attributes['gtmFlexDirection'] ) ||
isset( $attributes['gtmFlexAlignItems'] ) ||
isset( $attributes['gtmFlexJustifyContent'] ) ||
isset( $attributes['gtmFlexWrap'] ) ||
isset( $attributes['gtmFlexItemSpacing'] );
if ( $hasFlexLayout ) {
$cssPropName = gtm_block_props_getSupportCssPropName( "flexLayout", $support, 'block-flex-layout' );
$block_style['classes'][] = "gtm-has-{$cssPropName}";
if ( isset( $attributes['gtmFlexDirection'] ) ) {
gtm_css_compileCssVar( $block_style,
"{$cssPropName}-direction",
$attributes['gtmFlexDirection']
);
}
if ( isset( $attributes['gtmFlexAlignItems'] ) ) {
gtm_css_compileCssVar( $block_style,
"{$cssPropName}-align-items",
$attributes['gtmFlexAlignItems']
);
}
if ( isset( $attributes['gtmFlexJustifyContent'] ) ) {
gtm_css_compileCssVar( $block_style,
"{$cssPropName}-justify-content",
$attributes['gtmFlexJustifyContent']
);
}
if ( isset( $attributes['gtmFlexWrap'] ) ) {
gtm_css_compileCssVar( $block_style,
"{$cssPropName}-wrap",
$attributes['gtmFlexWrap']
);
}
if ( isset( $attributes['gtmFlexItemSpacing'] ) ) {
gtm_css_compileCssVar( $block_style,
"{$cssPropName}-item-spacing",
gtm_css_parseSpacingValue( $attributes['gtmFlexItemSpacing'] )
);
}
}
if ( ! empty( $attributes['gtmHoverImage'] ) ) {
$block_style['classes'][] = "gtm-has-hover-image";
}
////////////////////
// Apply to output
$block_style['style'] = ['{{BLOCK}}' => $block_style['style']];
return [
'classes' => array_merge( $output['classes'], $block_style['classes'] ),
'style' => array_replace_recursive( $output['style'], $block_style['style'] ),
];
}
function gtm_block_props_getSupportCssPropName( $feature, $support, $defaultPropName ) {
if ( gtm_block_props_hasSupport( $feature, $support ) ) {
return $support[$feature]['cssProp'] ?? $defaultPropName;
}
return $defaultPropName;
}
function gtm_block_props_hasSupport( $features, $support ) {
$checkFeatures = is_array( $features ) ? $features : [$features];
foreach ( $checkFeatures as $feature ) {
$hasSomeSupport = $hasSomeSupport ?? ( isset( $support[$feature] ) && $support[$feature] );
}
return $hasSomeSupport;
}
add_filter( 'render_block', 'gtm_block_props_render_high_dpi_image', 10, 2 );
function gtm_block_props_render_high_dpi_image( $block_content, $block ) {
if ( ! empty( $block['attrs']['gtmImage2x'] ) || ! empty( $block['attrs']['gtmImage3x'] ) ) {
$srcset = [];
$img_1x_url = wp_get_attachment_image_url( $block['attrs']['id'] ?? '', $block['attrs']['sizeSlug'] ?? 'full' );
if ( $img_1x_url ) {
// Restore actual srcset
$srcset[] = wp_get_attachment_image_srcset( $block['attrs']['id'] ?? '', $block['attrs']['sizeSlug'] ?? 'full' );
$srcset[] = $img_1x_url . ' 1x';
}
$img_2x_url = wp_get_attachment_image_url( $block['attrs']['gtmImage2x'] ?? '', $block['attrs']['sizeSlug'] ?? 'full' );
if ( $img_2x_url ) {
$srcset[] = $img_2x_url . ' 2x';
}
$img_3x_url = wp_get_attachment_image_url( $block['attrs']['gtmImage3x'] ?? '', $block['attrs']['sizeSlug'] ?? 'full' );
if ( $img_3x_url ) {
$srcset[] = $img_3x_url . ' 3x';
}
// Remove empty element when wp_get_attachment_image_srcset() has return an empty value
$srcset = array_filter( $srcset );
if ( ! empty( $srcset ) ) {
$block_content = str_replace( '<img', '<img srcset="' . implode( ',', $srcset ) . '"', $block_content );
}
}
return $block_content;
}
add_filter( 'render_block', 'gtm_block_props_render_hover_image', 10, 2 );
function gtm_block_props_render_hover_image( $block_content, $block ) {
if ( ! empty( $block['attrs']['gtmHoverImage'] ) ) {
$srcset = [];
$img_1x = wp_get_attachment_image( $block['attrs']['gtmHoverImage'] ?? '', $block['attrs']['sizeSlug'] ?? 'full', false, ['class' => 'gtm-hover-image'] );
if ( ! empty( $img_1x ) ) {
// Add 2X image if specified
if ( ! empty( $block['attrs']['gtmHoverImage2X'] ) ) {
$img_2x_url = wp_get_attachment_image_url( $block['attrs']['gtmHoverImage2X'] ?? '', $block['attrs']['sizeSlug'] ?? 'full' );
if ( $img_2x_url ) {
$srcset[] = $img_2x_url . ' 2x';
}
$hasSrcSet = strpos( $img_1x, 'srcset="' ) !== false;
if ( $hasSrcSet ) {
$img_1x = str_replace( 'srcset="', 'srcset="' . implode( ',', $srcset ) . ',', $img_1x );
} else {
$img_1x = str_replace( '<img ', '<img srcset="' . implode( ',', $srcset ) . '"', $img_1x );
}
}
// Insert the hovering image in front of the existing image
$block_content = str_replace( '<img', $img_1x . '<img', $block_content );
}
}
return $block_content;
}
// FIX: Didn't use? remove it
// function gtm_block_props_get_image_url( $id, $size ) {
// if ( ! empty( $id ) ) {
// $url = wp_get_attachment_image_url( $id, $size );
// }
// return $url ? $url : '';
// }
add_filter( 'render_block', 'gtm_block_props_render_lazy_load', 10, 2 );
function gtm_block_props_render_lazy_load( $block_content, $block ) {
if ( isset( $block['attrs']['gtmLazyLoad'] ) ) {
if ( $block['attrs']['gtmLazyLoad'] == 'off' ) {
return str_replace('<img ', '<img loading="eager"', $block_content);
}
}
return $block_content;
}