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

Improve transform classic product template UX #9386

Merged
merged 10 commits into from
May 10, 2023

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented May 8, 2023

This PR improves the layout of the classic product. Futhermore, it improves the UX to migrate to the blockified templates.

Please, during the review, check the mockup to see if I missed something: p6riRB-8yQ-p2

Fixes #9300 and #8853.

Screenshots

Template Before After Video
Single Product image image
Screen.Capture.on.2023-05-08.at.18-06-07.mp4
Archive Templates image image
Screen.Capture.on.2023-05-08.at.18-10-10.mov

Testing

Automated Tests

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

User Facing Testing

  1. Open the Single Product Template.
  2. Be sure that the description is: "Transform this template into multiple blocks so you can add, remove, reorder, and customize your single product template (for other templates, this should correspond to the name of the template)."
  3. Hover the button "transform into blocks".
  4. Ensure the preview corresponds to the "blockified template".
  5. Click the button.
  6. Ensure that the group block around the blockified product is selected.
  7. Ensure the snackbar is visible and the undo button works correctly.

Testing Instructions for developer - not include in the testing notes

  1. Enable Gutenberg trunk.
  2. Open the Single Product Template.
  3. Remove the Classic Product block.
  4. Ensure that in the right sidebar, in the template section, appears a new button with the label: "Revert to the Classic Product Template".
  5. Click on the button.
  6. Ensure that the button restores the Classic Product Block.
Repeat the instructions for those templates:
  • Single Product Template.
  • Product Catalog.
  • Products By Category.
  • Products By Tag.
  • Product By Attribute.
  • Product Search Results.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Classic Product Block: Improve layout and user experience to migrate to blockified templates.

@gigitux gigitux linked an issue May 8, 2023 that may be closed by this pull request
@github-actions
Copy link
Contributor

github-actions bot commented May 8, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9386.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
legacy-template.js wp-core-data, wp-notices ⚠️

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

TypeScript Errors Report

  • Files with errors: 452
  • Total errors: 2243

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

assets/js/blocks/classic-template/index.tsx

assets/js/templates/revert-button/index.tsx

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented May 8, 2023

Size Change: +782 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/active-filters.js 7.48 kB +5 B (0%)
build/all-products.js 38.9 kB +1 B (0%)
build/all-reviews.js 7.77 kB +2 B (0%)
build/attribute-filter.js 13.3 kB -1 B (0%)
build/breadcrumbs.js 2.04 kB -2 B (0%)
build/cart.js 44.8 kB -5 B (0%)
build/catalog-sorting.js 1.7 kB -1 B (0%)
build/checkout.js 46.3 kB -12 B (0%)
build/featured-category.js 14.4 kB -1 B (0%)
build/handpicked-products.js 8 kB +3 B (0%)
build/legacy-template.js 6.33 kB +667 B (+12%) ⚠️
build/mini-cart-contents.js 17.9 kB -9 B (0%)
build/mini-cart.js 4.49 kB +2 B (0%)
build/price-filter.js 8.47 kB +3 B (0%)
build/product-add-to-cart.js 8.88 kB +9 B (0%)
build/product-best-sellers.js 8.35 kB +1 B (0%)
build/product-categories.js 2.37 kB +4 B (0%)
build/product-category.js 9.36 kB +5 B (0%)
build/product-image.js 4.31 kB -1 B (0%)
build/product-new.js 8.35 kB +3 B (0%)
build/product-on-sale.js 8.68 kB +2 B (0%)
build/product-query.js 11.6 kB +2 B (0%)
build/product-search.js 2.63 kB -1 B (0%)
build/product-summary.js 923 B +1 B (0%)
build/product-tag.js 8.97 kB +4 B (0%)
build/product-title.js 3.75 kB +2 B (0%)
build/products-by-attribute.js 9.7 kB +5 B (0%)
build/rating-filter.js 7.01 kB -3 B (0%)
build/reviews-by-product.js 13.2 kB +1 B (0%)
build/single-product.js 11.1 kB +1 B (0%)
build/stock-filter.js 7.73 kB +1 B (0%)
build/store-notices.js 1.69 kB +1 B (0%)
build/wc-blocks-editor-style-rtl.css 5.91 kB +40 B (+1%)
build/wc-blocks-editor-style.css 5.91 kB +39 B (+1%)
build/wc-blocks-style-rtl.css 27.7 kB +9 B (0%)
build/wc-blocks-style.css 27.7 kB +9 B (0%)
build/wc-blocks-vendors.js 65.2 kB -4 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.56 kB
build/active-filters-wrapper--attribute-filter-wrapper--price-filter-wrapper--rating-filter-wrapper--stoc--78b62dd5-frontend.js 2.31 kB
build/active-filters-wrapper-frontend.js 4.68 kB
build/all-products-frontend.js 12.1 kB
build/attribute-filter-frontend.js 23.2 kB
build/attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 5.53 kB
build/attribute-filter-wrapper-frontend.js 4.64 kB
build/blocks-checkout.js 35.1 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 5.53 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 717 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.39 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 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 273 B
build/cart-blocks/order-summary-heading-frontend.js 332 B
build/cart-blocks/order-summary-shipping-frontend.js 17 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/cart-frontend.js 29.6 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.73 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.69 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17.1 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.28 kB
build/checkout-blocks/pickup-options-frontend.js 4.81 kB
build/checkout-blocks/shipping-address-frontend.js 1.16 kB
build/checkout-blocks/shipping-method-frontend.js 2.6 kB
build/checkout-blocks/shipping-methods-frontend.js 6.35 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 31.3 kB
build/customer-account.js 3.18 kB
build/featured-product.js 14.7 kB
build/filter-wrapper-frontend.js 14.2 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-component-frontend.js 29.5 kB
build/mini-cart-contents-block/cart-button-frontend.js 864 B
build/mini-cart-contents-block/checkout-button-frontend.js 866 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.23 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 760 B
build/mini-cart-contents-block/title-frontend.js 1.08 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 729 B
build/mini-cart-contents-block/title-label-frontend.js 661 B
build/mini-cart-frontend.js 2.05 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-wrapper-frontend.js 5.78 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 251 B
build/product-add-to-cart--product-rating.js 151 B
build/product-add-to-cart-frontend.js 6.5 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js 262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 463 B
build/product-button-frontend.js 1.92 kB
build/product-button.js 4.18 kB
build/product-image-frontend.js 1.84 kB
build/product-price-frontend.js 2.17 kB
build/product-price.js 1.74 kB
build/product-rating-frontend.js 1.45 kB
build/product-rating.js 1.04 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 974 B
build/product-sale-badge.js 801 B
build/product-sku-frontend.js 1 kB
build/product-sku.js 578 B
build/product-stock-indicator-frontend.js 1.19 kB
build/product-stock-indicator.js 771 B
build/product-summary-frontend.js 1.29 kB
build/product-title-frontend.js 1.37 kB
build/product-top-rated.js 8.58 kB
build/rating-filter-frontend.js 21.5 kB
build/rating-filter-wrapper-frontend.js 3.04 kB
build/reviews-by-category.js 12.1 kB
build/reviews-frontend.js 7.1 kB
build/stock-filter-frontend.js 21.8 kB
build/stock-filter-wrapper-frontend.js 3.31 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 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.58 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/wc-blocks-data.js 22.5 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.75 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.63 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 30.3 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@gigitux gigitux force-pushed the 9300-improve-transform-classic-product-template-ux branch 2 times, most recently from f78e0e5 to b0bf67d Compare May 8, 2023 15:43
@gigitux gigitux changed the title improve transform classic product template UX Improve transform classic product template UX May 8, 2023
@gigitux gigitux self-assigned this May 8, 2023
@gigitux gigitux marked this pull request as ready for review May 8, 2023 16:55
@gigitux gigitux added the focus: template Related to API powering block template functionality in the Site Editor label May 8, 2023
@woocommercebot woocommercebot requested review from a team and albarin and removed request for a team May 8, 2023 16:56
@gigitux gigitux added the type: enhancement The issue is a request for an enhancement. label May 8, 2023
@gigitux gigitux force-pushed the 9300-improve-transform-classic-product-template-ux branch from 4492c9f to 9393659 Compare May 8, 2023 16:59
@gigitux gigitux force-pushed the 9300-improve-transform-classic-product-template-ux branch from 9393659 to dccdde9 Compare May 8, 2023 17:00
@gigitux gigitux marked this pull request as draft May 8, 2023 17:31
@gigitux gigitux force-pushed the 9300-improve-transform-classic-product-template-ux branch from 1bdce35 to 83cbd76 Compare May 8, 2023 17:49
@gigitux gigitux marked this pull request as ready for review May 9, 2023 07:49
@woocommercebot woocommercebot requested a review from a team May 9, 2023 07:50
@albarin
Copy link
Contributor

albarin commented May 9, 2023

Is this the expected message on other templates aside from the Single Product? Is not the one you mention on step 2.
Screenshot 2023-05-09 at 14 30 52

@albarin
Copy link
Contributor

albarin commented May 9, 2023

  1. Ensure that the focused block is the group block.

@gigitux Does this mean that after clicking the transform button, the group block around the blockified product should be selected?

@gigitux gigitux force-pushed the 9300-improve-transform-classic-product-template-ux branch from 5bbab41 to 7730ef0 Compare May 9, 2023 14:04
@gigitux
Copy link
Contributor Author

gigitux commented May 9, 2023

Is this the expected message on other templates aside from the Single Product? Is not the one you mention on step 2. Screenshot 2023-05-09 at 14 30 52

You're right, there was some issue with the label. I didn't update some logic! I fixed with 954335b.

@gigitux
Copy link
Contributor Author

gigitux commented May 9, 2023

  1. Ensure that the focused block is the group block.

@gigitux Does this mean that after clicking the transform button, the group block around the blockified product should be selected?

Yes, I will update the testing instructions to be more precise!

@albarin
Copy link
Contributor

albarin commented May 10, 2023

Yes, I will update the testing instructions to be more precise!

Thanks! @gigitux
That's not working for me, see this example, it's selecting the Related products block.

CleanShot.2023-05-10.at.09.19.01.mp4

@gigitux
Copy link
Contributor Author

gigitux commented May 10, 2023

Yes, I will update the testing instructions to be more precise!

Thanks! @gigitux That's not working for me, see this example, it's selecting the Related products block.

CleanShot.2023-05-10.at.09.19.01.mp4

I introduced a regression with 954335b. Fixed with b986324.

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.

Thanks for the updates, looking good! 👍

@gigitux
Copy link
Contributor Author

gigitux commented May 10, 2023

Thanks for the updates, looking good! 👍

Thanks for your great review! 🚀

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: template Related to API powering block template functionality in the Site Editor type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve Transform Classic Product Template UX
3 participants