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

Stock Indicator block: Add support for global style #5525

Merged
merged 8 commits into from
Jan 17, 2022

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Jan 6, 2022

This PR is blocked by #5515

This PR adds support for global style for the Summary Product block.

Now, the user can edit the style for:

  • text-color
  • font-size

#4965

Screenshots

image
without global style

image
with global style

Testing

Manual Testing

Check out this branch:

  1. On WordPress 5.9, install and enable the Gutenberg plugin.
  2. Install and enable the Twenty Twenty-Two theme.
  3. Add the Single Product block (this block contains Stock Indicator block) to a post.
  4. Get the focus on Stock Indicator block.
  5. On the right sidebar, personalize the styles of the block.
  6. Go on the page and check if there are changes.
  7. Reset to default using the Reset button from the different sections.
  8. Go to Dashboard and select Appearance > Editor (beta). On top of the screen, select Home > Browser all templates > Single Post. When the page is loaded, add the block to the page.
  9. On the Editor page click on the Styles icon on the right-top corner.
  10. Verify that the Stock Indicator block is shown under the Blocks section. Personalize again the block.
  11. Save your changes.
  12. Go on the page created earlier and check if all styles are applied correctly.
  13. Edit your previous post/page again.
  14. Change again the styles.
  15. Save your changes.
  16. Check if these styles have priority over the styles from the Site Editor.

Changelog

Add support for the global style for the Stock Indicator block.

@gigitux gigitux added type: enhancement The issue is a request for an enhancement. block: all products Issues related to the all products block. focus: global styles Issues that involve styles/css/layout structure. focus: FSE Work related to prepare WooCommerce for FSE. labels Jan 6, 2022
@gigitux gigitux self-assigned this Jan 6, 2022
@rubikuserbot rubikuserbot requested review from a team and dinhtungdu and removed request for a team January 6, 2022 11:33
@gigitux gigitux added status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. block: single product Issues related to the single product block. labels Jan 6, 2022
@gigitux gigitux mentioned this pull request Jan 6, 2022
18 tasks
@github-actions
Copy link
Contributor

github-actions bot commented Jan 6, 2022

Size Change: +385 B (0%)

Total Size: 817 kB

Filename Size Change
build/active-filters.js 7.1 kB +2 B (0%)
build/all-products-frontend.js 18.6 kB -1 B (0%)
build/all-products.js 35.1 kB +66 B (0%)
build/all-reviews.js 8.35 kB -1 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---e400b4b2.js 0 B -238 B (removed) 🏆
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB +1 B (0%)
build/atomic-block-components/price-frontend.js 1.74 kB +1 B (0%)
build/atomic-block-components/price.js 1.7 kB +1 B (0%)
build/atomic-block-components/sale-badge-frontend.js 625 B +1 B (0%)
build/atomic-block-components/stock-indicator-frontend.js 925 B +341 B (+58%) 🆘
build/atomic-block-components/stock-indicator.js 626 B +41 B (+7%) 🔍
build/atomic-block-components/summary--atomic-block-components/title.js 0 B -451 B (removed) 🏆
build/atomic-block-components/summary-frontend.js 1.23 kB +4 B (0%)
build/atomic-block-components/summary.js 925 B -1 B (0%)
build/atomic-block-components/title-frontend.js 1.2 kB +1 B (0%)
build/atomic-block-components/title.js 931 B +1 B (0%)
build/cart-blocks/line-items-frontend.js 5.49 kB -2 B (0%)
build/cart-blocks/order-summary-frontend.js 8.98 kB -1 B (0%)
build/cart-frontend.js 45.4 kB +6 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.22 kB +2 B (0%)
build/checkout-blocks/billing-address-frontend.js 886 B -1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.13 kB -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 11.4 kB -3 B (0%)
build/checkout-blocks/payment-frontend.js 7.39 kB +2 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.81 kB -2 B (0%)
build/checkout-frontend.js 47.5 kB -14 B (0%)
build/checkout.js 47.1 kB +1 B (0%)
build/featured-product.js 9.91 kB +1 B (0%)
build/product-best-sellers.js 7.54 kB +2 B (0%)
build/product-category.js 9.11 kB +3 B (0%)
build/product-new.js 8.44 kB +2 B (0%)
build/product-on-sale.js 8.81 kB +2 B (0%)
build/product-tag.js 8.5 kB +5 B (0%)
build/product-top-rated.js 8.41 kB +2 B (0%)
build/products-by-attribute.js 9.22 kB +2 B (0%)
build/reviews-by-category.js 11.8 kB -4 B (0%)
build/reviews-by-product.js 12.9 kB +2 B (0%)
build/single-product-frontend.js 22.1 kB -1 B (0%)
build/single-product.js 10.5 kB +13 B (0%)
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.43 kB +1 B (0%)
build/wc-blocks-style-rtl.css 21.7 kB -44 B (0%)
build/wc-blocks-style.css 21.7 kB -44 B (0%)
build/wc-blocks-vendors.js 65.6 kB -1 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---8f355022.js 238 B +238 B (new file) 🆕
build/atomic-block-components/stock-indicator--atomic-block-components/summary--atomic-block-components/title.js 451 B +451 B (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.21 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.67 kB
build/atomic-block-components/add-to-cart-frontend.js 7.05 kB
build/atomic-block-components/add-to-cart.js 6.62 kB
build/atomic-block-components/button-frontend.js 1.48 kB
build/atomic-block-components/button.js 850 B
build/atomic-block-components/category-list-frontend.js 458 B
build/atomic-block-components/category-list.js 460 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/rating-frontend.js 553 B
build/atomic-block-components/rating.js 555 B
build/atomic-block-components/sale-badge.js 622 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/tag-list-frontend.js 460 B
build/atomic-block-components/tag-list.js 459 B
build/attribute-filter-frontend.js 16.3 kB
build/attribute-filter.js 12.6 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.15 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 4.86 kB
build/cart-blocks/filled-cart-frontend.js 763 B
build/cart-blocks/items-frontend.js 298 B
build/cart-blocks/totals-frontend.js 321 B
build/cart.js 44.6 kB
build/checkout-blocks/actions-frontend.js 1.44 kB
build/checkout-blocks/contact-information-frontend.js 2.94 kB
build/checkout-blocks/express-payment-frontend.js 5.15 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/shipping-address-frontend.js 973 B
build/checkout-blocks/terms-frontend.js 1.21 kB
build/checkout-blocks/totals-frontend.js 324 B
build/featured-category.js 8.55 kB
build/handpicked-products.js 7.33 kB
build/legacy-template.js 2.18 kB
build/mini-cart-component-frontend.js 14.2 kB
build/mini-cart-contents.js 3.59 kB
build/mini-cart-frontend.js 1.76 kB
build/mini-cart.js 6.46 kB
build/price-filter-frontend.js 12.6 kB
build/price-filter.js 8.78 kB
build/price-format.js 1.18 kB
build/product-categories.js 3.48 kB
build/product-search.js 2.47 kB
build/reviews-frontend.js 7.24 kB
build/stock-filter-frontend.js 6.81 kB
build/stock-filter.js 6.83 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 19 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.75 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.57 kB
build/wc-blocks-editor-style.css 4.57 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks.js 2.96 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.61 kB

compressed-size-action

@gigitux gigitux removed the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Jan 12, 2022
Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

Block and global styles were both working in my test. But I have some concerns about the color based on stock statuses. Please check the review comments for more detail.

Comment on lines 1 to 21
/**
* External dependencies
*/
import { useBlockProps } from '@wordpress/block-editor';
import classnames from 'classnames';

type Props = {
attributes: Record< string, unknown > & {
className?: string;
};
};

export const Save = ( { attributes }: Props ): JSX.Element => {
return (
<div
{ ...useBlockProps.save( {
className: classnames( 'is-loading', attributes.className ),
} ) }
/>
);
};
Copy link
Member

Choose a reason for hiding this comment

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

This code is for the Sale badge block. Was it added by accident?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed, thanks!

Comment on lines -7 to -16
&--in-stock {
color: $in-stock-color;
}
&--out-of-stock {
color: $no-stock-color;
}
&--low-stock,
&--available-on-backorder {
color: $low-stock-color;
}
Copy link
Member

Choose a reason for hiding this comment

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

We are removing the feature that store owners actually need here. The current Supports API doesn't allow multiple colors, so I don't think it's a good idea to remove styles for stock statuses. Instead, we should accept the limitation of the Supports API. In the other words, ignoring the color, only add global style support for typography.

We can also create custom inspector settings to control colors for each state, and it will be local block style only, not global style.

Copy link
Contributor Author

@gigitux gigitux Jan 13, 2022

Choose a reason for hiding this comment

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

We are removing the feature that store owners actually need here. The current Supports API doesn't allow multiple colors, so I don't think it's a good idea to remove styles for stock statuses.

Before proceeding, I asked the rest of the team. Please check this discussion (p1641461102003800-slack-C02FL3X7KR6), maybe we can continue the discussion there.

},
} ),
typography: {
fontSize: true,
Copy link
Member

Choose a reason for hiding this comment

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

It makes sense to me to support all typography properties for this block instead of only font size. At least, font-weight and text-transform should be supported.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

According to main issue #4965, we should enable only font-size, but yeah we can enable them easily. @Aljullu, what do you think?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, makes sense to me. I tested the Post Categories block from Gutenberg and it offers many more typography options than what we offer in Stock indicator.

I guess the same could be said about the Product Category List, Product Summary and Product Tag List.

@vivialice what are your thoughts on this? Should we enable all typography properties in those blocks?

…products-block into add/4965-stock-indicator
Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

According to main issue #4965, we should enable only font-size, but yeah we can enable them easily.

I agree to follow the requirements. We can merge this PR as it is for now and add more properties later. By doing so, we don't block the release of the Global Style project.

@github-actions github-actions bot added this to the 6.8.0 milestone Jan 17, 2022
@gigitux
Copy link
Contributor Author

gigitux commented Jan 17, 2022

Thanks for the review!

@gigitux gigitux merged commit 0d7acec into trunk Jan 17, 2022
@gigitux gigitux deleted the add/4965-stock-indicator branch January 17, 2022 09:11
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: all products Issues related to the all products block. block: single product Issues related to the single product block. focus: FSE Work related to prepare WooCommerce for FSE. focus: global styles Issues that involve styles/css/layout structure. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants