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

Simplify unused Add to Cart button form placeholder for grouped product #8438

Merged
merged 4 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)

There's an Add to Cart block which has the control "Display Form Elements". Depends on the product type, it displays the form, e.g. allows to change the quantity for simple product or choose variant for variable products. If the prodict type is not supported, it fallbacks to default behaviour, e.g. displays a link to product for grouped products.

Based on the logic here, which is used in the block as showFormElements, the grouped product type is not supported by the Add to Cart block. Instead it fallbacks to regular behaviour and a "View Products" link is rendered instead.

Having said that, it's safe to simplify the GroupedProductForm, which serves only a developer placeholder purpose for now and won't be displayed in the browser (neither editor nor frontend).

It's especially valid, since it allows to remove the usage of Placeholder component imported from wordpress-components.

Screenshots

There's no visual regression to the block

Editor - Grouped product is the middle one on each image. Other products are included for comparison

Case Before After
Display form elements: disabled image image
Display form elements: enabled image image

Frontend - Grouped product is the middle one on each image. Other products are included for comparison

Case Before After
Display form elements: disabled image image
Display form elements: enabled image image

Testing

Automated Tests

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

User Facing Testing

Prerequisites:

  • make sure you have at least one grouped product in a store
  1. Go to Editor

  2. Edit the Product Catalog template

  3. Add All Products block

  4. Enter the "edit" mode of All Products block by clicking a pencil button

  5. Remove "Add to Cart Button" block

  6. Add "Add to Cart" block - THESE ARE TWO SEPARATE BLOCKS. IT'S ABOUT "ADD TO CART" BLOCK!

  7. By default the "Display form elements" toggle should be disabled
    Expected: Button looks like on a pictures above

  8. Save the changes and check the frontend as well

  9. Enter the edit mode of "Add to Cart" button (there's a bug that block cannot be clicked. To enter the edit mode, please open a "list view" of blocks and choose "Add to Cart" from there)

  10. Enable "Display form elements" toggle
    Expected: Button looks like on a pictures above (while it changes to form for other types of products: simple, variable)

  11. Save the changes and check the frontend as well


  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog skipped on purpose

@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-8438.zip

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
reviews-frontend.js react, wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products-frontend.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-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
attribute-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, 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 ⚠️
cart-frontend.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-compose, wp-data, wp-deprecated, wp-dom, 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-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, 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 ⚠️
filter-wrapper-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-block-editor, wp-blocks, 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 ⚠️
mini-cart-frontend.js wc-settings, wp-polyfill ⚠️
price-filter-frontend.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, 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 ⚠️
single-product-frontend.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-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
stock-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, 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 ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, 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 ⚠️

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

TypeScript Errors Report

  • Files with errors: 496
  • Total errors: 2342

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Feb 15, 2023

Size Change: -438 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/all-products-frontend.js 11.7 kB -2 B (0%)
build/all-products.js 34.6 kB -23 B (0%)
build/attribute-filter-frontend.js 22.9 kB -3 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.67 kB -26 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB -1 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 719 B -1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB +4 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.06 kB -1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB +1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB +1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 14.8 kB -3 B (0%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB +1 B (0%)
build/cart.js 47.3 kB -15 B (0%)
build/checkout-blocks/actions-frontend.js 1.85 kB +1 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.91 kB -4 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.18 kB -2 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.05 kB -2 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.13 kB +1 B (0%)
build/checkout-blocks/fields-frontend.js 345 B +1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB -2 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB -1 B (0%)
build/checkout-blocks/payment-frontend.js 8.45 kB -1 B (0%)
build/checkout-blocks/shipping-address-frontend.js 1.14 kB -4 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.27 kB +1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.77 kB -4 B (0%)
build/checkout-frontend.js 30.4 kB -7 B (0%)
build/checkout.js 43.9 kB +5 B (0%)
build/filter-wrapper.js 2.39 kB -1 B (0%)
build/mini-cart-component-frontend.js 27.9 kB -13 B (0%)
build/mini-cart-contents-block/footer-frontend.js 2.86 kB -1 B (0%)
build/mini-cart-contents.js 17.1 kB +3 B (0%)
build/mini-cart.js 4.3 kB -1 B (0%)
build/product-add-to-cart-frontend.js 6.71 kB -22 B (0%)
build/product-add-to-cart.js 8.61 kB -24 B (0%)
build/product-search.js 2.63 kB -2 B (0%)
build/product-stock-indicator-frontend.js 1.32 kB -1 B (0%)
build/product-summary-frontend.js 1.58 kB -1 B (0%)
build/products-by-attribute.js 8.53 kB +1 B (0%)
build/rating-filter-frontend.js 21.4 kB -3 B (0%)
build/rating-filter.js 7.4 kB +1 B (0%)
build/single-product-frontend.js 17.8 kB -2 B (0%)
build/stock-filter-frontend.js 21.1 kB +3 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB +3 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB -280 B (-4%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.83 kB +2 B (0%)
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB -2 B (0%)
build/vendors--checkout-blocks/shipping-methods-frontend.js 9.48 kB -1 B (0%)
build/wc-blocks-vendors.js 64.4 kB -10 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-reviews.js 7.66 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-items-frontend.js 299 B
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-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-frontend.js 28.9 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.78 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/pickup-options-frontend.js 2.8 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 324 B
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/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-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
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-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-sku-frontend.js 629 B
build/product-sku.js 378 B
build/product-stock-indicator.js 645 B
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/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.js 9.98 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-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 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.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

@kmanijak kmanijak added block-type: product elements Issues related to Product Element blocks. type: bug The issue/PR concerns a confirmed bug. type: cooldown Things that are queued for a cooldown period (assists with planning). and removed type: bug The issue/PR concerns a confirmed bug. labels Feb 15, 2023
@kmanijak kmanijak marked this pull request as ready for review February 15, 2023 13:31
@woocommercebot woocommercebot requested review from a team and albarin and removed request for a team February 15, 2023 13:31
Copy link
Contributor

@albarin albarin left a comment

Choose a reason for hiding this comment

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

Looks good! 👍

@kmanijak
Copy link
Contributor Author

E2E tests failing seem unrelated. Bypassing and merging.

@kmanijak kmanijak merged commit d796fa1 into trunk Feb 17, 2023
@kmanijak kmanijak deleted the remove-placeholder-usage branch February 17, 2023 14:08
Aljullu pushed a commit that referenced this pull request Feb 17, 2023
…ct (#8438)

* Simplify Add to Cart grouped version as it's never displayed
@dinhtungdu dinhtungdu added this to the 9.7.0 milestone Feb 27, 2023
@dinhtungdu dinhtungdu added the skip-changelog PRs that you don't want to appear in the changelog. label Feb 28, 2023
kmanijak added a commit that referenced this pull request Feb 28, 2023
PR should be marked as Experimental, not Core
dinhtungdu added a commit that referenced this pull request Mar 1, 2023
* Empty commit for release pull request

* update 9.7.0 changelog for readme.txt

* bump WC versions

* 9.7.0 testing notes

* Update 970.md

* remove 7945 and update 8489 testing note

* Remove 8264 testing notes

* remove 8482 from testing instructions

* Fix alignment of Add to Cart form block (#8578)

* update testing zip after cherry-picking 8578

* update changelog

* Move testing steps #8438 to experimental section (#8580)

* Fix image is not showing at correct position (#8585)

Co-authored-by: Tung Du <dinhtungdu@gmail.com>

* fix 8478 testing note

* fix md error cause the last section hidden

* Add to Cart Form Block > Ensure the editor preview is properly displayed with the Gutenberg plugin disabled (#8582)

* Update the editor styles for the add to cart form button so it is properly displayed with the Gutenberg plugin disabled.

* update for the input height.

* update the min-height

* update testing zip link

* Bumping version strings to new version.

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: kmanijak <karol.manijak@automattic.com>
Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product elements Issues related to Product Element blocks. skip-changelog PRs that you don't want to appear in the changelog. type: cooldown Things that are queued for a cooldown period (assists with planning).
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants