diff --git a/plugins/woocommerce/changelog/fix-add-extra-css-classes-to-product-image b/plugins/woocommerce/changelog/fix-add-extra-css-classes-to-product-image new file mode 100644 index 00000000000..54b208d6aa3 --- /dev/null +++ b/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 diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php b/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php index e2c02850e3f..8b8aa44c6fc 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php +++ b/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( - '
%5$s
', + '
%4$s
', esc_attr( $classes_and_styles['classes'] ), - esc_attr( $classname ), esc_attr( $product_classname ), esc_attr( $classes_and_styles['styles'] ), $product diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/FeaturedItem.php b/plugins/woocommerce/src/Blocks/BlockTypes/FeaturedItem.php index 344dc858d5d..235bd9a535b 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/FeaturedItem.php +++ b/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; diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php index cb5952d2d84..4f9820b193e 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php +++ b/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_classes .= ' ' . $attributes['className']; - } - $wrapper_styles = $classes_styles['styles']; + $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'] ) : ''; diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/AbstractOrderConfirmationBlock.php b/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/AbstractOrderConfirmationBlock.php index 753e521f516..2afc436432a 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/AbstractOrderConfirmationBlock.php +++ b/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( '
%3$s
', - esc_attr( trim( $classname ) ), + esc_attr( $classes_and_styles['classes'] ), esc_attr( $classes_and_styles['styles'] ), $block_content, esc_attr( $this->block_name ), diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Status.php b/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Status.php index 047be224e28..01eddceae64 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Status.php +++ b/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']}"; diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php index c7d7554c6d7..468e832110c 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php +++ b/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 ); - $classname = $attributes['className'] ?? ''; + $styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array(), array( 'extra_classes' ) ); + $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( diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductCategories.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductCategories.php index 9ad74fd8016..a9ac5c1db33 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductCategories.php +++ b/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 { diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductDetails.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductDetails.php index 907d198dde9..a17a21a4fad 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductDetails.php +++ b/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( - '
-
- %4$s + '
+
+ %3$s
', esc_attr( $classes_and_styles['classes'] ), - esc_attr( $classname ), esc_attr( $classes_and_styles['styles'] ), $tabs ); diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php index 9d52abacc8a..0ecdea898b0 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php +++ b/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 ); diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryPager.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryPager.php index 58e268addc0..ac478cc71c0 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryPager.php +++ b/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 ); diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php index 2c08524fdc0..98dc66b40ed 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php +++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php @@ -1,6 +1,8 @@ %2$s %3$s
', esc_attr( $classname ), diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductResultsCount.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductResultsCount.php index 61bbe35fdd1..aa5e8b20e8a 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductResultsCount.php +++ b/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'] ); diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductReviews.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductReviews.php index 8675cdc2709..719c9dc758a 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductReviews.php +++ b/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( '
%2$s
', - esc_attr( $classname ), + StyleAttributesUtils::get_classes_by_attributes( $attributes, array( 'extra_classes' ) ), $reviews ); } diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductSaleBadge.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductSaleBadge.php index 5bd428d21e2..b7e958bd43a 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductSaleBadge.php +++ b/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 ); - $classname = isset( $attributes['className'] ) ? $attributes['className'] : ''; + $classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array(), array( 'extra_classes' ) ); + + $classname = StyleAttributesUtils::get_classes_by_attributes( $attributes, array( 'extra_classes' ) ); $align = isset( $attributes['align'] ) ? $attributes['align'] : ''; diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductStockIndicator.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductStockIndicator.php index 867d6d9d50a..0bc742e2336 100644 --- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductStockIndicator.php +++ b/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 ' : ''; diff --git a/plugins/woocommerce/src/Blocks/Utils/StyleAttributesUtils.php b/plugins/woocommerce/src/Blocks/Utils/StyleAttributesUtils.php index 5205dcc3691..ce5894ce1c9 100644 --- a/plugins/woocommerce/src/Blocks/Utils/StyleAttributesUtils.php +++ b/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 ) ) {