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

Fix sort-select frontend CSS #5973

Closed
wants to merge 1 commit into from
Closed

Conversation

tarunvijwani
Copy link

This PR fixes the CSS for the <select> element of the All Products block to provide consistent style across the frontend and page editor.

Fixes #2506

Screenshots

Before After
image image

Manual Testing

How to test the changes in this Pull Request:

  1. Check out this branch and compile the changes
  2. Create a page with the All Products block.
  3. Publish the page.
  4. The frontend <select> dropdown style should match the page editor's <select> dropdown style.

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  • Same as above,

Changelog

Fixed sort-select frontend CSS

@tarunvijwani tarunvijwani added block: all products Issues related to the all products block. focus: global styles Issues that involve styles/css/layout structure. labels Mar 1, 2022
@tarunvijwani tarunvijwani self-assigned this Mar 1, 2022
@rubikuserbot rubikuserbot requested review from a team and mikejolley and removed request for a team March 1, 2022 16:45
@github-actions
Copy link
Contributor

github-actions bot commented Mar 1, 2022

Size Change: +398 B (0%)

Total Size: 864 kB

Filename Size Change
build/wc-blocks-style-rtl.css 22.4 kB +200 B (+1%)
build/wc-blocks-style.css 22.4 kB +198 B (+1%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.27 kB
build/active-filters.js 6.94 kB
build/all-products-frontend.js 18.6 kB
build/all-products.js 33.9 kB
build/all-reviews.js 8.03 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/catego--90468e1a.js 223 B
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.65 kB
build/atomic-block-components/add-to-cart-frontend.js 7.01 kB
build/atomic-block-components/add-to-cart.js 7.49 kB
build/atomic-block-components/button--atomic-block-components/category-list--atomic-block-components/imag--f11cdc7a.js 498 B
build/atomic-block-components/button-frontend.js 2.08 kB
build/atomic-block-components/button.js 2.3 kB
build/atomic-block-components/category-list-frontend.js 920 B
build/atomic-block-components/category-list.js 501 B
build/atomic-block-components/image-frontend.js 1.86 kB
build/atomic-block-components/image.js 1.09 kB
build/atomic-block-components/price-frontend.js 1.93 kB
build/atomic-block-components/price.js 1.51 kB
build/atomic-block-components/rating-frontend.js 1.13 kB
build/atomic-block-components/rating.js 718 B
build/atomic-block-components/sale-badge-frontend.js 1.09 kB
build/atomic-block-components/sale-badge.js 683 B
build/atomic-block-components/sku-frontend.js 385 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/stock-indicator-frontend.js 1.03 kB
build/atomic-block-components/stock-indicator.js 624 B
build/atomic-block-components/summary-frontend.js 1.34 kB
build/atomic-block-components/summary.js 923 B
build/atomic-block-components/tag-list-frontend.js 921 B
build/atomic-block-components/tag-list.js 499 B
build/atomic-block-components/title-frontend.js 1.31 kB
build/atomic-block-components/title.js 932 B
build/attribute-filter-frontend.js 16.8 kB
build/attribute-filter.js 13 kB
build/blocks-checkout.js 17.2 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 347 B
build/cart-blocks/express-payment-frontend.js 5.18 kB
build/cart-blocks/filled-cart-frontend.js 767 B
build/cart-blocks/items-frontend.js 299 B
build/cart-blocks/line-items-frontend.js 5.5 kB
build/cart-blocks/order-summary-frontend.js 8.88 kB
build/cart-blocks/totals-frontend.js 320 B
build/cart-frontend.js 45.2 kB
build/cart.js 43.5 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.13 kB
build/checkout-blocks/billing-address-frontend.js 891 B
build/checkout-blocks/contact-information-frontend.js 2.85 kB
build/checkout-blocks/express-payment-frontend.js 5.48 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.3 kB
build/checkout-blocks/payment-frontend.js 7.77 kB
build/checkout-blocks/shipping-address-frontend.js 997 B
build/checkout-blocks/shipping-methods-frontend.js 4.73 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout-frontend.js 47.4 kB
build/checkout.js 44.7 kB
build/featured-category.js 8.62 kB
build/featured-product.js 9.73 kB
build/handpicked-products.js 7.1 kB
build/legacy-template.js 2.18 kB
build/mini-cart-component-frontend.js 16 kB
build/mini-cart-contents-block/empty-cart-frontend.js 363 B
build/mini-cart-contents-block/filled-cart-frontend.js 222 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 5.33 kB
build/mini-cart-contents-block/footer-frontend.js 6.27 kB
build/mini-cart-contents-block/items-frontend.js 206 B
build/mini-cart-contents-block/products-table-frontend.js 5.33 kB
build/mini-cart-contents-block/shopping-button-frontend.js 260 B
build/mini-cart-contents-block/title-frontend.js 348 B
build/mini-cart-contents.js 24.2 kB
build/mini-cart-frontend.js 1.71 kB
build/mini-cart.js 6.39 kB
build/price-filter-frontend.js 12.5 kB
build/price-filter.js 8.47 kB
build/price-format.js 1.19 kB
build/product-best-sellers.js 7.37 kB
build/product-categories.js 3.17 kB
build/product-category.js 8.49 kB
build/product-new.js 7.67 kB
build/product-on-sale.js 7.99 kB
build/product-search.js 2.19 kB
build/product-tag.js 7.81 kB
build/product-top-rated.js 7.9 kB
build/products-by-attribute.js 8.38 kB
build/reviews-by-category.js 11.4 kB
build/reviews-by-product.js 12.6 kB
build/reviews-frontend.js 7.34 kB
build/single-product-frontend.js 22 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 6.5 kB
build/stock-filter.js 6.56 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--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--194c50bf-frontend.js 5.26 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary--mini-cart-contents-block/products-table-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/vendors--mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 7.72 kB
build/wc-blocks-data.js 9.78 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 953 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-vendors.js 69.4 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

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.

Thanks for working on this @tarunvijwani! Confirming the select looks the same between the editor and the frontend with this PR! However, I'm not 100% sure that we should be adding these new CSS declarations.

The issue seems to be that some wp-admin styles are leaking into the block. That's true in the page/post editor in desktop view, but if you switch to tablet or mobile preview, that no longer happens. The issue can't be reproduced either in the Site Editor. That's because Site editor, tablet and mobile previews have the editor iframed (so styles from wp-admin don't leak into the editor).

The effort to completely iframe the page/post editor can be followed here: WordPress/gutenberg#20797.

So, thinking about it a bit more, I consider we shouldn't fix #2506 on our end. Instead, we should wait for the editor to be iframed everywhere (WordPress/gutenberg#20797), that will automatically solve our issue without us needing to change the CSS in our end.

Thoughts @tarunvijwani? Sorry for not keeping that issue up to date. 🙏

@tarunvijwani
Copy link
Author

@Aljullu No worries! Thank you for sharing the details! I agree with you that we should wait for #20797 to get resolved and revisit #2506 to check if the issue still persists.

@github-actions
Copy link
Contributor

github-actions bot commented May 4, 2022

This PR has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label - otherwise it will automatically be closed after 10 days.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label May 4, 2022
@github-actions github-actions bot closed this May 15, 2022
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. focus: global styles Issues that involve styles/css/layout structure. status: stale Stale issues and PRs have had no updates for 60 days.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

All Products: <select> looks different in the editor vs frontend
2 participants