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

Add to Cart Form: Replace Notice with Skeleton component #8842

Conversation

thealexandrelara
Copy link
Contributor

@thealexandrelara thealexandrelara commented Mar 23, 2023

This PR replaces the Notice component of the Add To Cart Form block with a Skeleton component

Fixes #8818

Accessibility

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Screenshots

Before After
image image

Testing

Automated Tests

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

User Facing Testing

  1. Go to Appearance > Themes and activate a Blockfied theme, such as: Twenty-twenty Three;
  2. After the theme is activated, go to Appearance > Editor (Beta);
  3. Inside the Design section, click on Templates;
  4. Select the Single Product template;
  5. On the top left of the page, click on the Edit button;
  6. On the top right of the page, click on the three dots icon and open the Code Editor (or just hit Shift + Option + Command + M on the Mac);
  7. Replace the default wp-group section with the wp-group section inside the templates/templates/blockified/single-product.html file of this PR.
  8. Click on the Save button;
  9. Check that the Skeleton component appears above the Add To Cart button
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Replace the Notice component with the Skeleton component for the Add to Cart Form block

@thealexandrelara thealexandrelara self-assigned this Mar 23, 2023
@woocommercebot woocommercebot requested a review from a team March 23, 2023 19:07
@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2023

Size Change: +234 B (0%)

Total Size: 1.07 MB

Filename Size Change
build/active-filters.js 7.49 kB -1 B (0%)
build/all-products.js 37.6 kB +100 B (0%)
build/all-reviews.js 7.65 kB -2 B (0%)
build/attribute-filter.js 13.2 kB +7 B (0%)
build/breadcrumbs.js 2.04 kB -2 B (0%)
build/catalog-sorting.js 1.7 kB -1 B (0%)
build/checkout.js 46 kB -9 B (0%)
build/featured-category.js 14 kB +1 B (0%)
build/featured-product.js 14.4 kB +2 B (0%)
build/filter-wrapper.js 2.39 kB +1 B (0%)
build/handpicked-products.js 7.92 kB +1 B (0%)
build/mini-cart.js 4.49 kB +1 B (0%)
build/product-categories.js 2.36 kB +1 B (0%)
build/product-category.js 9.25 kB +2 B (0%)
build/product-new.js 8.26 kB +2 B (0%)
build/product-on-sale.js 8.59 kB +1 B (0%)
build/product-query.js 11 kB +3 B (0%)
build/product-search.js 2.63 kB +1 B (0%)
build/product-tag.js 8.74 kB -1 B (0%)
build/product-title.js 177 B -1 B (-1%)
build/product-top-rated.js 8.49 kB -3 B (0%)
build/products-by-attribute.js 9.58 kB +1 B (0%)
build/rating-filter.js 6.98 kB -2 B (0%)
build/reviews-by-product.js 13 kB +2 B (0%)
build/stock-filter.js 7.71 kB +3 B (0%)
build/store-notices.js 1.69 kB -1 B (0%)
build/wc-blocks-editor-style-rtl.css 5.8 kB +11 B (0%)
build/wc-blocks-editor-style.css 5.8 kB +10 B (0%)
build/wc-blocks-style-rtl.css 27.2 kB +53 B (0%)
build/wc-blocks-style.css 27.1 kB +52 B (0%)
build/wc-blocks-vendors.js 64.2 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.97 kB
build/all-products-frontend.js 11.8 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.1 kB
build/blocks-checkout.js 44 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.72 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.2 kB
build/cart-blocks/cart-express-payment-frontend.js 718 B
build/cart-blocks/cart-items-frontend.js 301 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 307 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 655 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 272 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 10.7 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.32 kB
build/cart-frontend.js 29.3 kB
build/cart.js 48.3 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address-frontend.js 4.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 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.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 10.8 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 8.39 kB
build/checkout-blocks/pickup-options-frontend.js 4.11 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.6 kB
build/checkout-blocks/shipping-methods-frontend.js 4.82 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 309 B
build/checkout-frontend.js 30.9 kB
build/customer-account.js 3.16 kB
build/filter-wrapper-frontend.js 14 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/legacy-template.js 5.57 kB
build/mini-cart-component-frontend.js 28.3 kB
build/mini-cart-contents-block/cart-button-frontend.js 816 B
build/mini-cart-contents-block/checkout-button-frontend.js 818 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.18 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 705 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 17.4 kB
build/mini-cart-frontend.js 2.02 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.96 kB
build/price-filter.js 8.4 kB
build/price-format.js 1.19 kB
build/product-add-to-cart-frontend.js 6.43 kB
build/product-add-to-cart.js 178 B
build/product-best-sellers.js 8.26 kB
build/product-button-frontend.js 1.91 kB
build/product-image-frontend.js 1.77 kB
build/product-image.js 178 B
build/product-price-frontend.js 2.08 kB
build/product-rating-frontend.js 1.34 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 977 B
build/product-sku-frontend.js 453 B
build/product-stock-indicator-frontend.js 1.01 kB
build/product-summary-frontend.js 1.29 kB
build/product-title-frontend.js 1.37 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.58 kB
build/reviews-by-category.js 11.9 kB
build/reviews-frontend.js 7.11 kB
build/stock-filter-frontend.js 21 kB
build/stock-filter-wrapper-frontend.js 5.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--ef6753df-frontend.js 6.85 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.25 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/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/wc-blocks-data.js 21.8 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 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-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 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@thealexandrelara thealexandrelara changed the title Feat/replace notice with skeleton on add to cart form block Add to Cart Form: Replace Notice with Skeleton component Mar 23, 2023
Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

