Pass extra CSS classes to the block (#50662)

* Pass extra CSS classes to the block

* get className using wrapper method

* amends from CR

* remove not needed class

* Merge remote-tracking branch 'upstream/trunk' into fix/add-extra-css-classes-to-product-image

* add missing variables

* fix lint error

* add changelog

* remove not necessary code

* add extra_classses parameter

---------

Co-authored-by: Luigi Teschio <gigitux@gmail.com>

plugins/woocommerce/changelog/fix-add-extra-css-classes-to-product-image

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Render Advanced CSS Classes in the Product Image block

plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php

@@ -99,14 +99,12 @@ class AddToCartForm extends AbstractBlock {
 			$product = $this->add_is_descendent_of_single_product_block_hidden_input_to_product_form( $product, $is_descendent_of_single_product_block );
 		}
 
-		$classname          = $attributes['className'] ?? '';
 		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
 		$product_classname  = $is_descendent_of_single_product_block ? 'product' : '';
 
 		$form = sprintf(
-			'<div class="wp-block-add-to-cart-form wc-block-add-to-cart-form %1$s %2$s %3$s" style="%4$s">%5$s</div>',
+			'<div class="wp-block-add-to-cart-form wc-block-add-to-cart-form %1$s %2$s" style="%3$s">%4$s</div>',
 			esc_attr( $classes_and_styles['classes'] ),
-			esc_attr( $classname ),
 			esc_attr( $product_classname ),
 			esc_attr( $classes_and_styles['styles'] ),
 			$product

plugins/woocommerce/src/Blocks/BlockTypes/FeaturedItem.php

@@ -37,6 +37,7 @@ abstract class FeaturedItem extends AbstractDynamicBlock {
 		'font_size',
 		'padding',
 		'text_color',
+		'extra_classes',
 	);
 
 	/**
@@ -272,10 +273,6 @@ abstract class FeaturedItem extends AbstractDynamicBlock {
 			$classes[] = "has-{$attributes['contentAlign']}-content";
 		}
 
-		if ( isset( $attributes['className'] ) ) {
-			$classes[] = $attributes['className'];
-		}
-
 		$global_style_classes = StyleAttributesUtils::get_classes_by_attributes( $attributes, $this->global_style_wrapper );
 
 		$classes[] = $global_style_classes;

plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php

@@ -414,12 +414,9 @@ class MiniCart extends AbstractBlock {
 			return '';
 		}
 
-		$classes_styles  = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'text_color', 'background_color', 'font_size', 'font_weight', 'font_family' ) );
+		$classes_styles  = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'text_color', 'background_color', 'font_size', 'font_weight', 'font_family', 'extra_classes' ) );
 		$wrapper_classes = sprintf( 'wc-block-mini-cart wp-block-woocommerce-mini-cart %s', $classes_styles['classes'] );
-		if ( ! empty( $attributes['className'] ) ) {
+		$wrapper_styles  = $classes_styles['styles'];
-			$wrapper_classes .= ' ' . $attributes['className'];
-		}
-		$wrapper_styles = $classes_styles['styles'];
 
 		$icon_color          = array_key_exists( 'iconColor', $attributes ) ? esc_attr( $attributes['iconColor']['color'] ) : 'currentColor';
 		$product_count_color = array_key_exists( 'productCountColor', $attributes ) ? esc_attr( $attributes['productCountColor']['color'] ) : '';

plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/AbstractOrderConfirmationBlock.php

@@ -36,16 +36,11 @@ abstract class AbstractOrderConfirmationBlock extends AbstractBlock {
 		$order              = $this->get_order();
 		$permission         = $this->get_view_order_permissions( $order );
 		$block_content      = $order ? $this->render_content( $order, $permission, $attributes, $content ) : $this->render_content_fallback();
-		$classname          = $attributes['className'] ?? '';
 		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
 
-		if ( ! empty( $classes_and_styles['classes'] ) ) {
-			$classname .= ' ' . $classes_and_styles['classes'];
-		}
-
 		return $block_content ? sprintf(
 			'<div class="wp-block-%5$s-%4$s wc-block-%4$s %1$s" style="%2$s">%3$s</div>',
-			esc_attr( trim( $classname ) ),
+			esc_attr( $classes_and_styles['classes'] ),
 			esc_attr( $classes_and_styles['styles'] ),
 			$block_content,
 			esc_attr( $this->block_name ),

plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Status.php

@@ -2,6 +2,8 @@
 
 namespace Automattic\WooCommerce\Blocks\BlockTypes\OrderConfirmation;
 
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
 /**
  * Status class.
  */
@@ -26,7 +28,7 @@ class Status extends AbstractOrderConfirmationBlock {
 	 */
 	protected function render( $attributes, $content, $block ) {
 		$order     = $this->get_order();
-		$classname = $attributes['className'] ?? '';
+		$classname = StyleAttributesUtils::get_classes_by_attributes( $attributes, array( 'extra_classes' ) );
 
 		if ( isset( $attributes['align'] ) ) {
 			$classname .= " align{$attributes['align']}";

plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php

@@ -100,8 +100,8 @@ class ProductButton extends AbstractBlock {
 			$ajax_add_to_cart_enabled = get_option( 'woocommerce_enable_ajax_add_to_cart' ) === 'yes';
 			$is_ajax_button           = $ajax_add_to_cart_enabled && ! $cart_redirect_after_add && $product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock();
 			$html_element             = $is_ajax_button ? 'button' : 'a';
-			$styles_and_classes       = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+			$styles_and_classes       = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array(), array( 'extra_classes' ) );
-			$classname                = $attributes['className'] ?? '';
+			$classname                = StyleAttributesUtils::get_classes_by_attributes( $attributes, array( 'extra_classes' ) );
 			$custom_width_classes     = isset( $attributes['width'] ) ? 'has-custom-width wp-block-button__width-' . $attributes['width'] : '';
 			$custom_align_classes     = isset( $attributes['textAlign'] ) ? 'align-' . $attributes['textAlign'] : '';
 			$html_classes             = implode(

plugins/woocommerce/src/Blocks/BlockTypes/ProductCategories.php

@@ -89,7 +89,7 @@ class ProductCategories extends AbstractDynamicBlock {
 
 		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes(
 			$attributes,
-			array( 'line_height', 'text_color', 'font_size' )
+			array( 'line_height', 'text_color', 'font_size', 'extra_classes' )
 		);
 
 		$classes = $this->get_container_classes( $attributes ) . ' ' . $classes_and_styles['classes'];
@@ -116,10 +116,6 @@ class ProductCategories extends AbstractDynamicBlock {
 			$classes[] = "align{$attributes['align']}";
 		}
 
-		if ( ! empty( $attributes['className'] ) ) {
-			$classes[] = $attributes['className'];
-		}
-
 		if ( $attributes['isDropdown'] ) {
 			$classes[] = 'is-dropdown';
 		} else {

plugins/woocommerce/src/Blocks/BlockTypes/ProductDetails.php

@@ -76,18 +76,15 @@ class ProductDetails extends AbstractBlock {
 			$tabs = $tabs_html->get_updated_html();
 		}
 
-		$classname = $attributes['className'] ?? '';
-
 		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
 
 		return sprintf(
-			'<div class="wp-block-woocommerce-product-details %1$s %2$s">
+			'<div class="wp-block-woocommerce-product-details %1$s">
-				<div style="%3$s">
+				<div style="%2$s">
-					%4$s
+					%3$s
 				</div>
 			</div>',
 			esc_attr( $classes_and_styles['classes'] ),
-			esc_attr( $classname ),
 			esc_attr( $classes_and_styles['styles'] ),
 			$tabs
 		);

plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php

@@ -3,6 +3,7 @@ namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
 use Automattic\WooCommerce\Blocks\Utils\BlockTemplateUtils;
 use Automattic\WooCommerce\Blocks\Utils\ProductGalleryUtils;
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
 
 /**
  * ProductGallery class.
@@ -125,7 +126,7 @@ class ProductGallery extends AbstractBlock {
 		}
 
 		$number_of_thumbnails           = $block->attributes['thumbnailsNumberOfThumbnails'] ?? 0;
-		$classname                      = $attributes['className'] ?? '';
+		$classname                      = StyleAttributesUtils::get_classes_by_attributes( $attributes, array( 'extra_classes' ) );
 		$dialog                         = isset( $attributes['mode'] ) && 'full' !== $attributes['mode'] ? $this->render_dialog() : '';
 		$product_gallery_first_image    = ProductGalleryUtils::get_product_gallery_image_ids( $product, 1 );
 		$product_gallery_first_image_id = reset( $product_gallery_first_image );

plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryPager.php

@@ -2,6 +2,7 @@
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
 use Automattic\WooCommerce\Blocks\Utils\ProductGalleryUtils;
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
 
 /**
  * ProductGalleryPager class.
@@ -55,7 +56,7 @@ class ProductGalleryPager extends AbstractBlock {
 		}
 
 		$number_of_thumbnails = $block->context['thumbnailsNumberOfThumbnails'] ?? 0;
-		$classname            = $attributes['className'] ?? '';
+		$classname            = StyleAttributesUtils::get_classes_by_attributes( $attributes, array( 'extra_classes' ) );
 		$wrapper_attributes   = get_block_wrapper_attributes( array( 'class' => trim( $classname ) ) );
 		$post_id              = $block->context['postId'] ?? '';
 		$product              = wc_get_product( $post_id );

plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php

@@ -1,6 +1,8 @@
 <?php
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
 /**
  * ProductImageGallery class.
  */
@@ -67,7 +69,7 @@ class ProductImageGallery extends AbstractBlock {
 		$product_image_gallery_html = ob_get_clean();
 
 		$product   = $previous_product;
-		$classname = $attributes['className'] ?? '';
+		$classname = StyleAttributesUtils::get_classes_by_attributes( $attributes, array( 'extra_classes' ) );
 		return sprintf(
 			'<div class="wp-block-woocommerce-product-image-gallery %1$s">%2$s %3$s</div>',
 			esc_attr( $classname ),

plugins/woocommerce/src/Blocks/BlockTypes/ProductResultsCount.php

@@ -54,7 +54,6 @@ class ProductResultsCount extends AbstractBlock {
 				'wc-block-product-results-count',
 				'wp-block-woocommerce-product-results-count',
 			),
-			isset( $attributes['className'] ) ? array( $attributes['className'] ) : array(),
 		);
 		$p->set_attribute( 'class', implode( ' ', $classes ) );
 		$p->set_attribute( 'style', $parsed_style_attributes['styles'] );

plugins/woocommerce/src/Blocks/BlockTypes/ProductReviews.php

@@ -2,6 +2,8 @@
 
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
 /**
  * ProductReviews class.
  */
@@ -40,13 +42,11 @@ class ProductReviews extends AbstractBlock {
 
 		$reviews = ob_get_clean();
 
-		$classname = $attributes['className'] ?? '';
-
 		return sprintf(
 			'<div class="wp-block-woocommerce-product-reviews %1$s">
 				%2$s
 			</div>',
-			esc_attr( $classname ),
+			StyleAttributesUtils::get_classes_by_attributes( $attributes, array( 'extra_classes' ) ),
 			$reviews
 		);
 	}

plugins/woocommerce/src/Blocks/BlockTypes/ProductSaleBadge.php

@@ -110,8 +110,9 @@ class ProductSaleBadge extends AbstractBlock {
 			return null;
 		}
 
-		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array(), array( 'extra_classes' ) );
-		$classname          = isset( $attributes['className'] ) ? $attributes['className'] : '';
+
+		$classname = StyleAttributesUtils::get_classes_by_attributes( $attributes, array( 'extra_classes' ) );
 
 		$align = isset( $attributes['align'] ) ? $attributes['align'] : '';
 

plugins/woocommerce/src/Blocks/BlockTypes/ProductStockIndicator.php

@@ -101,7 +101,6 @@ class ProductStockIndicator extends AbstractBlock {
 		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
 
 		$classnames  = isset( $classes_and_styles['classes'] ) ? ' ' . $classes_and_styles['classes'] . ' ' : '';
-		$classnames .= isset( $attributes['className'] ) ? ' ' . $attributes['className'] . ' ' : '';
 		$classnames .= ! $is_in_stock ? ' wc-block-components-product-stock-indicator--out-of-stock ' : '';
 		$classnames .= $is_in_stock ? ' wc-block-components-product-stock-indicator--in-stock ' : '';
 		$classnames .= $is_low_stock ? ' wc-block-components-product-stock-indicator--low-stock ' : '';

plugins/woocommerce/src/Blocks/Utils/StyleAttributesUtils.php

@@ -687,6 +687,25 @@ class StyleAttributesUtils {
 		return self::EMPTY_STYLE;
 	}
 
+	/**
+	 * Get extra CSS classes from attributes.
+	 *
+	 * @param array $attributes Block attributes.
+	 * @return array
+	 */
+	public static function get_classes_from_attributes( $attributes ) {
+
+		$extra_css_classes = $attributes['className'] ?? '';
+
+		if ( '' !== $extra_css_classes ) {
+			return array(
+				'class' => $extra_css_classes,
+				'style' => null,
+			);
+		}
+		return self::EMPTY_STYLE;
+	}
+
 	/**
 	 * Get classes and styles from attributes.
 	 *
@@ -717,6 +736,7 @@ class StyleAttributesUtils {
 			'text_color'       => self::get_text_color_class_and_style( $attributes ),
 			'text_decoration'  => self::get_text_decoration_class_and_style( $attributes ),
 			'text_transform'   => self::get_text_transform_class_and_style( $attributes ),
+			'extra_classes'    => self::get_classes_from_attributes( $attributes ),
 		);
 
 		if ( ! empty( $properties ) ) {