Untitled

mail@pastecode.io avatar
unknown
plain_text
a month ago
11 kB
3
Indexable
Never
<?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