Automattic\WooCommerce\Blocks\BlockTypes
ProductFilterChips::render │ protected │ WC 1.0
Render the block.
Method of the class: ProductFilterChips{}
No Hooks.
Returns
String. Rendered block type output.
Usage
// protected - for code of main (parent) or child class $result = $this->render( $attributes, $content, $block );
- $attributes(array) (required)
- Block attributes.
- $content(string) (required)
- Block content.
- $block(WP_Block) (required)
- Block instance.
ProductFilterChips::render() ProductFilterChips::render code WC 10.9.4
<?php
protected function render( $attributes, $content, $block ) {
if ( empty( $block->context['woocommerce/selectableItems'] ) ) {
return '';
}
$block_context = $block->context['woocommerce/selectableItems'];
$items = is_array( $block_context['items'] ?? null ) ? $block_context['items'] : array();
$store_namespace = $block_context['storeNamespace'] ?? 'woocommerce/product-filters';
$display_limit = 'woocommerce/product-filters' === $store_namespace ? 15 : 30;
$classes = '';
$style = '';
$tags = new \WP_HTML_Tag_Processor( $content );
if ( $tags->next_tag( array( 'class_name' => 'wc-block-product-filter-chips' ) ) ) {
$classes = $tags->get_attribute( 'class' );
$style = $tags->get_attribute( 'style' );
}
$wrapper_attributes = array(
'data-wp-interactive' => 'woocommerce/product-filter-chips',
'data-wp-init--colors' => 'callbacks.initColors',
'data-wp-context' => (string) wp_json_encode(
array(
'storeNamespace' => $store_namespace,
'displayLimit' => $display_limit,
'isExpanded' => false,
),
JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
),
'class' => esc_attr( $classes ),
);
if ( ! empty( $style ) ) {
// Styles generated by Supports API doesn't include semicolon at the end.
$wrapper_attributes['style'] = esc_attr( $style ) . ';';
}
$attribute_id = $block->context['woocommerce/attributeId'] ?? '';
$has_external_label = is_string( $attribute_id ) && '' !== $attribute_id;
if ( $has_external_label ) {
$wrapper_attributes['role'] = 'single' === $block_context['selectionMode'] ? 'radiogroup' : 'group';
$wrapper_attributes['aria-labelledby'] = esc_attr( $attribute_id . '_label' );
}
$first_items = array_slice( $items, 0, $display_limit, true );
$overflow_items = array_slice( $items, $display_limit );
$overflow_selected_items = array_filter( $overflow_items, fn( $item ) => is_array( $item ) && ! empty( $item['selected'] ) );
$visible_items = array_merge( $first_items, $overflow_selected_items );
$hidden_count = count( $items ) - count( $visible_items );
$first_item = reset( $items );
$show_counts = is_array( $first_item ) && array_key_exists( 'count', $first_item );
$has_visual_swatches = self::has_visual_swatches( $items );
$button_role = 'single' === $block_context['selectionMode'] ? 'radio' : 'checkbox';
if ( $has_visual_swatches && is_string( $classes ) && ! str_contains( $classes, 'is-style-swatch' ) ) {
$classes .= ' is-style-swatch';
$wrapper_attributes['class'] = esc_attr( $classes );
}
ob_start();
?>
<div <?php echo get_block_wrapper_attributes( $wrapper_attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
<fieldset class="wc-block-product-filter-chips__fieldset">
<?php if ( ! empty( $block_context['groupLabel'] ) && ! $has_external_label ) : ?>
<legend class="screen-reader-text"><?php echo esc_html( $block_context['groupLabel'] ); ?></legend>
<?php endif; ?>
<div class="wc-block-product-filter-chips__items">
<?php
foreach ( $visible_items as $item ) :
?>
<button
class="wc-block-product-filter-chips__item"
type="button"
role="<?php echo esc_attr( $button_role ); ?>"
id="<?php echo esc_attr( $item['id'] ); ?>"
<?php if ( ! empty( $item['ariaLabel'] ) ) : ?>
aria-label="<?php echo esc_attr( $item['ariaLabel'] ); ?>"
<?php endif; ?>
<?php if ( $has_visual_swatches ) : ?>
title="<?php echo esc_attr( $item['label'] ); ?>"
<?php endif; ?>
value="<?php echo esc_attr( $item['value'] ); ?>"
aria-checked="<?php echo ! empty( $item['selected'] ) ? 'true' : 'false'; ?>"
<?php disabled( ! empty( $item['disabled'] ) ); ?>
data-wp-each-child
<?php echo wp_interactivity_data_wp_context( array( 'item' => $item ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
data-wp-bind--aria-checked="context.item.selected"
data-wp-bind--disabled="context.item.disabled"
data-wp-bind--hidden="context.item.hidden"
data-wp-on--click="actions.toggle"
>
<span class="wc-block-product-filter-chips__label">
<?php if ( $has_visual_swatches ) : ?>
<?php
$swatch_style = $this->get_item_swatch_style( $item );
$has_visual = '' !== $swatch_style;
?>
<span
class="wc-block-product-filter-chips__swatch<?php echo ! $has_visual ? ' wc-block-product-filter-chips__swatch--no-color' : ''; ?>"
<?php if ( $has_visual ) : ?>
style="<?php echo esc_attr( $swatch_style ); ?>"
<?php endif; ?>
aria-hidden="true"
></span>
<?php endif; ?>
<span class="wc-block-product-filter-chips__text">
<?php echo esc_html( $item['label'] ); ?>
</span>
<?php if ( isset( $item['count'] ) ) : ?>
<span class="wc-block-product-filter-chips__count">
(<span data-wp-text="context.item.count"><?php echo esc_html( $item['count'] ); ?></span>)
</span>
<?php endif; ?>
</span>
</button>
<?php endforeach; ?>
<template
data-wp-each--item="state.items"
data-wp-each-key="context.item.id"
>
<button
class="wc-block-product-filter-chips__item"
type="button"
role="<?php echo esc_attr( $button_role ); ?>"
data-wp-bind--id="context.item.id"
data-wp-bind--aria-label="context.item.ariaLabel"
<?php if ( $has_visual_swatches ) : ?>
data-wp-bind--title="context.item.label"
<?php endif; ?>
data-wp-bind--value="context.item.value"
data-wp-bind--aria-checked="context.item.selected"
data-wp-bind--disabled="context.item.disabled"
data-wp-bind--hidden="context.item.hidden"
data-wp-on--click="actions.toggle"
>
<span class="wc-block-product-filter-chips__label">
<?php if ( $has_visual_swatches ) : ?>
<span
class="wc-block-product-filter-chips__swatch"
data-wp-class--wc-block-product-filter-chips__swatch--no-color="woocommerce/product-filter-chips::state.swatchHidden"
data-wp-bind--style="woocommerce/product-filter-chips::state.swatchStyle"
aria-hidden="true"
></span>
<?php endif; ?>
<span
class="wc-block-product-filter-chips__text"
data-wp-text="context.item.label"
></span>
<?php if ( $show_counts ) : ?>
<span class="wc-block-product-filter-chips__count">
(<span data-wp-text="context.item.count"></span>)
</span>
<?php endif; ?>
</span>
</button>
</template>
</div>
<?php if ( $hidden_count > 0 ) : ?>
<button
type="button"
class="wc-block-product-filter-chips__show-more"
data-wp-on--click="actions.showAll"
data-wp-bind--hidden="context.isExpanded"
>
<?php
/* translators: %d: number of hidden items */
echo esc_html( sprintf( __( '+%d more', 'woocommerce' ), $hidden_count ) );
?>
</button>
<?php endif; ?>
</fieldset>
</div>
<?php
return ob_get_clean();
}