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

Load WC Blocks CSS after editor CSS #3219

Merged
merged 2 commits into from Oct 1, 2020

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Sep 30, 2020

Fixes #3068.

The issue was caused because editor CSS was leaking into the block. It could be fixed ensuring our CSS is loaded after wp-edit-post-css. Notice this fix might no longer be needed if WordPress/gutenberg#20797 gets merged into Gutenberg.

Screenshots

Before:
imatge

After:
imatge

How to test the changes in this Pull Request:

  1. Edit a page with checkout block.
  2. Scroll down to country input.
  3. Verify it has rounded corners and the correct height.

Notice the semi-transparent background is not fixed since it's a different issue (#2487).

Changelog

Fix wrong styling of Checkout's country input in the editor.

@Aljullu Aljullu added status: needs review block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. labels Sep 30, 2020
@Aljullu Aljullu added this to the 3.6.0 milestone Sep 30, 2020
@Aljullu Aljullu requested a review from a team as a code owner September 30, 2020 09:27
@Aljullu Aljullu self-assigned this Sep 30, 2020
@Aljullu Aljullu requested review from nerrad and removed request for a team September 30, 2020 09:27
@github-actions
Copy link
Contributor

github-actions bot commented Sep 30, 2020

Size Change: +1.52 kB (0%)

Total Size: 1.11 MB

Filename Size Change
build/active-filters-frontend.js 8.82 kB +20 B (0%)
build/active-filters.js 8.86 kB +5 B (0%)
build/all-products-frontend.js 31.2 kB +21 B (0%)
build/all-products.js 36 kB +5 B (0%)
build/all-reviews.js 9.79 kB +1 B
build/atomic-block-components/image-frontend.js 1.71 kB +1 B
build/atomic-block-components/image.js 1.15 kB +1 B
build/atomic-block-components/price.js 2.32 kB +2 B (0%)
build/atomic-block-components/title-frontend.js 1.23 kB +1 B
build/atomic-block-components/title.js 1.06 kB +1 B
build/attribute-filter-frontend.js 18.1 kB +19 B (0%)
build/attribute-filter.js 12.4 kB +6 B (0%)
build/cart-frontend.js 69.8 kB +243 B (0%)
build/cart.js 38.4 kB +213 B (0%)
build/checkout-frontend.js 85.1 kB +389 B (0%)
build/checkout.js 41.7 kB +419 B (1%)
build/featured-category.js 7.73 kB +6 B (0%)
build/featured-product.js 9.98 kB +6 B (0%)
build/handpicked-products.js 7.37 kB +6 B (0%)
build/price-filter-frontend.js 14.8 kB +17 B (0%)
build/price-filter.js 10.3 kB +6 B (0%)
build/product-best-sellers.js 7.45 kB +5 B (0%)
build/product-category.js 8.39 kB +6 B (0%)
build/product-new.js 7.61 kB +6 B (0%)
build/product-on-sale.js 8 kB +8 B (0%)
build/product-search.js 3.57 kB +6 B (0%)
build/product-tag.js 6.53 kB +6 B (0%)
build/product-top-rated.js 7.58 kB +6 B (0%)
build/products-by-attribute.js 8.33 kB +10 B (0%)
build/reviews-by-category.js 11.8 kB +3 B (0%)
build/reviews-by-product.js 13.4 kB +6 B (0%)
build/reviews-frontend.js 9.4 kB +19 B (0%)
build/single-product-frontend.js 33.8 kB +21 B (0%)
build/single-product.js 10.1 kB +6 B (0%)
build/style-rtl.css 18 kB +12 B (0%)
build/style.css 18 kB +12 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/atomic-block-components/add-to-cart-frontend.js 8.89 kB 0 B
build/atomic-block-components/add-to-cart.js 7.46 kB 0 B
build/atomic-block-components/add-to-cart~atomic-block-components/button.js 3.18 kB 0 B
build/atomic-block-components/add-to-cart~atomic-block-components/image~atomic-block-components/title.js 335 B 0 B
build/atomic-block-components/button-frontend.js 2.02 kB 0 B
build/atomic-block-components/button.js 839 B 0 B
build/atomic-block-components/category-list-frontend.js 469 B 0 B
build/atomic-block-components/category-list.js 478 B 0 B
build/atomic-block-components/price-frontend.js 2.29 kB 0 B
build/atomic-block-components/rating-frontend.js 524 B 0 B
build/atomic-block-components/rating.js 527 B 0 B
build/atomic-block-components/sale-badge-frontend.js 862 B 0 B
build/atomic-block-components/sale-badge.js 866 B 0 B
build/atomic-block-components/sku-frontend.js 386 B 0 B
build/atomic-block-components/sku.js 394 B 0 B
build/atomic-block-components/stock-indicator-frontend.js 568 B 0 B
build/atomic-block-components/stock-indicator.js 573 B 0 B
build/atomic-block-components/summary-frontend.js 918 B 0 B
build/atomic-block-components/summary.js 927 B 0 B
build/atomic-block-components/tag-list-frontend.js 467 B 0 B
build/atomic-block-components/tag-list.js 474 B 0 B
build/blocks.js 3.54 kB 0 B
build/editor-rtl.css 13.9 kB 0 B
build/editor.css 13.9 kB 0 B
build/product-categories.js 3.23 kB 0 B
build/vendors-style-rtl.css 1.03 kB 0 B
build/vendors-style.css 1.03 kB 0 B
build/vendors.js 417 kB 0 B
build/vendors~atomic-block-components/price-frontend.js 5.65 kB 0 B
build/wc-blocks-data.js 7.1 kB 0 B
build/wc-blocks-middleware.js 931 B 0 B
build/wc-blocks-registry.js 2.32 kB 0 B
build/wc-payment-method-bacs.js 790 B 0 B
build/wc-payment-method-cheque.js 787 B 0 B
build/wc-payment-method-cod.js 879 B 0 B
build/wc-payment-method-paypal.js 831 B 0 B
build/wc-payment-method-stripe.js 11.9 kB 0 B
build/wc-settings.js 2.33 kB 0 B
build/wc-shared-context.js 1.53 kB 0 B
build/wc-shared-hocs.js 1.66 kB 0 B

compressed-size-action

Copy link
Contributor

@nerrad nerrad left a comment

Choose a reason for hiding this comment

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

Nice solution here Albert 👍 (and great sleuthing).

I confirmed the select is fixed as described. I also reviewed our other blocks and ensured interfaces weren't affected by this change.

Let's 🚢 🎉

src/Assets.php Outdated
Comment on lines 39 to 41
// In the editor, we want our stylesheets to load after editor CSS (see #3068).
// This might be no longer necessary when https://github.com/WordPress/gutenberg/issues/20797
// is merged.
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we create an issue for the backlog for removing this extra code when the fix in Gutenberg lands and we can safely remove because the minimum version of WordPress we support has the fix (if so, you could convert this comment to a todo)?

@github-actions
Copy link
Contributor

github-actions bot commented Oct 1, 2020

Remove fix to load our stylesheets after editor CSS. See ...

Remove fix to load our stylesheets after editor CSS. See #3068 for the rationale of this fix. It should be no longer github.com/WordPress/gutenberg/issues/20797).


https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/e07de12ed23db91cd977be4423132f3151573d87/src/Assets.php#L39-L51

🚀 This comment was generated by the automations bot based on a todo comment in e07de12 in #3219. cc @Aljullu

@Aljullu Aljullu merged commit f351faa into trunk Oct 1, 2020
@Aljullu Aljullu deleted the fix/3068-load-blocks-css-after-editor-css branch October 1, 2020 09:11
@Aljullu Aljullu added the type: bug The issue/PR concerns a confirmed bug. label Oct 12, 2020
@Aljullu Aljullu mentioned this pull request Oct 12, 2020
19 tasks
@chvillanuevap
Copy link

Could this also be causing the Full Site Editing page in Gutenberg to be completely blank as reported in WordPress/gutenberg#27938? I'm using WooCommerce 4.8.0. I don't have the WooCommerce Blocks plugin installed.

@Aljullu
Copy link
Contributor Author

Aljullu commented Jan 4, 2021

Hi @chvillanuevap, thanks for raising this! I created a new issue so we can investigate it: #3626.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Checkout Country input is not wysiwyg styling in editor
4 participants