Untitled
unknown
plain_text
5 months ago
11 kB
3
Indexable
<?php
/**
* Server-side rendering of the Performance Data Gutenberg Block
*
* @package blackstone-main/gutenberg
*/
namespace BlackstoneCore\Gutenberg\Blocks;
use function BlackstoneCore\Utility\setup_multiple_gtm_attributes;
/**
* Performance Data Block Attributes
*
* @return array Array of block attributes
*/
function performance_data_atts() {
return [
'title' => [
'type' => 'string',
'default' => '',
],
'heading' => [
'type' => 'string',
'default' => 'h2',
],
'margintop' => [
'type' => 'string',
'default' => '',
],
'marginbottom' => [
'type' => 'string',
'default' => '',
],
'bringToFront' => [
'type' => 'boolean',
'default' => false,
],
'sticky' => [
'type' => 'boolean',
'default' => false,
],
'enableGrp' => [
'type' => 'boolean',
'default' => false,
],
];
}
/**
* Performance Data Item Block Attributes
*
* @return array Array of block attributes
*/
function performance_data_item_atts() {
return [
'title' => [
'type' => 'string',
'default' => '',
],
'groupTitle' => [
'type' => 'string',
'default' => '',
],
'states' => [
'type' => 'array',
'default' => [],
],
];
}
/**
* Render the Tabs block HTML
*
* @param array $attributes Array of Block Attributes registered via Gutenberg
* @param string $content InnerBlock content
* @return string Block HTML markup for frontend
*/
function performance_data_html( $attributes, $content ) {
$title = $attributes['title'] ? $attributes['title'] : '';
$groupTitle = $attributes['groupTitle'] ? $attributes['groupTitle'] : '';
$heading = $attributes['heading'] ? $attributes['heading'] : 'h2';
$mt = $attributes['margintop'] ? ' mt-' . $attributes['margintop'] : '';
$mb = $attributes['marginbottom'] ? ' mb-' . $attributes['marginbottom'] : '';
$markup = sprintf(
'<div class="performance-data%1$s%2$s" data-initially-hidden="false">',
esc_attr( $mt ),
esc_attr( $mb )
);
$markup .= '<div class="performance-data__inner">';
$className = 'performance-data__toolbar ';
if ( !empty( $attributes['sticky'] ) && $attributes['sticky'] === true ) {
$className .= 'is-sticky ';
}
if ( !empty( $attributes['enableGrp'] ) && $attributes['enableGrp'] === true ) {
$className .= 'performancedata-toolbar-gt';
}
$markup .= '<div class="'.$className.'">';
if ( $title ) {
$markup .= '<' . tag_escape( $heading ) . ' class="performance-data__toolbar-title mt-zero mb-zero">';
$markup .= esc_html( $title );
$markup .= '</' . tag_escape( $heading ) . '>';
}
$markup .= '<!-- Tabs Placeholder -->';
$markup .= '</div>';
$markup .= '<div class="performance-data__content">';
/*
* the content is the html generated from innerBlocks
* it is being created from the save method in JS or the render_callback
* in php and is sanitized.
*
* Re sanitizing it through `wp_kses_post` causes
* embed blocks to break and other core filters don't apply.
* therefore no additional sanitization is done and it is being output as is
*/
$markup .= $content;
$markup .= '</div>';
$markup .= '</div>';
$markup .= '</div>';
return $markup;
}
/**
* Render the Tabs Item block HTML
*
* @param array $attributes Array of Block Attributes registered via Gutenberg
* @param string $content InnerBlock content
* @return string Block HTML markup for frontend
*/
function performance_data_item_html( $attributes, $content ) {
$tab_title = ! empty( $attributes['title'] ) ? $attributes['title'] : '';
$markup = '<div class="performance-data__item performance-data-' . sanitize_title_with_dashes( $tab_title ) . '" role="tabpanel" aria-selected="false">';
if ( $content ) {
/*
* the content is the html generated from innerBlocks
* it is being created from the save method in JS or the render_callback
* in php and is sanitized.
*
* Re sanitizing it through `wp_kses_post` causes
* embed blocks to break and other core filters don't apply.
* therefore no additional sanitization is done and it is being output as is
*/
$markup .= $content;
}
$markup .= '</div>';
return $markup;
}
/**
* Add select html tags and custom div attribute being used on the block to fix reusable content issue
*
* @param array $tags Allowed tags, attributes, and/or entities.
* @param string $context Context to judge allowed tags by. Allowed values are 'post'.
*/
add_filter(
'wp_kses_allowed_html',
function( $tags, $context ) {
if ( 'post' === $context ) {
$tags['select'] = array(
'name' => true,
'class' => true,
);
$tags['option'] = array(
'value' => true,
'data-gtm-category' => true,
'data-gtm-label' => true,
'data-gtm-action' => true,
);
$tags['div'] = isset( $tags['div'] ) ? $tags['div'] : [];
$tags['div'] = array_merge(
$tags['div'],
[
'role' => true,
'aria-selected' => true,
'aria' => true,
]
);
}
return $tags;
},
10,
2
);
/**
* Modify block rendering to add tab navigations
*
* @param string|null $pre_render The pre-rendered content. Default null.
* @param array $parsed_block The block being rendered.
*/
add_filter(
'render_block',
function( $block_content, $block ) {
if ( 'blackstone/performance-data' === $block['blockName'] ) {
if ( $block['innerBlocks'] ) {
$groupTitles = array();
foreach( $block['innerBlocks'] as $inner_block ) {
$groupTitle = $inner_block['attrs']['groupTitle'];
if ( ! empty( $groupTitle ) && ! in_array( $groupTitle, $groupTitles, true ) ) {
$groupTitles[] = $groupTitle;
}
}
if ( empty( $groupTitles ) ) {
$tabs = '<div class="performance-data__action">';
$tabs .= '<div class="custom-select">';
$tabs .= '<select name="performance-class" class="performance-data__select">';
$has_default_states = ! empty(
array_filter(
array_map(
function( $inner_block ) {
return ! empty( $inner_block['attrs']['states'] );
},
$block['innerBlocks']
)
)
);
if ( is_array( $block['innerBlocks'] ) ) {
foreach ( $block['innerBlocks'] as $inner_block ) {
$title = $inner_block['attrs']['title'];
$states = ! empty( $inner_block['attrs']['states'] ) ? $inner_block['attrs']['states'] : [];
$id = sanitize_title_with_dashes( $title );
$gtm_atts = setup_multiple_gtm_attributes(array("category"=>"Page Engagement", "action"=>"Filter Click", "label"=>'Performance Filter | ' . esc_attr( $title ), "component_type"=>"Chart tabs", "click_text"=>esc_attr( $title ), "tag_name"=>"Page Engagement Click"), false);
$tabs .= '<option ' . $gtm_atts . ' value="' . esc_attr( $id ) . '" data-default-in-states="' . esc_attr( implode( ' ', $states ) ) . '">' . esc_html( $title ) . '</option>';
}
}
$tabs .= '</select>';
$tabs .= '</div>';
$tabs .= '</div>';
} else {
$shareClass = __( 'Share Class', 'blackstone' );
$tabs = '<div class="dropdown-container">';
$tabs .= '<div class="dropdown-header">';
$tabs .= '<div class="share">'. $shareClass .'</div>';
$tabs .= '<div class="dropdown-button"></div>';
$tabs .= '</div>';
$has_default_states = ! empty(
array_filter(
array_map(
function( $inner_block ) {
return ! empty( $inner_block['attrs']['states'] );
},
$block['innerBlocks']
)
)
);
if ( is_array( $block['innerBlocks'] ) ) {
$groupsPerforamcenBars = array();
foreach( $block['innerBlocks'] as $inner_block ) {
$groupTitle = trim( $inner_block['attrs']['groupTitle'] );
if ( ! isset( $groupsPerforamcenBars[ $groupTitle ] ) ) {
$groupsPerforamcenBars[ $groupTitle ] = array();
}
$groupsPerforamcenBars[ $groupTitle ][] = $inner_block;
}
$tabs .= '<div class="dropdown-options" id="dropdown-options">';
foreach ( $groupsPerforamcenBars as $groupTitle => $group_tabs ) {
$tabs .= '<div class="dropdown-group">';
$tabs .= '<div class="dropdown-group-title">'. $groupTitle .'</div>';
foreach ( $group_tabs as $inner_block ) {
$title = $inner_block['attrs']['title'];
$states = ! empty( $inner_block['attrs']['states'] ) ? $inner_block['attrs']['states'] : [];
$id = sanitize_title_with_dashes( $title );
$groupTitles = $inner_block['attrs']['groupTitle'] ? explode("\n", $inner_block['attrs']['groupTitle']) : [];
$gtm_atts = setup_multiple_gtm_attributes(array("category"=>"Page Engagement", "action"=>"Filter Click", "label"=>'Performance Filter | ' . esc_attr( $title ), "component_type"=>"Chart tabs", "click_text"=>esc_attr( $title ), "tag_name"=>"Page Engagement Click"), false);
$tabs .= '<div class="dropdown-option" ' . $gtm_atts . ' value="' . esc_attr( $id ) . '" data-default-in-states="' . esc_attr( implode( ' ', $states ) ) . '">' . esc_html( $title ) . '</div>';
}
$tabs .= '</div>';
}
$tabs .= '</div>';
}
$tabs .= '</div>';
}
// Add custom select.
$block_content = str_replace( '<!-- Tabs Placeholder -->', $tabs, $block_content );
$block_content = str_replace( 'data-component="chart-tabs-tab-item-link"', 'data-component="chart-tabs-tab-item-link" data-disable-ga-auto-tracking="true"', $block_content );
if ( $has_default_states ) {
$block_content = str_replace( 'data-initially-hidden="false"', 'data-initially-hidden="true"', $block_content );
}
// Make first item visible.
$block_content = preg_replace( '/role=\"tabpanel\" aria-selected=\"false\"/', 'role="tabpanel" aria-selected="true"', $block_content, 1 );
}
}
return $block_content;
},
10,
2
);
/**
* Add body class whenever Performance data block is available on the page
*/
add_filter(
'body_class',
function( $classes ) {
if ( has_block( 'blackstone/performance-data' ) ) {
$classes[] = 'has-performance-data-block';
}
return $classes;
}
);
Leave a Comment