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

Add global styles to Product Categories List block in WC core #6906

Merged
merged 1 commit into from
Aug 16, 2022

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Aug 16, 2022

Fixes an issue setting styles to the Product Categories List block.

Related PR: #5133.

Screenshots

Before After
imatge imatge

Testing

User Facing Testing

  1. Add a Product Categories List block in a post or page.
  2. In the sidebar, make some style changes (change the color of the text or link and change typography settings).
  3. Verify the block doesn't crash.
  4. If you are using a block theme, go to Appearance > Site Editor > Styles > Blocks > Product Categories List.
  5. Modify some of the styles there.
  6. Add a Product Categories List block in a post or page again and verify global styles are applied as well.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Enable in WC core global styles (text color, link color, line height, and font size) for the Product Title block.

@Aljullu Aljullu added status: needs review type: enhancement The issue is a request for an enhancement. block: product categories list Issues related to the Product Categories List block. labels Aug 16, 2022
@Aljullu Aljullu self-assigned this Aug 16, 2022
@rubikuserbot rubikuserbot requested review from a team and gigitux and removed request for a team August 16, 2022 06:48
@Aljullu Aljullu added this to the 8.3.0 milestone Aug 16, 2022
@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-6906.zip

@github-actions
Copy link
Contributor

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
product-categories.js wc-settings 🎉

This comment was automatically generated by the ./github/compare-assets action.

@github-actions
Copy link
Contributor

Size Change: -494 B (0%)

Total Size: 865 kB

Filename Size Change
build/all-reviews.js 7.8 kB +3 B (0%)
build/attribute-filter.js 12.9 kB -2 B (0%)
build/cart.js 39.8 kB -3 B (0%)
build/checkout.js 41.5 kB -4 B (0%)
build/featured-category.js 13.2 kB -3 B (0%)
build/featured-product.js 13.5 kB -3 B (0%)
build/mini-cart-contents.js 22.9 kB -4 B (0%)
build/price-filter.js 9.02 kB -1 B (0%)
build/product-best-sellers.js 7.71 kB -1 B (0%)
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 438 B +1 B (0%)
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 303 B +1 B (0%)
build/product-categories.js 2.41 kB -481 B (-17%) 👏
build/product-category.js 8.68 kB -1 B (0%)
build/product-image.js 1.6 kB +1 B (0%)
build/product-new.js 7.71 kB -1 B (0%)
build/product-on-sale.js 8.02 kB -1 B (0%)
build/product-tag.js 8.08 kB -1 B (0%)
build/reviews-by-category.js 11.2 kB +3 B (0%)
build/reviews-by-product.js 12.3 kB +1 B (0%)
build/single-product.js 10 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.32 kB
build/active-filters.js 7.98 kB
build/all-products-frontend.js 18.1 kB
build/all-products.js 33.7 kB
build/attribute-filter-frontend.js 21.9 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.09 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-line-items-frontend.js 430 B
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 347 B
build/cart-blocks/filled-cart-frontend.js 782 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.65 kB
build/cart-blocks/order-summary-discount-frontend.js 2.14 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 456 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.39 kB
build/cart-blocks/order-summary-shipping-frontend.js 426 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 47 kB
build/checkout-blocks/actions-frontend.js 1.42 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 892 B
build/checkout-blocks/contact-information-frontend.js 2.84 kB
build/checkout-blocks/express-payment-frontend.js 5.39 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.08 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.8 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.27 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js 602 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 432 B
build/checkout-blocks/payment-frontend.js 7.7 kB
build/checkout-blocks/shipping-address-frontend.js 1.03 kB
build/checkout-blocks/shipping-methods-frontend.js 4.78 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 49.2 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.37 kB
build/legacy-template.js 2.79 kB
build/mini-cart-component-frontend.js 16.8 kB
build/mini-cart-contents-block/empty-cart-frontend.js 365 B
build/mini-cart-contents-block/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 6.98 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 4.58 kB
build/price-filter-frontend.js 13.1 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 222 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.65 kB
build/product-add-to-cart-frontend.js 6.95 kB
build/product-add-to-cart.js 6.88 kB
build/product-button-frontend.js 1.87 kB
build/product-button.js 1.57 kB
build/product-category-list-frontend.js 879 B
build/product-category-list.js 503 B
build/product-image-frontend.js 1.88 kB
build/product-price-frontend.js 1.9 kB
build/product-price.js 1.51 kB
build/product-rating-frontend.js 1.16 kB
build/product-rating.js 742 B
build/product-sale-badge-frontend.js 1.13 kB
build/product-sale-badge.js 806 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 381 B
build/product-stock-indicator-frontend.js 993 B
build/product-stock-indicator.js 625 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 873 B
build/product-tag-list.js 499 B
build/product-title-frontend.js 1.31 kB
build/product-title.js 922 B
build/product-top-rated.js 7.95 kB
build/products-by-attribute.js 8.63 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.4 kB
build/stock-filter-frontend.js 7.38 kB
build/stock-filter.js 7.29 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 5.04 kB
build/wc-blocks-editor-style.css 5.04 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 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 22.8 kB
build/wc-blocks-style.css 22.7 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 54.5 kB
build/wc-blocks.js 2.63 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.6 kB

compressed-size-action

@tarunvijwani tarunvijwani self-requested a review August 16, 2022 07:03
Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

