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

Category List block: add support for global style #5516

Merged
merged 8 commits into from
Feb 14, 2022

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented Jan 4, 2022

This PR is blocked by #5515

This PR adds support for global style for the component Product Title.

Now, the user can edit the style for:

  • font-size
  • link color
  • text color

Fixes #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 Product Title Block) to a post.
  4. Get the focus on Category List 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 Category List 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

Category List block: add support for global style.

@gigitux gigitux added 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 4, 2022
@gigitux gigitux self-assigned this Jan 4, 2022
@rubikuserbot rubikuserbot requested review from a team and tjcafferkey and removed request for a team January 4, 2022 16:05
@gigitux gigitux added the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Jan 4, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Jan 4, 2022

Size Change: +1.07 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 +5 B (0%)
build/all-products.js 35 kB +241 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-frontend.js 810 B +352 B (+77%) 🆘
build/atomic-block-components/category-list.js 501 B +43 B (+9%) 🔍
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 873 B -1 B (0%)
build/atomic-block-components/summary.js 874 B +1 B (0%)
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/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.5 kB -7 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 +4 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 -9 B (0%)
build/checkout.js 47.1 kB -10 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 +6 B (0%)
build/single-product.js 10.5 kB +68 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/catego--1c13b12d.js 238 B +238 B (new file) 🆕
build/atomic-block-components/category-list--atomic-block-components/title.js 451 B +451 B (new file) 🆕
ℹ️ View Unchanged
Filename Size
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/cart-blocks/line-items-frontend.js 5.48 kB
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/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 mentioned this pull request Jan 10, 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
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.

Tested and this is working great on my end 🎉

@@ -39,10 +47,12 @@ const Block = ( { className }: Props ): JSX.Element | null => {
className={ classnames(
className,
'wc-block-components-product-category-list',
colorProps.className,
Copy link
Member

Choose a reason for hiding this comment

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

Even colorProps.className can be undefined, we don't need to check for its value because undefined is an expected value and will be skipped by classnames().

@github-actions github-actions bot modified the milestone: 7.0.0 Feb 13, 2022
@gigitux gigitux merged commit ac3e8f7 into trunk Feb 14, 2022
@gigitux gigitux deleted the add/4965-category-list branch February 14, 2022 10:29
@sunyatasattva sunyatasattva added the type: enhancement The issue is a request for an enhancement. label Feb 14, 2022
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: 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.

Add global styles to all WC Blocks
3 participants