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

Sale Product Block: Enable global style #5565

Merged
merged 15 commits into from
Feb 14, 2022
Merged

Sale Product Block: Enable global style #5565

merged 15 commits into from
Feb 14, 2022

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Jan 14, 2022

This PR is blocked by #5542

This PR adds support for global style for the Sale Product block. This code registers the block on the PHP side. This is necessary for using the __experimentalSelector from Global Styles API.

Now, the user can edit the style for:

  • border-radius
  • font-size
  • text color
  • background-color (including gradients)
  • padding
  • color
  • radius

#4965

Screenshots

image
without global style

image

with global style

Testing

Manual Testing

Check out this branch:

  1. Install and enable the Twenty Twenty-Two theme.
  2. Add the All Product Block to a post.
  3. Go to Dashboard and select Appearance > Editor (beta).
  4. On the Editor page click on the Styles icon on the right-top corner.
  5. Verify that the Sale Product block is shown under the Blocks section. Click on the label. Personalize the block.
  6. Save your changes.
  7. Go on the page created earlier and check if all styles are applied correctly.

Changelog

Add support for the global style for the Sale Product block.

@rubikuserbot rubikuserbot requested review from a team and frontdevde and removed request for a team January 14, 2022 13:32
@github-actions
Copy link
Contributor

github-actions bot commented Jan 14, 2022

Size Change: +923 B (0%)

Total Size: 814 kB

