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

Fix: color setting for Catalog Sorting #8372

Merged
merged 3 commits into from
Feb 3, 2023
Merged

Conversation

dinhtungdu
Copy link
Member

This is a follow up of #8122

This PR fixes the issue that the color setting is applied in the editor and on the front end. This also remove the unused style for the Catalog Sorting select box.

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. Go to the Site Editor.
  2. Edit the Product Catalog template
  3. Add the Catalog Sorting block.
  4. Change the color and font size of the block.
  5. See the style applied in the Site Editor.
  6. Save the template. Go to the Shop page on the front end. See the style applied there too.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@dinhtungdu dinhtungdu self-assigned this Feb 2, 2023
@woocommercebot woocommercebot requested review from a team and sunyatasattva and removed request for a team February 2, 2023 11:17
@dinhtungdu dinhtungdu added status: needs review type: bug The issue/PR concerns a confirmed bug. skip-changelog PRs that you don't want to appear in the changelog. focus: FSE Work related to prepare WooCommerce for FSE. focus: template Related to API powering block template functionality in the Site Editor labels Feb 2, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Feb 2, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

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

TypeScript Errors Report

  • Files with errors: 503
  • Total errors: 2343

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Feb 2, 2023

Size Change: +795 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/active-filters.js 7.29 kB +2 B (0%)
build/all-products-frontend.js 11.7 kB +3 B (0%)
build/all-products.js 33.7 kB +91 B (0%)
build/attribute-filter.js 12.3 kB -1 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.69 kB +54 B (+1%)
build/cart-frontend.js 28.6 kB -1 B (0%)
build/cart.js 47.7 kB +43 B (0%)
build/catalog-sorting.js 1.7 kB +9 B (+1%)
build/checkout.js 43.4 kB -6 B (0%)
build/featured-category.js 13.1 kB -4 B (0%)
build/featured-product.js 13.4 kB -4 B (0%)
build/filter-wrapper-frontend.js 14 kB -5 B (0%)
build/handpicked-products.js 7.24 kB -2 B (0%)
build/legacy-template.js 2.87 kB +1 B (0%)
build/mini-cart-contents.js 17 kB -1 B (0%)
build/price-filter-frontend.js 13.9 kB +10 B (0%)
build/price-filter-wrapper-frontend.js 6.99 kB +7 B (0%)
build/price-filter.js 8.35 kB +4 B (0%)
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 228 B +1 B (0%)
build/product-best-sellers.js 7.59 kB -1 B (0%)
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 494 B +55 B (+13%) ⚠️
build/product-button-frontend.js 2.19 kB +49 B (+2%)
build/product-button.js 3.99 kB -2 B (0%)
build/product-category-list-frontend.js 1.19 kB +51 B (+4%)
build/product-category.js 8.58 kB -1 B (0%)
build/product-image-frontend.js 2.19 kB +49 B (+2%)
build/product-image.js 4.09 kB +1 B (0%)
build/product-new.js 7.58 kB +1 B (0%)
build/product-price-frontend.js 2.29 kB +51 B (+2%)
build/product-query.js 5.9 kB -2 B (0%)
build/product-rating-frontend.js 1.62 kB +48 B (+3%)
build/product-sale-badge-frontend.js 1.42 kB +49 B (+4%)
build/product-sale-badge.js 816 B +3 B (0%)
build/product-stock-indicator-frontend.js 1.32 kB +57 B (+5%) 🔍
build/product-summary-frontend.js 1.58 kB +49 B (+3%)
build/product-tag-list-frontend.js 1.18 kB +52 B (+5%) 🔍
build/product-tag.js 8.07 kB +1 B (0%)
build/product-title-frontend.js 1.62 kB +52 B (+3%)
build/product-title.js 3.46 kB -2 B (0%)
build/product-top-rated.js 7.82 kB +1 B (0%)
build/products-by-attribute.js 8.52 kB -1 B (0%)
build/rating-filter-frontend.js 21.4 kB -3 B (0%)
build/rating-filter-wrapper-frontend.js 6.19 kB -1 B (0%)
build/reviews-by-category.js 11.2 kB -4 B (0%)
build/reviews-by-product.js 12.3 kB -2 B (0%)
build/single-product-frontend.js 17.9 kB +7 B (0%)
build/single-product.js 9.97 kB +5 B (0%)
build/stock-filter-frontend.js 21.1 kB +4 B (0%)
build/stock-filter-wrapper-frontend.js 5.85 kB +4 B (0%)
build/stock-filter.js 8.09 kB +7 B (0%)
build/store-notices.js 1.65 kB +1 B (0%)
build/wc-blocks-style-rtl.css 25.7 kB +7 B (0%)
build/wc-blocks-style.css 25.7 kB +7 B (0%)
build/wc-blocks-vendors.js 64.3 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 6 kB
build/all-reviews.js 7.67 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-wrapper-frontend.js 7.66 kB
build/blocks-checkout.js 41 kB
build/breadcrumbs.js 2.04 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.08 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.37 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.25 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 656 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 456 B
build/cart-blocks/order-summary-shipping-frontend.js 14.9 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.92 kB
build/checkout-blocks/billing-address-frontend.js 1.16 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.3 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.25 kB
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.33 kB
build/checkout-blocks/pickup-options-frontend.js 2.81 kB
build/checkout-blocks/shipping-address-frontend.js 1.12 kB
build/checkout-blocks/shipping-method-frontend.js 2.27 kB
build/checkout-blocks/shipping-methods-frontend.js 4.83 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 30.2 kB
build/customer-account.js 3.08 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-component-frontend.js 27.9 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.82 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 313 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-frontend.js 2 kB
build/mini-cart.js 4.29 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.71 kB
build/product-add-to-cart.js 8.61 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 258 B
build/product-categories.js 2.36 kB
build/product-category-list.js 503 B
build/product-on-sale.js 7.91 kB
build/product-price.js 1.58 kB
build/product-rating.js 920 B
build/product-results-count.js 1.66 kB
build/product-search.js 2.6 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 378 B
build/product-stock-indicator.js 646 B
build/product-summary.js 920 B
build/product-tag-list.js 497 B
build/rating-filter.js 7.37 kB
build/reviews-frontend.js 7.14 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 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.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 9.48 kB
build/wc-blocks-data.js 21.9 kB
build/wc-blocks-editor-style-rtl.css 5.47 kB
build/wc-blocks-editor-style.css 5.47 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.16 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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
build/wc-shipping-method-pickup-location.js 29.7 kB
build/wp-directives-runtime.js 2.4 kB
build/wp-directives-vendors.js 7.89 kB

compressed-size-action

Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

Approving because it fixes the color issue. However, it looks like WC core adds some styles to TT3 which override the font-size value:

Editor Frontend (TT3)
imatge imatge

We should either increase the specific of our CSS rules or investigate how to reduce the specificity in the selector from WC core. In any case, it can be done in a follow-up if you prefer.

@dinhtungdu
Copy link
Member Author

@Aljullu Given that this PR is small, I update the selector to fix the font size overridden by theme issue, can you please take another look at this PR?

@@ -3,8 +3,8 @@
float: none;
}

select {
select.orderby {
Copy link
Contributor

Choose a reason for hiding this comment

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

For some reason, the <select> in the editor doesn't have the orderby class for me. So the styles are not applied:

imatge

In the frontend, everything works well. Can you reproduce?

Copy link
Member Author

@dinhtungdu dinhtungdu Feb 3, 2023

Choose a reason for hiding this comment

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

@Aljullu Ah, I forgot testing in the editor. I fixed this issue in 32b5ffc.

@dinhtungdu dinhtungdu requested a review from Aljullu February 3, 2023 10:40
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

LGTM :shipit:

@dinhtungdu dinhtungdu merged commit 436956b into trunk Feb 3, 2023
@dinhtungdu dinhtungdu deleted the fix/catalog-sorting-color branch February 3, 2023 17:47
tarhi-saad added a commit that referenced this pull request Feb 17, 2023
The #8372 PR introduced a regression for the #8251 PR

To avoid confusion we are removing it from the testing notes
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: FSE Work related to prepare WooCommerce for FSE. focus: template Related to API powering block template functionality in the Site Editor skip-changelog PRs that you don't want to appear in the changelog. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants