provide span wrapper for category list item name (#6574)

will enable adding text overflow of other effects that user might not want to interfere with the image element

Author: tomasztunik

src/BlockTypes/ProductCategories.php

@@ -322,9 +322,12 @@ protected function renderListItems( $categories, $attributes, $uid, $depth = 0 )
 		foreach ( $categories as $category ) {
 			$output .= '
 				<li class="wc-block-product-categories-list-item">
-					<a style="' . esc_attr( $link_color_style ) . '" href="' . esc_attr( get_term_link( $category->term_id, 'product_cat' ) ) . '">' . $this->get_image_html( $category, $attributes ) . esc_html( $category->name ) . '</a>
-				' . $this->getCount( $category, $attributes ) . '
-					' . ( ! empty( $category->children ) ? $this->renderList( $category->children, $attributes, $uid, $depth + 1 ) : '' ) . '
+					<a style="' . esc_attr( $link_color_style ) . '" href="' . esc_attr( get_term_link( $category->term_id, 'product_cat' ) ) . '">'
+						. $this->get_image_html( $category, $attributes )
+						. '<span class="wc-block-product-categories-list-item__name">' . esc_html( $category->name ) . '</span>'
+					. '</a>'
+					. $this->getCount( $category, $attributes )
+					. ( ! empty( $category->children ) ? $this->renderList( $category->children, $attributes, $uid, $depth + 1 ) : '' ) . '
 				</li>
 			';
 		}