Automattic\WooCommerce\Blocks\BlockTypes

ProductFilters::render │ protected │ WC 1.0

Include and render the block.

Method of the class: ProductFilters{}

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.
Default: empty array

$content(string) (required)

Block content.
Default: empty string

$block(WP_Block) (required)

Block instance.

ProductFilters::render() ProductFilters::render code ^{WC 10.8.1}

<?php
protected function render( $attributes, $content, $block ) {
	wp_enqueue_script( 'wc-settings' );

	$query_id      = $block->context['queryId'] ?? 0;
	$filter_params = $this->get_filter_params( $query_id );

	wp_interactivity_config( $this->get_full_block_name(), [ 'canonicalUrl' => $this->get_canonical_url_no_pagination( $filter_params ) ] );

	/**
	 * Filter hook to modify the selected filter items.
	 *
	 * @since 9.7.0
	 */
	$active_filters = apply_filters( 'woocommerce_blocks_product_filters_selected_items', array(), $filter_params );

	usort(
		$active_filters,
		function ( $a, $b ) {
			return strnatcmp( $a['activeLabel'], $b['activeLabel'] );
		}
	);

	$block_context         = array_merge(
		$block->context,
		array(
			'filterParams'  => $filter_params,
			'activeFilters' => $active_filters,
		),
	);
	$inner_blocks          = array_reduce(
		$block->parsed_block['innerBlocks'],
		function ( $carry, $parsed_block ) use ( $block_context ) {
			$carry .= ( new \WP_Block( $parsed_block, $block_context ) )->render();
			return $carry;
		},
		''
	);
	$interactivity_context = array(
		'params'        => $filter_params,
		'activeFilters' => $active_filters,
	);

	$classes = '';
	$styles  = '';
	$tags    = new \WP_HTML_Tag_Processor( $content );

	if ( $tags->next_tag( array( 'class_name' => 'wc-block-product-filters' ) ) ) {
		$classes = $tags->get_attribute( 'class' );
		$styles  = $tags->get_attribute( 'style' );
	}

	$wrapper_attributes = array(
		'class'                            => $classes,
		'data-wp-interactive'              => $this->get_full_block_name(),
		'data-wp-watch--scrolling'         => 'callbacks.scrollLimit',
		'data-wp-on--keyup'                => 'actions.closeOverlayOnEscape',
		'data-wp-context'                  => wp_json_encode( $interactivity_context, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ),
		'data-wp-class--is-overlay-opened' => 'context.isOverlayOpened',
		'style'                            => $styles,
	);

	// TODO: Remove this conditional once the fix is released in WP. https://github.com/woocommerce/gutenberg/pull/4.
	if ( ! isset( $block->context['productCollectionLocation'] ) ) {
		$wrapper_attributes['data-wp-router-region'] = $this->generate_navigation_id( $block );
	}

	ob_start();
	?>
	<div <?php echo get_block_wrapper_attributes( $wrapper_attributes ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
		<button
			class="wc-block-product-filters__open-overlay"
			data-wp-on--click="actions.openOverlay"
		>
			<?php echo $this->get_svg_icon( 'filter-icon-2' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
			<span><?php echo esc_html__( 'Filter products', 'woocommerce' ); ?></span>
		</button>
		<div class="wc-block-product-filters__overlay">
			<div class="wc-block-product-filters__overlay-wrapper">
				<div
					class="wc-block-product-filters__overlay-dialog"
					role="dialog"
					aria-label="<?php echo esc_html__( 'Product Filters', 'woocommerce' ); ?>"
				>
					<header class="wc-block-product-filters__overlay-header">
						<button
							class="wc-block-product-filters__close-overlay"
							data-wp-on--click="actions.closeOverlay"
						>
							<span><?php echo esc_html__( 'Close', 'woocommerce' ); ?></span>
							<?php echo $this->get_svg_icon( 'close' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
						</button>
					</header>
					<div class="wc-block-product-filters__overlay-content">
						<?php echo $inner_blocks; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
					</div>
					<footer
						class="wc-block-product-filters__overlay-footer"
					>
						<button
							class="wc-block-product-filters__apply wp-element-button"
							data-wp-interactive="<?php echo esc_attr( $this->get_full_block_name() ); ?>"
							data-wp-on--click="actions.closeOverlay"
						>
							<span><?php echo esc_html__( 'Apply', 'woocommerce' ); ?></span>
						</button>
					</footer>
				</div>
			</div>
		</div>
	</div>
	<?php
	return ob_get_clean();
}