Filename Size Change
build/active-filters-frontend.js 6.37 kB +4 B (0%)
build/all-products-frontend.js 18.8 kB -5 B (0%)
build/all-products.js 34.1 kB +95 B (0%)
build/all-reviews.js 8.06 kB -1 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---8f355022.js 0 B -255 B (removed) 🏆
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.7 kB +1 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 6.94 kB +2 B (0%)
build/atomic-block-components/add-to-cart.js 6.5 kB -1 B (0%)
build/atomic-block-components/image-frontend.js 1.75 kB +374 B (+27%) 🚨
build/atomic-block-components/price-frontend.js 1.74 kB +1 B (0%)
build/atomic-block-components/sale-badge-frontend.js 1 kB +378 B (+60%) 🆘
build/atomic-block-components/sale-badge.js 685 B +61 B (+10%) ⚠️
build/atomic-block-components/stock-indicator--atomic-block-components/summary--atomic-block-components/title.js 0 B -468 B (removed) 🏆
build/atomic-block-components/stock-indicator-frontend.js 940 B +1 B (0%)
build/atomic-block-components/title-frontend.js 1.21 kB +1 B (0%)
build/atomic-block-components/title.js 935 B +1 B (0%)
build/attribute-filter-frontend.js 16.8 kB +1 B (0%)
build/attribute-filter.js 13 kB -16 B (0%)
build/cart-blocks/order-summary-frontend.js 8.87 kB +1 B (0%)
build/cart-frontend.js 45.6 kB -1 B (0%)
build/cart.js 43.7 kB +5 B (0%)
build/checkout-blocks/actions-frontend.js 1.41 kB -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 11.3 kB -1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.81 kB +2 B (0%)
build/checkout-frontend.js 47.7 kB -2 B (0%)
build/checkout.js 45.2 kB +6 B (0%)
build/featured-category.js 8.61 kB -2 B (0%)
build/handpicked-products.js 7.09 kB -1 B (0%)
build/mini-cart-component-frontend.js 14.3 kB -6 B (0%)
build/price-filter-frontend.js 12.6 kB +1 B (0%)
build/product-best-sellers.js 7.37 kB -1 B (0%)
build/product-new.js 7.67 kB +1 B (0%)
build/product-tag.js 7.81 kB +1 B (0%)
build/products-by-attribute.js 8.38 kB -5 B (0%)
build/reviews-by-category.js 11.5 kB -3 B (0%)
build/reviews-by-product.js 12.6 kB -1 B (0%)
build/single-product-frontend.js 22.2 kB -6 B (0%)
build/single-product.js 10 kB +14 B (0%)
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB +1 B (0%)
build/wc-blocks-style-rtl.css 22 kB +11 B (0%)
build/wc-blocks-style.css 22 kB +11 B (0%)
build/wc-blocks-vendors.js 69.7 kB +2 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---8d10e32a.js 255 B +255 B (new file) 🆕
build/atomic-block-components/image--atomic-block-components/sale-badge--atomic-block-components/stock-in--9da6d11f.js 468 B +468 B (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/active-filters.js 7.05 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/button-frontend.js 1.54 kB
build/atomic-block-components/button.js 914 B
build/atomic-block-components/category-list-frontend.js 457 B
build/atomic-block-components/category-list.js 459 B
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price.js 1.69 kB
build/atomic-block-components/rating-frontend.js 703 B
build/atomic-block-components/rating.js 700 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/stock-indicator.js 623 B
build/atomic-block-components/summary-frontend.js 1.24 kB
build/atomic-block-components/summary.js 924 B
build/atomic-block-components/tag-list-frontend.js 460 B
build/atomic-block-components/tag-list.js 459 B
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.14 kB
build/cart-blocks/checkout-button-frontend.js 1.15 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 5.18 kB
build/cart-blocks/filled-cart-frontend.js 766 B
build/cart-blocks/items-frontend.js 299 B
build/cart-blocks/line-items-frontend.js 5.49 kB
build/cart-blocks/totals-frontend.js 320 B
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.22 kB
build/checkout-blocks/billing-address-frontend.js 888 B
build/checkout-blocks/contact-information-frontend.js 2.94 kB
build/checkout-blocks/express-payment-frontend.js 5.46 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/payment-frontend.js 7.75 kB
build/checkout-blocks/shipping-address-frontend.js 976 B
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 324 B
build/featured-product.js 9.62 kB
build/legacy-template.js 2.18 kB
build/mini-cart-contents.js 3.82 kB
build/mini-cart-frontend.js 1.81 kB
build/mini-cart.js 6.39 kB
build/price-filter.js 8.51 kB
build/price-format.js 1.18 kB
build/product-categories.js 3.17 kB
build/product-category.js 8.49 kB
build/product-on-sale.js 7.99 kB
build/product-search.js 2.18 kB
build/product-top-rated.js 7.9 kB
build/reviews-frontend.js 7.34 kB
build/stock-filter-frontend.js 6.61 kB
build/stock-filter.js 6.69 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/add-to-cart-frontend.js 7.51 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.74 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.84 kB
build/wc-blocks-editor-style.css 4.84 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.62 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

Sale Product block: enable global style #4965
@gigitux gigitux force-pushed the add/4965-sale-product branch from 8386b5c to d33c181 Compare January 14, 2022 18:07
@gigitux gigitux self-assigned this Jan 14, 2022
@gigitux gigitux added focus: global styles Issues that involve styles/css/layout structure. block: single product Issues related to the single product block. labels Jan 14, 2022
…oocommerce-gutenberg-products-block into add/4965-sale-product
@gigitux gigitux force-pushed the add/4965-sale-product branch from d33c181 to 19f5f54 Compare January 14, 2022 18:38
@gigitux gigitux mentioned this pull request Jan 14, 2022
18 tasks
@gigitux gigitux force-pushed the add/4965-sale-product branch from 0f57f3e to 0d69454 Compare February 8, 2022 16:57
@gigitux gigitux force-pushed the add/4965-sale-product branch from 0d69454 to 9711034 Compare February 8, 2022 17:06
@gigitux gigitux marked this pull request as ready for review February 9, 2022 11:07
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.

This is look good to me. Even the block registration looks a little bit confusing, I think we can always address that issue later when we have another atomic block that needs __experimentalSelector support. __experimentalSelector, by its name, is experimental, so it can be changed in the future Gutenberg release, so it isn't worth addressing it now.

@@ -178,6 +178,7 @@ protected function get_block_types() {
'ProductTitle',
'ProductSummary',
'ProductStockIndicator',
'ProductSaleBadge',
Copy link
Member

Choose a reason for hiding this comment

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

I think a comment here explaining why we register an atomic block here will be helpful.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good point! I added a @todo comment. In this way, in the end, I will re-organize the order of the elements in the array (maybe we can move down the atomic blocks and add a comment that explains why)

@github-actions github-actions bot added this to the 7.0.0 milestone Feb 13, 2022
@github-actions
Copy link
Contributor

Add a comment why some atomic blocks are included in this...

Add a comment why some atomic blocks are included in this array.


https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/19c03410409ac44660859d81d30cdcc60b4a3f8e/src/BlockTypesController.php#L156-L159

🚀 This comment was generated by the automations bot based on a todo comment in 19c0341 in #5565. cc @gigitux

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: single product Issues related to the single product block. 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