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

Use the @wordpress/components instead of wordpress-components while in editor #8432

Merged
merged 2 commits into from
Feb 17, 2023

Conversation

kmanijak
Copy link
Contributor

@kmanijak kmanijak commented Feb 15, 2023

There are two versions of a library used in the repo:

  • @wordpress-components - dedicated to use in the editor
  • wordpress-components - dedicated to use in the frontend. However the library itself is not intended to be used in the frontend, hence the movement to remove such dependency.

This PR is a step towards that goal. (Issue: #8452)

The editor blocks:

  • assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
  • assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx
    were using Placeholder and Button from wordpress-components instead of @wordpress/components. It's about NoExpressPaymentMethodsPlaceholder component, which means it was used only in the state when merchant hasn't had any express payment methods configured.

Question:

  • In theme TT3 the button displays with a greenish text on a blue background which is unreadable. This is due the is-primary styles being overwritten by:

image

I don't think that's expected and I see other buttons have explicit styles (e.g. white text on a black background). That's not the part of this PR to fix this, but if any of the reviewers is able to confirm the expected result I can apply the fix or at least create an issue.

Screenshots

There should be no visual regression of the blocks in editor.

Editor

Case Before After
Cart Express Payment image image
Checkout Express Payment image image

Testing

User Facing Testing

Prerequisites:

  • Make sure you don't have any "Express Payment Methods".
  1. Create a new post
  2. Add Cart block
  3. Still in Editor - find an "Express Checkout" section
    Expected:
  • Icon, "Express Checkout" heading and Button looks like on a screenshots attached
  • Click button - you should be redirected to wp-admin/admin.php?page=wc-settings&tab=checkout page.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Skipping Changelog on purpose

@woocommercebot woocommercebot requested review from a team and sunyatasattva and removed request for a team February 15, 2023 09:29
@kmanijak kmanijak added block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. labels Feb 15, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Feb 15, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8432.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: 495
  • Total errors: 2341

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Feb 15, 2023

Size Change: +20 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/checkout.js 43.9 kB +19 B (0%)
build/mini-cart-contents.js 17.1 kB +2 B (0%)
build/mini-cart.js 4.3 kB -1 B (0%)
build/rating-filter.js 7.4 kB +1 B (0%)
build/single-product.js 9.98 kB -1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.99 kB
build/active-filters.js 7.32 kB
build/add-to-cart-form.js 1.48 kB
build/all-products-frontend.js 11.7 kB
build/all-products.js 34.6 kB
build/all-reviews.js 7.66 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-wrapper-frontend.js 7.66 kB
build/attribute-filter.js 12.3 kB
build/blocks-checkout.js 41.2 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-cross-sells-products-frontend.js 9.7 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 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.36 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 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 654 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 14.8 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/cart-frontend.js 28.9 kB
build/cart.js 47.3 kB
build/catalog-sorting.js 1.7 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.18 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.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.78 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.24 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.45 kB
build/checkout-blocks/pickup-options-frontend.js 2.8 kB
build/checkout-blocks/shipping-address-frontend.js 1.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.27 kB
build/checkout-blocks/shipping-methods-frontend.js 4.78 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 30.4 kB
build/customer-account.js 3.12 kB
build/featured-category.js 13.1 kB
build/featured-product.js 13.4 kB
build/filter-wrapper-frontend.js 14 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.24 kB
build/legacy-template.js 2.85 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.86 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 591 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/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.99 kB
build/price-filter.js 8.39 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 253 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.73 kB
build/product-add-to-cart.js 8.63 kB
build/product-best-sellers.js 7.6 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 496 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 258 B
build/product-button-frontend.js 2.19 kB
build/product-button.js 3.99 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.19 kB
build/product-category-list.js 503 B
build/product-category.js 8.58 kB
build/product-image-frontend.js 2.2 kB
build/product-image.js 4.09 kB
build/product-new.js 7.58 kB
build/product-on-sale.js 7.91 kB
build/product-price-frontend.js 2.29 kB
build/product-price.js 1.58 kB
build/product-query.js 6.08 kB
build/product-rating-frontend.js 1.62 kB
build/product-rating.js 919 B
build/product-results-count.js 1.65 kB
build/product-sale-badge-frontend.js 1.43 kB
build/product-sale-badge.js 817 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 378 B
build/product-stock-indicator-frontend.js 1.32 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.58 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 1.18 kB
build/product-tag-list.js 497 B
build/product-tag.js 8.06 kB
build/product-title-frontend.js 1.62 kB
build/product-title.js 3.46 kB
build/product-top-rated.js 7.83 kB
build/products-by-attribute.js 8.52 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.19 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.14 kB
build/single-product-frontend.js 17.8 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.85 kB
build/stock-filter.js 8.13 kB
build/store-notices.js 1.65 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.4 kB
build/wc-blocks-editor-style-rtl.css 5.68 kB
build/wc-blocks-editor-style.css 5.68 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 26.7 kB
build/wc-blocks-style.css 26.7 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 64.4 kB
build/wc-blocks.js 2.65 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
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

Works for me and change makes sense 👍🏻

@github-actions github-actions bot added this to the 9.7.0 milestone Feb 17, 2023
@kmanijak
Copy link
Contributor Author

E2E tests failing seem unrelated. Bypassing and merging.

@kmanijak kmanijak merged commit 73e8437 into trunk Feb 17, 2023
@kmanijak kmanijak deleted the wordpress-components-in-editor branch February 17, 2023 14:09
Aljullu pushed a commit that referenced this pull request Feb 17, 2023
@dinhtungdu dinhtungdu added type: enhancement The issue is a request for an enhancement. skip-changelog PRs that you don't want to appear in the changelog. labels Feb 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. skip-changelog PRs that you don't want to appear in the changelog. 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