We should add the popover that says: "The customer will see the..."

image

@gigitux gigitux requested a review from a team March 26, 2023 20:56
@thealexandrelara
Copy link
Contributor Author

thealexandrelara commented Mar 27, 2023

We should add the popover that says: "The customer will see the..."

I think we have a limitation to do that, because the block wrapper disables some mouse events, so if we put a popover inside the block wrapper it wouldn't trigger the mouseover event. In that case, we could put it around the block wrapper, but I don't know if it would be the best solution, what do you think?

@github-actions
Copy link
Contributor

github-actions bot commented Apr 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 Apr 4, 2023
@gigitux gigitux removed the status: stale Stale issues and PRs have had no updates for 60 days. label Apr 4, 2023
@gigitux
Copy link
Contributor

gigitux commented Apr 4, 2023

Hey, @thealexandrelara, I added the tooltip and also updated the class names on the editor site to follow the CSS guidelines via 41c2aa7.
Could you take a look?

@thealexandrelara
Copy link
Contributor Author

thealexandrelara commented Apr 4, 2023

Hey, @thealexandrelara, I added the tooltip and also updated the class names on the editor site to follow the CSS guidelines via 41c2aa7.
Could you take a look?

Looking great, thank you! Just a question regarding the Tooltip position, on the image you shared the tooltip appears at the top, but in the current implementation it is appearing at the bottom, is that expected?

@gigitux
Copy link
Contributor

gigitux commented Apr 4, 2023

Hey, @thealexandrelara, I added the tooltip and also updated the class names on the editor site to follow the CSS guidelines via 41c2aa7.
Could you take a look?

Looking great, thank you! Just a question regarding the Tooltip position, on the image you shared the tooltip appears at the top, but in the current implementation it is appearing at the bottom, is that expected?

Good observation! If we put the tooltip on the top, it will be on top of the quick controls, for this reason, I preferred to move it at the bottom!

@thealexandrelara
Copy link
Contributor Author

Good observation! If we put the tooltip on the top, it will be on top of the quick controls, for this reason, I preferred to move it at the bottom!

Great! I agree with the change, if it's okay to you, we can approve this PR and merge it

@gigitux
Copy link
Contributor

gigitux commented Apr 5, 2023

I added the different cursor style as design specs via 3c4a05b.

Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

LGTM

@github-actions github-actions bot added this to the 10.0.0 milestone Apr 5, 2023
@thealexandrelara thealexandrelara merged commit 9ac1761 into trunk Apr 5, 2023
@thealexandrelara thealexandrelara deleted the feat/replace-notice-with-skeleton-on-add-to-cart-form-block branch April 5, 2023 12:39
@opr opr added type: enhancement The issue is a request for an enhancement. block: add to cart form type: bug The issue/PR concerns a confirmed bug. and removed type: enhancement The issue is a request for an enhancement. labels Apr 10, 2023
@opr
Copy link
Contributor

opr commented Apr 10, 2023

@thealexandrelara I have added the correct labels to this PR.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: add to cart form type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add to Cart Form: improve preview on the editor side
3 participants