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

Product Price: Fix alignment setting on the frontend #7795

Merged
merged 4 commits into from
Dec 1, 2022
Merged

Product Price: Fix alignment setting on the frontend #7795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4ca6b49
Product Price: Fix alignment setting on the frontend
danieldudzic Nov 30, 2022
e79766a
Product Price: Remove the Feature plugin flag from the alignment setting
danieldudzic Nov 30, 2022
cde862b
Product Price: Code clean-up
danieldudzic Dec 1, 2022
bfb1030
Product Price: Fix PHP warning
danieldudzic Dec 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 4 additions & 10 deletions assets/js/atomic/blocks/product-elements/price/attributes.js
View file
Open in desktop
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() ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Out of curiosity: why are we removing the feature flag here? Was this part of a decision documented elsewhere?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No idea why it was there in the first place. I have asked @Aljullu, but he didn't know either. It doesn't really make sense for it to be there as Text Alignment is not an experimental feature. We have decided it's safe to just remove it.

Also that setting was broken on the frontend anyway 🤷‍♂️

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That makes sense: thanks for clarifying!

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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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