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

Product Price: support for background color, line height, font family, letter spacing, and padding (https://github.com/woocommerce/woocommerce-blocks/pull/8906) 

* Add typography and spacing support to Product Price block

This commit adds additional typography and spacing support to the Product Price block. The following changes have been made:

1. In `assets/js/atomic/blocks/product-elements/price/block.tsx`, the `typographyProps.className` has been added to the `classNames` function to apply the typography styles.

2. In `assets/js/atomic/blocks/product-elements/price/supports.ts`, the following support attributes have been added to the `typography` object:
  - `lineHeight`
  - `__experimentalFontFamily`
  - `__experimentalLetterSpacing`
Additionally, the `padding` attribute has been added to the `spacing` object.

3. In `src/BlockTypes/ProductPrice.php`, the `StyleAttributesUtils::get_classes_and_styles_by_attributes` function has been updated to receive all attributes instead of a predefined list.

* Enable background color support for Product Price block

This commit enables the background color support for the Product Price block in the WooCommerce Blocks plugin. The following change has been made:

1. In `assets/js/atomic/blocks/product-elements/price/supports.ts`, the `background` property within the `color` object has been changed from `false` to `true`, allowing users to set the background color for the Product Price block.
This commit is contained in:
Manish Menaria 2023-04-04 15:38:45 +05:30 committed by GitHub
parent 42c375f9e0
commit e1183211e5
3 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.tsx
View File

@ -54,7 +54,8 @@ export const Block = ( props: Props ): JSX.Element | null => {
colorProps.className,
{
[ `${ parentClassName }__product-price` ]: parentClassName,
}
},
typographyProps.className
);
if ( ! product.id && ! isDescendentOfSingleProductTemplate ) {

6
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/supports.ts
View File

@ -14,21 +14,25 @@ export const supports = {
...( isFeaturePluginBuild() && {
color: {
text: true,
background: false,
background: true,
link: false,
__experimentalSkipSerialization: true,
},
typography: {
fontSize: true,
lineHeight: true,
__experimentalFontFamily: true,
__experimentalFontWeight: true,
__experimentalFontStyle: true,
__experimentalSkipSerialization: true,
__experimentalLetterSpacing: true,
},
__experimentalSelector: '.wc-block-components-product-price',
} ),
...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
spacing: {
margin: true,
padding: true,
},
} ),
};

2
plugins/woocommerce-blocks/src/BlockTypes/ProductPrice.php
View File

@ -82,7 +82,7 @@ class ProductPrice extends AbstractBlock {
$product = wc_get_product( $post_id );
if ( $product ) {
$styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes, array( 'font_size', 'font_weight', 'font_style', 'text_color', 'background_color', 'margin' ) );
$styles_and_classes = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
$text_align_styles_and_classes = StyleAttributesUtils::get_text_align_class_and_style( $attributes );
return sprintf(