LGTM!

@Aljullu Aljullu merged commit be442cb into trunk Aug 16, 2022
@Aljullu Aljullu deleted the add/global-styles-product-categories-list-core branch August 16, 2022 07:42
tarunvijwani pushed a commit that referenced this pull request Aug 17, 2022
* Add global styles to Product Categories List block in WC core (#6906)

* add side effect to package (#6904)

* Add _blank to terms link (#6908)

* Only show items if there are multiple packages in the cart (#6899)

* Price Filter Block Design update (#6877)

* make toggle control full width

* add inlineInput attribute

* add inlineInput sidebar setting

* add inlineInput help text

* style the filter button

* style price input

* wip: reset button

* clicking on reset button will reset the price query

* support inline input fields

* price text styling update

* fix reset button font size

* add loading placeholder to all elements

* fix filter button style

* update range slider thumb and track style

* fix loading placeholder for non empty query

* move reset button into FilterSubmitButton component

* try: render placeholder serverside

* update filter button label

* Revert "try: render placeholder serverside"

This reverts commit 98f08ef.

* remove LoadingPlaceholder component

* remove Price: prefix from the current displayed price range

* update labels

* extract reset button as a dedicated component

* update price text section

* update reset button behavior

* avoid breaking filter submit button style for other filter blocks

* rename block to Filter by Price

* fix e2e test

* remove border support

* adjust padding for elments

* rename panel title

* Make the inline option enabled by default and fix frontend rendering

* Make the `Price Range Selector` uppercase

* Show `Reset` button only when a selection has been made

* Revert the `save` change to avoid the 'Block Recovery Prompt'

Co-authored-by: Alba Rincón <[email protected]>

* Release: 8.3.0 (#6897)

* Empty commit for release pull request

* Bump version numbers and add changelog

* Add testing notes

* Add global styles to Product Categories List block in WC core

* add side effect to package

* Update testing instructions

* Empty commit

* Fix linting

* Update zip file with latest changes

* Fix linting

* Update changelog entries

* Bumping version strings to new version.

Co-authored-by: github-actions <[email protected]>
Co-authored-by: Tarun Vijwani <[email protected]>
Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: Nadir Seghir <[email protected]>
Co-authored-by: Saad Tarhi <[email protected]>

* Update version to 8.4.0-dev

* Empty commit for release pull request

* Add change log

* Add testing instructions

* Fix the version number in testing instructions

* Bumping version strings to new version.

Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Thomas Roberts <[email protected]>
Co-authored-by: Tung Du <[email protected]>
Co-authored-by: Alba Rincón <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Tarun Vijwani <[email protected]>
Co-authored-by: Saad Tarhi <[email protected]>
senadir added a commit to senadir/woocommerce-blocks that referenced this pull request Aug 18, 2022
* Add global styles to Product Categories List block in WC core (woocommerce#6906)

* add side effect to package (woocommerce#6904)

* Add _blank to terms link (woocommerce#6908)

* Only show items if there are multiple packages in the cart (woocommerce#6899)

* Price Filter Block Design update (woocommerce#6877)

* make toggle control full width

* add inlineInput attribute

* add inlineInput sidebar setting

* add inlineInput help text

* style the filter button

* style price input

* wip: reset button

* clicking on reset button will reset the price query

* support inline input fields

* price text styling update

* fix reset button font size

* add loading placeholder to all elements

* fix filter button style

* update range slider thumb and track style

* fix loading placeholder for non empty query

* move reset button into FilterSubmitButton component

* try: render placeholder serverside

* update filter button label

* Revert "try: render placeholder serverside"

This reverts commit 98f08ef.

* remove LoadingPlaceholder component

* remove Price: prefix from the current displayed price range

* update labels

* extract reset button as a dedicated component

* update price text section

* update reset button behavior

* avoid breaking filter submit button style for other filter blocks

* rename block to Filter by Price

* fix e2e test

* remove border support

* adjust padding for elments

* rename panel title

* Make the inline option enabled by default and fix frontend rendering

* Make the `Price Range Selector` uppercase

* Show `Reset` button only when a selection has been made

* Revert the `save` change to avoid the 'Block Recovery Prompt'

Co-authored-by: Alba Rincón <[email protected]>

* Release: 8.3.0 (woocommerce#6897)

* Empty commit for release pull request

* Bump version numbers and add changelog

* Add testing notes

* Add global styles to Product Categories List block in WC core

* add side effect to package

* Update testing instructions

* Empty commit

* Fix linting

* Update zip file with latest changes

* Fix linting

* Update changelog entries

* Bumping version strings to new version.

Co-authored-by: github-actions <[email protected]>
Co-authored-by: Tarun Vijwani <[email protected]>
Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: Nadir Seghir <[email protected]>
Co-authored-by: Saad Tarhi <[email protected]>

* Update version to 8.4.0-dev

* Empty commit for release pull request

* Add change log

* Add testing instructions

* Fix the version number in testing instructions

* Bumping version strings to new version.

Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Thomas Roberts <[email protected]>
Co-authored-by: Tung Du <[email protected]>
Co-authored-by: Alba Rincón <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Tarun Vijwani <[email protected]>
Co-authored-by: Saad Tarhi <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: product categories list Issues related to the Product Categories List block. 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