Untitled
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