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

Summary Product block: Add support for global style #5524

Merged
merged 9 commits into from Jan 12, 2022
Merged

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 Summary Product block) to a post.
  4. Get the focus on Summary Product 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).
  9. On the Editor page click on the Styles icon on the right-top corner.
  10. Verify that the Summary Product 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 Summary Product block.

@gigitux gigitux added type: enhancement The issue is a request for an enhancement. block: all products Issues related to the all products block. block: single product Issues related to the single product 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 sunyatasattva and removed request for a team January 6, 2022 10:51
@gigitux gigitux added the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Jan 6, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Jan 6, 2022

Size Change: +1.13 kB (0%)

Total Size: 816 kB

Filename Size Change
build/active-filters-frontend.js 6.21 kB +1 B (0%)
build/active-filters.js 7.1 kB -1 B (0%)
build/all-products-frontend.js 18.6 kB +6 B (0%)
build/all-products.js 35 kB +260 B (+1%)
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---a7e2bb9b.js 2.67 kB -90 B (-3%)
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB -1 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 7.05 kB -1 B (0%)
build/atomic-block-components/add-to-cart.js 6.62 kB -2 B (0%)
build/atomic-block-components/button-frontend.js 1.48 kB +1 B (0%)
build/atomic-block-components/button.js 850 B -3 B (0%)
build/atomic-block-components/category-list.js 460 B +2 B (0%)
build/atomic-block-components/price-frontend.js 1.74 kB -2 B (0%)
build/atomic-block-components/price.js 1.7 kB -1 B (0%)
build/atomic-block-components/sale-badge-frontend.js 624 B -1 B (0%)
build/atomic-block-components/sale-badge.js 622 B +2 B (0%)
build/atomic-block-components/sku.js 386 B +1 B (0%)
build/atomic-block-components/stock-indicator-frontend.js 584 B -1 B (0%)
build/atomic-block-components/summary-frontend.js 1.22 kB +347 B (+40%) 🚨
build/atomic-block-components/summary.js 926 B +53 B (+6%) 🔍
build/atomic-block-components/title-frontend.js 1.2 kB +50 B (+4%)
build/atomic-block-components/title.js 930 B -256 B (-22%) 🎉
build/attribute-filter-frontend.js 16.3 kB +1 B (0%)
build/attribute-filter.js 12.6 kB +4 B (0%)
build/cart-blocks/line-items-frontend.js 5.49 kB +8 B (0%)
build/cart-blocks/order-summary-frontend.js 8.98 kB +2 B (0%)
build/cart-blocks/totals-frontend.js 321 B +1 B (0%)
build/cart-frontend.js 45.4 kB -3 B (0%)
build/cart.js 44.6 kB +3 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.22 kB +1 B (0%)
build/checkout-blocks/billing-address-frontend.js 887 B +1 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.15 kB -1 B (0%)
build/checkout-blocks/fields-frontend.js 344 B +1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.13 kB -2 B (0%)
build/checkout-blocks/order-summary-frontend.js 11.4 kB +12 B (0%)
build/checkout-blocks/payment-frontend.js 7.38 kB -3 B (0%)
build/checkout-blocks/shipping-address-frontend.js 973 B +1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.81 kB -5 B (0%)
build/checkout-frontend.js 47.5 kB -5 B (0%)
build/featured-category.js 8.55 kB +1 B (0%)
build/featured-product.js 9.9 kB -2 B (0%)
build/handpicked-products.js 7.33 kB +1 B (0%)
build/legacy-template.js 2.18 kB -3 B (0%)
build/mini-cart-component-frontend.js 14.2 kB -1 B (0%)
build/mini-cart-contents.js 3.59 kB -3 B (0%)
build/mini-cart.js 6.46 kB +1 B (0%)
build/price-filter.js 8.78 kB +9 B (0%)
build/product-category.js 9.11 kB +1 B (0%)
build/product-new.js 8.44 kB +2 B (0%)
build/product-on-sale.js 8.81 kB +1 B (0%)
build/product-search.js 2.47 kB +2 B (0%)
build/product-tag.js 8.5 kB -5 B (0%)
build/product-top-rated.js 8.41 kB +4 B (0%)
build/products-by-attribute.js 9.22 kB -2 B (0%)
build/reviews-by-category.js 11.9 kB +4 B (0%)
build/reviews-by-product.js 12.9 kB -2 B (0%)
build/single-product-frontend.js 22.1 kB +5 B (0%)
build/single-product.js 10.5 kB +62 B (+1%)
build/stock-filter-frontend.js 6.81 kB -1 B (0%)
build/stock-filter.js 6.83 kB +2 B (0%)
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.43 kB -2 B (0%)
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.75 kB -1 B (0%)
build/wc-blocks-vendors.js 65.6 kB -5 B (0%)
build/wc-blocks.js 2.96 kB -5 B (0%)
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---e400b4b2.js 238 B +238 B (new file) 🆕
build/atomic-block-components/summary--atomic-block-components/title.js 451 B +451 B (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/atomic-block-components/category-list-frontend.js 458 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/sku-frontend.js 386 B
build/atomic-block-components/stock-indicator.js 585 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.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/checkout-blocks/actions-frontend.js 1.44 kB
build/checkout-blocks/contact-information-frontend.js 2.94 kB
build/checkout-blocks/terms-frontend.js 1.21 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout.js 47.1 kB
build/mini-cart-frontend.js 1.76 kB
build/price-filter-frontend.js 12.6 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.54 kB
build/product-categories.js 3.48 kB
build/reviews-frontend.js 7.24 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/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-style-rtl.css 21.7 kB
build/wc-blocks-style.css 21.7 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 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 changed the title Summary Product block: Add support for global style #5521 Summary Product block: Add support for global style Jan 6, 2022
@gigitux gigitux mentioned this pull request Jan 6, 2022
18 tasks
@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
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

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

Just a small typo, everything else LGTM

const { parentClassName } = useInnerBlockLayoutContext();
const { product } = useProductDataContext();
const colorProps = useColorProps( props );
const typograhyProps = useTypographyProps( props );
Copy link
Contributor

Choose a reason for hiding this comment

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

Typo in typography

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks!

Copy link
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

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

LGTM!

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.

None yet

2 participants