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

Avoid usage of @wordpress/components inside base components #7996

Merged
mikejolley merged 17 commits into from
Jan 11, 2023
Merged

Avoid usage of @wordpress/components inside base components #7996

mikejolley merged 17 commits into from
Jan 11, 2023

Conversation

@mikejolley
Copy link
Member

@mikejolley mikejolley commented Dec 20, 2022

I spent some time investigating the usage of @wordpress/components in our base directory and fixed the violations I found.

  • I found one violation where the Modal component was being imported from @wordpress/components. I swapped this to wordpress-components
  • I found usage of @wordpress/block-editor within the utils directory. To avoid polluting that import, I moved the hasSpacingStyleSupport function check inline where used. This prevents a @wordpress/block-editor dependency whenever utils are used.
  • I added missing type prefixes within the @wordpress/types directory.
  • Given the changes I discovered, I added a README file inside base as a reminder that @wordpress/components should not be used directly within this directory.

There were three violations I am unable to fix, so I have added todos. The following hooks all have a @wordpress/block-editor dependency, and by extension, a dependency on @wordpress/components.

  • useBorderProps
  • useColorProps
  • useSpacingProps

These hooks might need to be refactored to create styles based on props internally instead of relying on the experimental hooks from @wordpress/block-editor because I don't believe they are suitable for the frontend of the store. Or I guess they could be used in editor context only, and the styles saved to the HTML somehow.

cc @woocommerce/woo-fse

Closes #5611

Testing

Confirm successful build and test suite passes.

  • Do not include in the Testing Notes

@mikejolley mikejolley added the skip-changelog PRs that you don't want to appear in the changelog. label Dec 20, 2022
@mikejolley mikejolley self-assigned this Dec 20, 2022
@woocommercebot woocommercebot requested review from a team and tarhi-saad and removed request for a team December 20, 2022 13:43
@github-actions
Copy link
Contributor

github-actions bot commented Dec 20, 2022

The @wordpress/block-editor dependency should never be us...

The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components

woocommerce-blocks/assets/js/base/hooks/use-spacing-props.ts

Lines 14 to 19 in 9be346c

// @todo The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components
export const useSpacingProps = ( attributes: unknown ): WithStyle => {
if ( ! isFeaturePluginBuild() ) {
return {
style: {},
};

🚀 This comment was generated by the automations bot based on a todo comment in 9be346c in #7996. cc @mikejolley

@github-actions
Copy link
Contributor

github-actions bot commented Dec 20, 2022

The @wordpress/block-editor dependency should never be us...

The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components

woocommerce-blocks/assets/js/base/hooks/use-color-props.ts

Lines 18 to 21 in 9be346c

// @todo The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components
export const useColorProps = ( attributes: unknown ): WithStyle & WithClass => {
if ( ! isFeaturePluginBuild() ) {
return {

🚀 This comment was generated by the automations bot based on a todo comment in 9be346c in #7996. cc @mikejolley

@github-actions
Copy link
Contributor

github-actions bot commented Dec 20, 2022

The @wordpress/block-editor dependency should never be us...

The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components

woocommerce-blocks/assets/js/base/hooks/use-border-props.ts

Lines 18 to 21 in 9be346c

// @todo The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components
export const useBorderProps = (
attributes: unknown
): WithStyle & WithClass => {

🚀 This comment was generated by the automations bot based on a todo comment in 9be346c in #7996. cc @mikejolley

@github-actions
Copy link
Contributor

github-actions bot commented Dec 20, 2022

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Dec 20, 2022

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
wc-blocks.js wp-blocks, wp-compose, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives ⚠️
handpicked-products.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-best-sellers.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-category.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-categories.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render ⚠️
product-new.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-on-sale.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-top-rated.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
products-by-attribute.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
featured-product.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-reviews.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives ⚠️
reviews-by-product.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
reviews-by-category.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
product-search.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-tag.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
featured-category.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
price-filter.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
attribute-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
stock-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
active-filters.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
rating-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
cart.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
checkout.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
mini-cart.js react, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-dom, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
mini-cart-contents.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
single-product.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
legacy-template.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-query.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives, wp-url ⚠️
filter-wrapper.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️

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

@github-actions
Copy link
Contributor

github-actions bot commented Dec 20, 2022

TypeScript Errors Report

Files with errors: 443
Total errors: 2101

⚠️ ⚠️ This PR introduces new TS errors on 6 files:

assets/js/atomic/blocks/product-elements/button/supports.ts

assets/js/atomic/blocks/product-elements/image/supports.ts

assets/js/atomic/blocks/product-elements/rating/support.ts

assets/js/atomic/blocks/product-elements/sale-badge/support.ts

assets/js/atomic/blocks/product-elements/title/index.ts

assets/js/base/components/drawer/index.tsx

@kmanijak
Copy link
Contributor

kmanijak commented Dec 20, 2022 •
edited
Loading

Great job @mikejolley!

A heads-up that I'm working on updating @wordpress/components and part of my PR is to get rid of devDependency on @wordpress/components and just unify both: @wordpress/components and wordpress-components into regular dependency.

I'm at the stage where all E2E tests are passing and there's one unit tests failing related to useSlot and SlotFillProvider. But the most important - bundle size decreased by 18%!

I think both PRs will contribute nicely together 🎉

@github-actions
Copy link
Contributor

github-actions bot commented Dec 20, 2022 •
edited
Loading

Size Change: +7.1 kB (+1%)

Total Size: 1.02 MB

Filename Size Change
build/active-filters-frontend.js 7.73 kB -4 B (0%)
build/active-filters-wrapper-frontend.js 6.01 kB +3 B (0%)
build/all-products-frontend.js 11.3 kB +14 B (0%)
build/all-products.js 33.4 kB -10 B (0%)
build/all-reviews.js 7.65 kB -2 B (0%)
build/attribute-filter-frontend.js 22.7 kB -65 B (0%)
build/attribute-filter.js 12.4 kB +3 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB +1 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.61 kB -18 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.08 kB -2 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 716 B -4 B (-1%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.33 kB +3 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB -2 B (0%)
build/cart-blocks/empty-cart-frontend.js 344 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.77 kB -2 B (0%)
build/cart-blocks/order-summary-fee-frontend.js 272 B -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 14.5 kB +2 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 433 B -3 B (-1%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB -2 B (0%)
build/cart-frontend.js 28.1 kB +9 B (0%)
build/cart.js 46.9 kB -66 B (0%)
build/checkout-blocks/actions-frontend.js 1.86 kB +4 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.86 kB +2 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.12 kB +1 B (0%)
build/checkout-blocks/contact-information-frontend.js 2 kB +1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.14 kB +1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB +8 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.93 kB -1 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB +3 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 433 B -3 B (-1%)
build/checkout-blocks/payment-frontend.js 8.33 kB -3 B (0%)
build/checkout-blocks/shipping-address-frontend.js 1.11 kB -1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.55 kB +1 B (0%)
build/checkout-blocks/totals-frontend.js 325 B +1 B (0%)
build/checkout-frontend.js 29.4 kB -2 B (0%)
build/checkout.js 40.9 kB -6 B (0%)
build/featured-category.js 13.1 kB -9 B (0%)
build/featured-product.js 13.3 kB -16 B (0%)
build/filter-wrapper-frontend.js 13.8 kB -8 B (0%)
build/filter-wrapper.js 2.4 kB +2 B (0%)
build/handpicked-products.js 7.21 kB -5 B (0%)
build/legacy-template.js 2.85 kB +1 B (0%)
build/mini-cart-component-frontend.js 27.4 kB +7.43 kB (+37%) 🚨
build/mini-cart-contents-block/empty-cart-frontend.js 364 B -2 B (-1%)
build/mini-cart-contents-block/filled-cart-frontend.js 389 B +1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 2.82 kB +4 B (0%)
build/mini-cart-contents-block/items-frontend.js 236 B -1 B (0%)
build/mini-cart-contents-block/products-table-frontend.js 589 B -2 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 312 B -1 B (0%)
build/mini-cart-contents-block/title-frontend.js 367 B -1 B (0%)
build/mini-cart-contents.js 16.7 kB -25 B (0%)
build/mini-cart-frontend.js 1.88 kB +1 B (0%)
build/price-filter-frontend.js 13.6 kB +3 B (0%)
build/price-filter-wrapper-frontend.js 7.01 kB -3 B (0%)
build/price-filter.js 8.39 kB +1 B (0%)
build/product-add-to-cart-frontend.js 6.71 kB +3 B (0%)
build/product-add-to-cart.js 8.47 kB +2 B (0%)
build/product-best-sellers.js 7.58 kB +1 B (0%)
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 440 B -3 B (-1%)
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 258 B -44 B (-15%) 👏
build/product-button-frontend.js 2.14 kB -12 B (-1%)
build/product-button.js 3.84 kB +2 B (0%)
build/product-categories.js 2.36 kB +3 B (0%)
build/product-category-list-frontend.js 1.14 kB +4 B (0%)
build/product-category-list.js 503 B +1 B (0%)
build/product-category.js 8.57 kB -5 B (0%)
build/product-image-frontend.js 2.14 kB -13 B (-1%)
build/product-image.js 3.94 kB +1 B (0%)
build/product-new.js 7.58 kB +1 B (0%)
build/product-price-frontend.js 2.18 kB +4 B (0%)
build/product-price.js 1.54 kB +2 B (0%)
build/product-query.js 5.91 kB -1 B (0%)
build/product-rating-frontend.js 1.58 kB -14 B (-1%)
build/product-rating.js 920 B +1 B (0%)
build/product-sale-badge-frontend.js 1.37 kB -15 B (-1%)
build/product-sale-badge.js 815 B +1 B (0%)
build/product-search.js 2.62 kB -2 B (0%)
build/product-stock-indicator-frontend.js 1.26 kB +4 B (0%)
build/product-summary-frontend.js 1.53 kB +1 B (0%)
build/product-summary.js 918 B -1 B (0%)
build/product-tag-list-frontend.js 1.14 kB +3 B (0%)
build/product-tag-list.js 496 B -1 B (0%)
build/product-tag.js 8.05 kB -2 B (0%)
build/product-title-frontend.js 1.57 kB -17 B (-1%)
build/product-title.js 3.31 kB +2 B (0%)
build/product-top-rated.js 7.81 kB +2 B (0%)
build/products-by-attribute.js 8.5 kB -1 B (0%)
build/rating-filter-frontend.js 21.2 kB -27 B (0%)
build/rating-filter-wrapper-frontend.js 6.23 kB +4 B (0%)
build/rating-filter.js 7.41 kB -1 B (0%)
build/reviews-by-category.js 11.2 kB -2 B (0%)
build/reviews-by-product.js 12.3 kB -3 B (0%)
build/reviews-frontend.js 6.89 kB -1 B (0%)
build/single-product-frontend.js 17.4 kB +16 B (0%)
build/single-product.js 9.96 kB +1 B (0%)
build/stock-filter-frontend.js 20.8 kB -28 B (0%)
build/stock-filter-wrapper-frontend.js 5.89 kB -1 B (0%)
build/stock-filter.js 8.16 kB -2 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--cde4eab5-frontend.js 0 B -6.86 kB (removed) 🏆
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.69 kB -3 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB +2 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 kB -2 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.83 kB +12 B (0%)
build/wc-blocks.js 2.63 kB -1 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--237ee43d-frontend.js 6.86 kB +6.86 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/active-filters.js 7.31 kB
build/attribute-filter-wrapper-frontend.js 7.69 kB
build/blocks-checkout.js 39.5 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/filled-cart-frontend.js 783 B
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.25 kB
build/checkout-blocks/order-summary-shipping-frontend.js 14.6 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/terms-frontend.js 1.56 kB
build/customer-account.js 3.08 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart.js 4.26 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 226 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-on-sale.js 7.89 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 377 B
build/product-stock-indicator.js 645 B
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--671ca56f-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--checkout-blocks/shipping-methods-frontend.js 9.48 kB
build/wc-blocks-data.js 21.2 kB
build/wc-blocks-editor-style-rtl.css 5.41 kB
build/wc-blocks-editor-style.css 5.41 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 931 B
build/wc-blocks-registry.js 2.92 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.72 kB
build/wc-blocks-style-rtl.css 24.8 kB
build/wc-blocks-style.css 24.8 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 62.7 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

tarhi-saad
tarhi-saad suggested changes Dec 22, 2022
View reviewed changes
Copy link
Contributor

@tarhi-saad tarhi-saad left a comment

Choose a reason for hiding this comment

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

Hello, @mikejolley! 👋 I left some feedback below! We should also look into this PR: #7962! There may be some conflicts!

assets/js/base/hooks/use-spacing-props.ts
// @todo The @wordpress/block-editor dependency should never be used on the frontend of the store due to excessive side and its dependency on @wordpress/components
export const useSpacingProps = ( attributes: unknown ): WithStyle => {
if ( ! isFeaturePluginBuild() || ! hasSpacingStyleSupport() ) {
if ( ! isFeaturePluginBuild() ) {
Copy link
Contributor

@tarhi-saad tarhi-saad Dec 22, 2022

Choose a reason for hiding this comment

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

I believe we should keep checking the spacing style support (i.e., ! hasSpacingStyleSupport()), even if we still need to find a way to avoid using the @wordpress/block-editor dependency!

Suggested change
if ( ! isFeaturePluginBuild() ) {
if ( ! isFeaturePluginBuild() || ! hasSpacingStyleSupport() ) {

Copy link
Member Author

@mikejolley mikejolley Dec 22, 2022

Choose a reason for hiding this comment

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

All this does is check for __experimentalGetSpacingClassesAndStyles, and whats more, including an empty style prop should not have negative consequences even if included right?

Copy link
Contributor

@tarhi-saad tarhi-saad Dec 23, 2022

Choose a reason for hiding this comment

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

@mikejolley, I believe this check was added to fix crash on WP 5.8

Copy link
Member Author

@mikejolley mikejolley Jan 9, 2023

Choose a reason for hiding this comment

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

Thats ok then, we have a minimum version check in place for WP 6.1.

@github-actions
Copy link
Contributor

github-actions bot commented Dec 22, 2022 •
edited
Loading

The release ZIP for this PR is accessible via:

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

⚠️ ⚠️ This PR introduces new TS errors on 6 files:

assets/js/atomic/blocks/product-elements/button/supports.ts

assets/js/atomic/blocks/product-elements/image/supports.ts

assets/js/atomic/blocks/product-elements/rating/support.ts

assets/js/atomic/blocks/product-elements/sale-badge/support.ts

assets/js/atomic/blocks/product-elements/title/index.ts

assets/js/base/components/drawer/index.tsx

comments-aggregator

@ralucaStan ralucaStan added the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Dec 27, 2022
@ralucaStan
Copy link
Contributor

ralucaStan commented Dec 27, 2022

blocked until a decision is reached on pdToLP-fF-p2#comment-170

@kmanijak kmanijak mentioned this pull request Jan 2, 2023
Closed
@github-actions
Copy link
Contributor

github-actions bot commented Jan 4, 2023

This PR has been marked as stale because it has not seen any activity within the past 7 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.

@github-actions github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Jan 4, 2023
@kmanijak
Copy link
Contributor

kmanijak commented Jan 4, 2023

blocked until a decision is reached on pdToLP-fF-p2#comment-170

@mikejolley, @ralucaStan, I think we should progress with this PR. I'm removing "blocked" label 🙌

@kmanijak kmanijak removed the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label Jan 4, 2023
@ralucaStan
Copy link
Contributor

ralucaStan commented Jan 4, 2023

@kmanijak thank you, feel free to also add your review

@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Jan 5, 2023
kmanijak
kmanijak reviewed Jan 5, 2023
View reviewed changes
Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

Thanks @mikejolley for taking care of this! 🎉

I tested Mini Cart which seems to be the only block using Drawer at it looks good.
I left two minor comments 🙌

@mikejolley mikejolley force-pushed the fix/components-imports branch from 0b20fca to f9e11f2 Compare January 9, 2023 13:16
@mikejolley mikejolley requested a review from tarhi-saad January 9, 2023 14:24
tarhi-saad
tarhi-saad approved these changes Jan 11, 2023
View reviewed changes
Copy link
Contributor

@tarhi-saad tarhi-saad left a comment

Choose a reason for hiding this comment

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

Thank you for the changes, @mikejolley! I tested it again. Everything looks good! So, let's 🚢 it! 🙌

mikejolley and others added 15 commits January 11, 2023 16:59
@mikejolley
Move hasSpecingStyleSupport inline to avoid polluting utils with the …
9ef4997 
…block-editor external
@mikejolley
Use local wordpress-block-editor import to avoid the external
746221a
@mikejolley
Add readme to base directory to warn against using editor/components …
7670a88 
…externals
@mikejolley
Check functions exist
a55b56d
@mikejolley
Revert "Check functions exist"
0290c55 
This reverts commit ce95800.
@mikejolley
Revert wordpress-block-editor import
2ce0c0a
@mikejolley
Add todos to the hooks that need refactoring
7d7bdb0
@mikejolley @tarhi-saad
Update assets/js/atomic/blocks/product-elements/button/supports.ts
f4b25e2 
Co-authored-by: Saad Tarhi <[email protected]>
@mikejolley @tarhi-saad
Update assets/js/atomic/blocks/product-elements/image/supports.ts
dcb6a9c 
Co-authored-by: Saad Tarhi <[email protected]>
@mikejolley @tarhi-saad
Update assets/js/atomic/blocks/product-elements/rating/support.ts
42158f3 
Co-authored-by: Saad Tarhi <[email protected]>
@mikejolley @tarhi-saad
Update assets/js/atomic/blocks/product-elements/sale-badge/support.ts
7d227d2 
Co-authored-by: Saad Tarhi <[email protected]>
@mikejolley @tarhi-saad
Update assets/js/atomic/blocks/product-elements/title/index.ts
178c348 
Co-authored-by: Saad Tarhi <[email protected]>
@mikejolley
Reference issue
84b518d
@mikejolley @kmanijak
Update assets/js/base/README.MD
8bb16c1 
Co-authored-by: kmanijak <[email protected]>
@mikejolley
spacing
c5b76dd
@mikejolley mikejolley force-pushed the fix/components-imports branch from cd956ca to c5b76dd Compare January 11, 2023 17:00
@mikejolley mikejolley merged commit b38c6e9 into trunk Jan 11, 2023
@mikejolley mikejolley deleted the fix/components-imports branch January 11, 2023 17:12
@gigitux gigitux added this to the 9.4.0 milestone Jan 16, 2023
@gigitux gigitux added type: refactor The issue/PR is related to refactoring. type: technical debt This issue/PR represents/solves the technical debt of the project. labels Jan 16, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

2 more reviewers

@kmanijak kmanijak kmanijak left review comments

@tarhi-saad tarhi-saad tarhi-saad approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@mikejolley mikejolley

Labels

skip-changelog PRs that you don't want to appear in the changelog. type: refactor The issue/PR is related to refactoring. type: technical debt This issue/PR represents/solves the technical debt of the project.

Projects

None yet

Milestone

9.4.0

Development

Successfully merging this pull request may close these issues.

Block frontend components should use Gutenberg components from wordpress-components instead of @wordpress/components

6 participants

@mikejolley @kmanijak @ralucaStan @tarhi-saad @gigitux