Automattic\WooCommerce\Blocks\BlockTypes

ProductGalleryThumbnails::render │ protected │ WC 1.0

Include and render the block.

Method of the class: ProductGalleryThumbnails{}

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

$content(string) (required)

Block content.
Default: empty string

$block(WP_Block) (required)

Block instance.

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

<?php
protected function render( $attributes, $content, $block ) {
	if ( ! isset( $block->context ) ) {
		return '';
	}

	$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
	$post_id            = $block->context['postId'];

	if ( ! $post_id ) {
		return '';
	}

	$product = wc_get_product( $post_id );

	if ( ! $product instanceof \WC_Product ) {
		return '';
	}

	// We crop the images to square only if the aspect ratio is 1:1.
	// Otherwise, we show the uncropped and use object-fit to crop them.
	$image_size             = '1' === $attributes['aspectRatio'] ? 'woocommerce_thumbnail' : 'woocommerce_single';
	$product_gallery_images = ProductGalleryUtils::get_product_gallery_image_data( $product, $image_size );

	// Don't show the thumbnails block if there is only one image.
	if ( count( $product_gallery_images ) <= 1 ) {
		return '';
	}

	$thumbnail_size         = str_replace( '%', '', $attributes['thumbnailSize'] ?? '25%' );
	$active_thumbnail_style = $attributes['activeThumbnailStyle'] ?? 'overlay';

	$img_class = 'wc-block-product-gallery-thumbnails__thumbnail__image';

	ob_start();
	?>
	<div
		class="wc-block-product-gallery-thumbnails wc-block-product-gallery-thumbnails--active-<?php echo esc_attr( $active_thumbnail_style ); ?> <?php echo esc_attr( $classes_and_styles['classes'] ); ?>"
		style="<?php echo '--wc-block-product-gallery-thumbnails-size:' . absint( $thumbnail_size ) . ';' . esc_attr( $classes_and_styles['styles'] ); ?>"
		data-wp-interactive="woocommerce/product-gallery"
		data-wp-class--wc-block-product-gallery-thumbnails--overflow-top="context.thumbnailsOverflow.top"
		data-wp-class--wc-block-product-gallery-thumbnails--overflow-bottom="context.thumbnailsOverflow.bottom"
		data-wp-class--wc-block-product-gallery-thumbnails--overflow-left="context.thumbnailsOverflow.left"
		data-wp-class--wc-block-product-gallery-thumbnails--overflow-right="context.thumbnailsOverflow.right">
		<div
			class="wc-block-product-gallery-thumbnails__scrollable"
			data-wp-init--init-resize-observer="callbacks.initResizeObserver"
			data-wp-init--hide-ghost-overflow="callbacks.hideGhostOverflow"
			data-wp-on--scroll="actions.onScroll"
			role="listbox">
			<?php foreach ( $product_gallery_images as $index => $image ) : ?>
				<div class="wc-block-product-gallery-thumbnails__thumbnail">
					<img
						class="<?php echo 0 === $index ? esc_attr( $img_class . ' wc-block-product-gallery-thumbnails__thumbnail__image--is-active' ) : esc_attr( $img_class ); ?>"
						data-image-id="<?php echo esc_attr( $image['id'] ); ?>"
						src="<?php echo esc_attr( $image['src'] ); ?>"
						srcset="<?php echo esc_attr( $image['srcset'] ); ?>"
						sizes="<?php echo esc_attr( $image['sizes'] ); ?>"
						alt="<?php echo esc_attr( $image['alt'] ); ?>"
						data-wp-on--click="actions.selectCurrentImage"
						data-wp-on--keydown="actions.onThumbnailsArrowsKeyDown"
						data-wp-watch="callbacks.toggleActiveThumbnailAttributes"
						decoding="async"
						tabindex="<?php echo 0 === $index ? '0' : '-1'; ?>"
						draggable="false"
						loading="lazy"
						role="option"
						style="aspect-ratio: <?php echo esc_attr( $attributes['aspectRatio'] ); ?>" />
				</div>
			<?php endforeach; ?>
		</div>
	</div>
	<?php
	$template = ob_get_clean();

	return $template;
}