Automattic\WooCommerce\Blocks\BlockTypes

ProductGallery::render_dialog │ protected │ WC 1.0

Return the dialog content.

Method of the class: ProductGallery{}

No Hooks.

Returns

String.

Usage

// protected - for code of main (parent) or child class
$result = $this->render_dialog( $images );

$images(array) (required)

An array of all images of the product.

ProductGallery::render_dialog() ProductGallery::render dialog code ^{WC 10.6.2}

<?php
protected function render_dialog( $images ) {
	$images_html = '';
	foreach ( $images as $index => $image ) {
		$id           = $image['id'];
		$src          = $image['src'];
		$srcset       = $image['srcset'];
		$sizes        = $image['sizes'];
		$alt          = $image['alt'];
		$loading      = 0 === $index ? 'fetchpriority="high"' : 'loading="lazy"';
		$images_html .= "<img data-image-id='{$id}' src='{$src}' srcset='{$srcset}' sizes='{$sizes}' loading='{$loading}' decoding='async' alt='{$alt}' />";
	}
	ob_start();
	?>
		<dialog
			data-wp-bind--open="context.isDialogOpen"
			data-wp-bind--inert="!context.isDialogOpen"
			data-wp-on--close="actions.closeDialog"
			data-wp-on--keydown="actions.onDialogKeyDown"
			data-wp-watch="callbacks.dialogStateChange"
			class="wc-block-product-gallery-dialog"
			role="dialog"
			aria-modal="true"
			aria-label="Product Gallery">
			<div class="wc-block-product-gallery-dialog__header">
				<button class="wc-block-product-gallery-dialog__close-button" data-wp-on--click="actions.closeDialog" aria-label="<?php echo esc_attr__( 'Close dialog', 'woocommerce' ); ?>">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
						<path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path>
					</svg>
				</button>
			</div>
			<div class="wc-block-product-gallery-dialog__content">
					<?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Output is already escaped by WooCommerce. ?>
					<?php echo $images_html; ?>
			</div>
		</dialog>
	<?php
	return ob_get_clean();
}