:%s;', $attributes['width'] ); } if ( ! empty( $attributes['scale'] ) ) { $image_style .= sprintf( 'object-fit:%s;', $attributes['scale'] ); } // Keep this aspect ratio for backward compatibility. if ( ! empty( $attributes['aspectRatio'] ) ) { $image_style .= sprintf( 'aspect-ratio:%s;', $attributes['aspectRatio'] ); } if ( ! empty( $attributes['style']['dimensions']['aspectRatio'] ) ) { $image_style .= sprintf( 'aspect-ratio:%s;', $attributes['style']['dimensions']['aspectRatio'] ); } if ( ! empty( $attributes['style']['dimensions']['minHeight'] ) ) { $image_style .= sprintf( 'min-height:%s;', $attributes['style']['dimensions']['minHeight'] ); } $featured_image_id = (int) $product->get_image_id(); $provided_image_id_is_valid = false; if ( $image_id ) { $gallery_image_ids = ProductGalleryUtils::get_all_image_ids( $product ); $available_image_ids = array_merge( [ $featured_image_id ], $gallery_image_ids ); $provided_image_id_is_valid = in_array( $image_id, $available_image_ids, true ); } $target_image_id = $provided_image_id_is_valid ? $image_id : $featured_image_id; if ( ! $target_image_id ) { return wc_placeholder_img( $image_size, array( 'style' => $image_style ) ); } $alt_text = get_post_meta( $target_image_id, '_wp_attachment_image_alt', true ); $attr = array( 'alt' => empty( $alt_text ) ? $product->get_title() : $alt_text, 'data-testid' => 'product-image', 'data-image-id' => $target_image_id, 'style' => $image_style, ); return $provided_image_id_is_valid ? wp_get_attachment_image( $image_id, $image_size, false, $attr ) : $product->get_image( $image_size, $attr ); } /** * Extra data passed through from server to client for block. * * @param array $attributes Any attributes that currently are available from the block. * Note, this will be empty in the editor context when the block is * not in the post content on editor load. */ protected function enqueue_data( array $attributes = [] ) { $this->asset_data_registry->add( 'isBlockTheme', wp_is_block_theme() ); $this->asset_data_registry->add( 'placeholderImgSrcFullSize', wc_placeholder_img_src( 'woocommerce_single' ) ); } /** * Include and render the block * * @param array $attributes Block attributes. Default empty array. * @param string $content Block content. Default empty string. * @param WP_Block $block Block instance. * @return string Rendered block type output. */ protected function render( $attributes, $content, $block ) { $parsed_attributes = $this->parse_attributes( $attributes ); $classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array(), array( 'extra_classes' ) ); $post_id = isset( $block->context['postId'] ) ? $block->context['postId'] : ''; $image_id = isset( $block->context['imageId'] ) ? (int) $block->context['imageId'] : null; $product = wc_get_product( $post_id ); $aspect_ratio = $parsed_attributes['aspectRatio'] ?? $parsed_attributes['style']['dimensions']['aspectRatio'] ?? 'auto'; $aspect_ratio_class = 'wc-block-components-product-image--aspect-ratio-' . str_replace( '/', '-', $aspect_ratio ); $classes = implode( ' ', array_filter( array( 'wc-block-components-product-image wc-block-grid__product-image', $aspect_ratio_class, esc_attr( $classes_and_styles['classes'] ), ) ) ); $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => esc_attr( $classes ), 'style' => esc_attr( $classes_and_styles['styles'] ), ) ); if ( $product ) { $inner_content = $this->render_anchor( $product, $this->render_on_sale_badge( $product, $parsed_attributes ), $this->render_image( $product, $parsed_attributes, $image_id ), $attributes, $content ); return sprintf( '
%2$s
', $wrapper_attributes, $inner_content ); } return ''; } }