Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Alejandro Iglesias 2024-09-27 23:43:02 -07:00 committed by GitHub
parent c8a8ede22c
commit de13a47a2a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 51 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce/changelog/fix-add-extra-css-classes-to-product-image Normal file
View File

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

4
plugins/woocommerce/src/Blocks/BlockTypes/AddToCartForm.php
View File

@ -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

5
plugins/woocommerce/src/Blocks/BlockTypes/FeaturedItem.php
View File

@ -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;

7
plugins/woocommerce/src/Blocks/BlockTypes/MiniCart.php
View File

@ -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'] ) : '';

7
plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/AbstractOrderConfirmationBlock.php
View File

@ -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 ),

4
plugins/woocommerce/src/Blocks/BlockTypes/OrderConfirmation/Status.php
View File

@ -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']}";

4
plugins/woocommerce/src/Blocks/BlockTypes/ProductButton.php
View File

@ -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(

6
plugins/woocommerce/src/Blocks/BlockTypes/ProductCategories.php
View File

@ -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 {

9
plugins/woocommerce/src/Blocks/BlockTypes/ProductDetails.php
View File

@ -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 style="%3$s">
%4$s
'<div class="wp-block-woocommerce-product-details %1$s">
<div style="%2$s">
%3$s
</div>
</div>',
esc_attr( $classes_and_styles['classes'] ),
esc_attr( $classname ),
esc_attr( $classes_and_styles['styles'] ),
$tabs
);

3
plugins/woocommerce/src/Blocks/BlockTypes/ProductGallery.php
View File

@ -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 );

3
plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryPager.php
View File

@ -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 );

4
plugins/woocommerce/src/Blocks/BlockTypes/ProductImageGallery.php
View File

@ -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 ),

1
plugins/woocommerce/src/Blocks/BlockTypes/ProductResultsCount.php
View File

@ -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'] );

6
plugins/woocommerce/src/Blocks/BlockTypes/ProductReviews.php
View File

@ -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
);
}

5
plugins/woocommerce/src/Blocks/BlockTypes/ProductSaleBadge.php
View File

@ -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'] : '';

1
plugins/woocommerce/src/Blocks/BlockTypes/ProductStockIndicator.php
View File

@ -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 ' : '';

20
plugins/woocommerce/src/Blocks/Utils/StyleAttributesUtils.php
View File

@ -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 ) ) {