Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
Product Price: Fix alignment setting on the frontend (#7795)
Browse files Browse the repository at this point in the history 
* Product Price: Fix alignment setting on the frontend

* Product Price: Remove the Feature plugin flag from the alignment setting

* Product Price: Code clean-up

* Product Price: Fix PHP warning
  • Loading branch information
@danieldudzic
danieldudzic authored Dec 1, 2022
1 parent 654107e commit 4837427
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 34 deletions.
14 changes: 4 additions & 10 deletions assets/js/atomic/blocks/product-elements/price/attributes.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
/**
* External dependencies
*/
import { isFeaturePluginBuild } from '@woocommerce/block-settings';

let blockAttributes = {
export const blockAttributes = {
productId: {
type: 'number',
default: 0,
Expand All @@ -12,14 +11,9 @@ let blockAttributes = {
type: 'boolean',
default: false,
},
textAlign: {
type: 'string',
},
};

if ( isFeaturePluginBuild() ) {
blockAttributes = {
...blockAttributes,
textAlign: {
type: 'string',
},
};
}
export default blockAttributes;
15 changes: 6 additions & 9 deletions assets/js/atomic/blocks/product-elements/price/edit.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/**
* External dependencies
*/
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
import {
AlignmentToolbar,
BlockControls,
Expand Down Expand Up @@ -33,14 +32,12 @@ const PriceEdit = ( { attributes, setAttributes, context } ) => {
return (
<>
<BlockControls>
{ isFeaturePluginBuild() && (
<AlignmentToolbar
value={ attributes.textAlign }
onChange={ ( newAlign ) => {
setAttributes( { textAlign: newAlign } );
} }
/>
) }
<AlignmentToolbar
value={ attributes.textAlign }
onChange={ ( newAlign ) => {
setAttributes( { textAlign: newAlign } );
} }
/>
</BlockControls>
<div { ...blockProps }>
<Block { ...blockAttrs } />
Expand Down
2 changes: 1 addition & 1 deletion docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ We also have individual features or code blocks behind a feature flag, this is a

### Feature plugin flag

- ⚛️ Product Price new controls ([JS flag 1](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b3a9753d8b7dae18b36025d09fbff835b8365de0/assets/js/atomic/blocks/product-elements/price/attributes.js#L13-L44) | [JS flag 2-1](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/8d2f0ad8ade2c7217769b431f93de76d6cfacf6e/assets/js/atomic/blocks/product-elements/price/block.js#L116) | [JS flag 2-2](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/8d2f0ad8ade2c7217769b431f93de76d6cfacf6e/assets/js/atomic/blocks/product-elements/price/block.js#L114) | [JS flag 2-3](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/8d2f0ad8ade2c7217769b431f93de76d6cfacf6e/assets/js/atomic/blocks/product-elements/price/block.js#L91) | [JS flag 2-4](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/8d2f0ad8ade2c7217769b431f93de76d6cfacf6e/assets/js/atomic/blocks/product-elements/price/block.js#L95) | [JS flag 2-5](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/8d2f0ad8ade2c7217769b431f93de76d6cfacf6e/assets/js/atomic/blocks/product-elements/price/block.js#L106) | [JS flag 3-1](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b3a9753d8b7dae18b36025d09fbff835b8365de0/assets/js/atomic/blocks/product-elements/price/edit.js#L59-L108) | [JS flag 3-2](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b3a9753d8b7dae18b36025d09fbff835b8365de0/assets/js/atomic/blocks/product-elements/price/edit.js#L114-L131)).
- ⚛️ Product Price new controls ([JS flag 1](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b3a9753d8b7dae18b36025d09fbff835b8365de0/assets/js/atomic/blocks/product-elements/price/attributes.js#L13-L44) | [JS flag 2-1](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/8d2f0ad8ade2c7217769b431f93de76d6cfacf6e/assets/js/atomic/blocks/product-elements/price/block.js#L116) | [JS flag 2-2](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/8d2f0ad8ade2c7217769b431f93de76d6cfacf6e/assets/js/atomic/blocks/product-elements/price/block.js#L114) | [JS flag 2-3](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/8d2f0ad8ade2c7217769b431f93de76d6cfacf6e/assets/js/atomic/blocks/product-elements/price/block.js#L91) | [JS flag 2-4](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/8d2f0ad8ade2c7217769b431f93de76d6cfacf6e/assets/js/atomic/blocks/product-elements/price/block.js#L95) | [JS flag 2-5](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/8d2f0ad8ade2c7217769b431f93de76d6cfacf6e/assets/js/atomic/blocks/product-elements/price/block.js#L106) | [JS flag 3-2](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b3a9753d8b7dae18b36025d09fbff835b8365de0/assets/js/atomic/blocks/product-elements/price/edit.js#L114-L131)).
- ⚛️ Product Title new controls ([JS flag 1](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b3a9753d8b7dae18b36025d09fbff835b8365de0/assets/js/atomic/blocks/product-elements/title/attributes.js#L21-L40) | [JS flag 2-1](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b3a9753d8b7dae18b36025d09fbff835b8365de0/assets/js/atomic/blocks/product-elements/title/block.js#L70-L72) | [JS flag 2-2](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b3a9753d8b7dae18b36025d09fbff835b8365de0/assets/js/atomic/blocks/product-elements/title/block.js#L94-L95) | [JS flag 2-3](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b3a9753d8b7dae18b36025d09fbff835b8365de0/assets/js/atomic/blocks/product-elements/title/block.js#L104) | [JS flag 3-1](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b3a9753d8b7dae18b36025d09fbff835b8365de0/assets/js/atomic/blocks/product-elements/title/edit.js#L47-L54) | [JS flag 3-2](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b3a9753d8b7dae18b36025d09fbff835b8365de0/assets/js/atomic/blocks/product-elements/title/edit.js#L77-L107) | [JS flag 3-3](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b3a9753d8b7dae18b36025d09fbff835b8365de0/assets/js/atomic/blocks/product-elements/title/edit.js#L116-L129)).
- Utility function to pass styles to a block ([JS flag](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/9ebddbc5d21eb3cc67fedddbccbd86453313eb64/assets/js/atomic/utils/block-styling.js#L6-L12)).

Expand Down
9 changes: 7 additions & 2 deletions src/BlockTypes/ProductPrice.php
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<?php
namespace Automattic\WooCommerce\Blocks\BlockTypes;

use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;

/**
* ProductPrice class.
*/
Expand Down Expand Up @@ -80,10 +82,13 @@ protected function render( $attributes, $content, $block ) {
$product = wc_get_product( $post_id );

if ( $product ) {
$classes_and_styles = StyleAttributesUtils::get_text_align_class_and_style( $attributes );

return sprintf(
'<div class="wc-block-components-product-price wc-block-grid__product-price">
%s
'<div class="wc-block-components-product-price wc-block-grid__product-price %1$s">
%2$s
</div>',
$classes_and_styles['class'] ?? '',
$product->get_price_html()
);
}
Expand Down
62 changes: 50 additions & 12 deletions src/Utils/StyleAttributesUtils.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ public static function get_font_size_class_and_style( $attributes ) {

if ( ! $font_size && '' === $custom_font_size ) {
return null;
};
}

if ( $font_size ) {
return array(
Expand Down Expand Up @@ -93,7 +93,7 @@ public static function get_text_color_class_and_style( $attributes ) {

if ( ! $text_color && ! $custom_text_color ) {
return null;
};
}

if ( $text_color ) {
return array(
Expand Down Expand Up @@ -122,7 +122,7 @@ public static function get_link_color_class_and_style( $attributes ) {

if ( ! isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
return null;
};
}

$link_color = $attributes['style']['elements']['link']['color']['text'];

Expand Down Expand Up @@ -160,7 +160,7 @@ public static function get_line_height_class_and_style( $attributes ) {

if ( ! $line_height ) {
return null;
};
}

return array(
'class' => null,
Expand All @@ -183,7 +183,7 @@ public static function get_background_color_class_and_style( $attributes ) {

if ( ! $background_color && '' === $custom_background_color ) {
return null;
};
}

if ( $background_color ) {
return array(
Expand Down Expand Up @@ -216,7 +216,7 @@ public static function get_border_color_class_and_style( $attributes ) {

if ( ! $border_color && '' === $custom_border_color ) {
return null;
};
}

if ( $border_color ) {
return array(
Expand Down Expand Up @@ -245,7 +245,7 @@ public static function get_border_radius_class_and_style( $attributes ) {

if ( '' === $custom_border_radius ) {
return null;
};
}

return array(
'class' => null,
Expand All @@ -266,7 +266,7 @@ public static function get_border_width_class_and_style( $attributes ) {

if ( '' === $custom_border_width ) {
return null;
};
}

return array(
'class' => null,
Expand All @@ -283,11 +283,11 @@ public static function get_border_width_class_and_style( $attributes ) {
*/
public static function get_align_class_and_style( $attributes ) {

$align_attribute = isset( $attributes['align'] ) ? $attributes['align'] : null;
$align_attribute = $attributes['align'] ?? null;

if ( ! $align_attribute ) {
return null;
};
}

if ( 'wide' === $align_attribute ) {
return array(
Expand Down Expand Up @@ -327,6 +327,44 @@ public static function get_align_class_and_style( $attributes ) {
return null;
}

/**
* Get class and style for text align from attributes.
*
* @param array $attributes Block attributes.
*
* @return (array | null)
*/
public static function get_text_align_class_and_style( $attributes ) {

$text_align_attribute = $attributes['textAlign'] ?? null;

if ( ! $text_align_attribute ) {
return null;
}

if ( 'left' === $text_align_attribute ) {
return array(
'class' => 'has-text-align-left',
'style' => null,
);
}

if ( 'center' === $text_align_attribute ) {
return array(
'class' => 'has-text-align-center',
'style' => null,
);
}

if ( 'right' === $text_align_attribute ) {
return array(
'class' => 'has-text-align-right',
'style' => null,
);
}

return null;
}

/**
* If spacing value is in preset format, convert it to a CSS var. Else return same value
Expand Down Expand Up @@ -356,7 +394,7 @@ public static function get_spacing_value( $spacing_value ) {
* @return (array | null)
*/
public static function get_padding_class_and_style( $attributes ) {
$padding = isset( $attributes['style']['spacing']['padding'] ) ? $attributes['style']['spacing']['padding'] : null;
$padding = $attributes['style']['spacing']['padding'] ?? null;

if ( ! $padding ) {
return null;
Expand Down Expand Up @@ -390,7 +428,7 @@ public static function get_padding_class_and_style( $attributes ) {
* @return (array | null)
*/
public static function get_margin_class_and_style( $attributes ) {
$margin = isset( $attributes['style']['spacing']['margin'] ) ? $attributes['style']['spacing']['margin'] : null;
$margin = $attributes['style']['spacing']['margin'] ?? null;

if ( ! $margin ) {
return null;
Expand Down

0 comments on commit 4837427

Please sign in to comment.