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

Editor: Add feedback box to the Cart & Checkout Inner Blocks #6881

Merged

Conversation

tarhi-saad
Copy link
Contributor

This PR adds the feedback box to the Cart & Checkout Inner Blocks in the inspector (Editor mode)!

Fixes #6852

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.

Testing

Automated Tests

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

User Facing Testing

  1. Go to the Cart and Checkout editor pages
  2. Select the Block and each of its inner blocks. You should notice the feedback box in the inspector.

image

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Add feedback box to the Cart & Checkout Inner Blocks in the inspector

@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Aug 11, 2022

Size Change: -247 B (0%)

Total Size: 864 kB

Filename Size Change
build/checkout-frontend.js 49.2 kB -7 B (0%)
build/checkout.js 41 kB -240 B (-1%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.33 kB
build/active-filters.js 8.01 kB
build/all-products-frontend.js 18.1 kB
build/all-products.js 33.7 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.09 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-line-items-frontend.js 429 B
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB
build/cart-blocks/cart-totals-frontend.js 323 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 781 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.65 kB
build/cart-blocks/order-summary-discount-frontend.js 2.14 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.38 kB
build/cart-blocks/order-summary-shipping-frontend.js 426 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 432 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 47 kB
build/cart.js 39.9 kB
build/checkout-blocks/actions-frontend.js 1.42 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.11 kB
build/checkout-blocks/billing-address-frontend.js 893 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.38 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.08 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.8 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.27 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.1 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 431 B
build/checkout-blocks/payment-frontend.js 7.69 kB
build/checkout-blocks/shipping-address-frontend.js 1.03 kB
build/checkout-blocks/shipping-methods-frontend.js 4.78 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 324 B
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.38 kB
build/legacy-template.js 2.8 kB
build/mini-cart-component-frontend.js 17 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 230 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 6.98 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 22.9 kB
build/mini-cart-frontend.js 1.71 kB
build/mini-cart.js 4.71 kB
build/price-filter-frontend.js 13.1 kB
build/price-filter.js 9.04 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 222 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB
build/product-add-to-cart--product-button.js 565 B
build/product-add-to-cart-frontend.js 6.95 kB
build/product-add-to-cart.js 6.63 kB
build/product-best-sellers.js 7.71 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button-frontend.js 1.84 kB
build/product-button.js 1.09 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 924 B
build/product-category-list.js 501 B
build/product-category.js 8.69 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 1.07 kB
build/product-new.js 7.72 kB
build/product-on-sale.js 8.04 kB
build/product-price-frontend.js 1.93 kB
build/product-price.js 1.5 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 734 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 679 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 380 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 620 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 915 B
build/product-tag-list-frontend.js 919 B
build/product-tag-list.js 495 B
build/product-tag.js 8.09 kB
build/product-title-frontend.js 1.29 kB
build/product-title.js 907 B
build/product-top-rated.js 7.96 kB
build/products-by-attribute.js 8.64 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.4 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 7.39 kB
build/stock-filter.js 7.31 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-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--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 5.04 kB
build/wc-blocks-editor-style.css 5.04 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.8 kB
build/wc-blocks-style.css 22.7 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 54.5 kB
build/wc-blocks.js 2.62 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 changed the base branch from trunk to add/compat-notice-hoc August 11, 2022 11:09
The "checkout fields", "checkout billing address" and
"checkout shipping address" have the addressFields option which
gets rerendered and placed at the bottom of the inspector controls.
@tarhi-saad tarhi-saad force-pushed the show/6852-feedback-box-for-inner-blocks-hoc branch from 3175817 to 7d5f9a5 Compare August 11, 2022 15:53
@tarhi-saad tarhi-saad marked this pull request as ready for review August 11, 2022 15:55
@rubikuserbot rubikuserbot requested review from a team and opr and removed request for a team August 11, 2022 15:55
Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

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

Tested and works great, thanks Saad!

@github-actions github-actions bot added this to the 8.3.0 milestone Aug 11, 2022
@tarhi-saad tarhi-saad merged commit 867b7c3 into add/compat-notice-hoc Aug 11, 2022
@tarhi-saad tarhi-saad deleted the show/6852-feedback-box-for-inner-blocks-hoc branch August 11, 2022 16:03
senadir pushed a commit that referenced this pull request Aug 12, 2022
* Show "Feedback prompt" for all inner blocks

* Fix the "feedback" notice position for these blocks

The "checkout fields", "checkout billing address" and
"checkout shipping address" have the addressFields option which
gets rerendered and placed at the bottom of the inspector controls.

* Tidy up the address-fields hoc
opr added a commit that referenced this pull request Aug 12, 2022
senadir added a commit that referenced this pull request Aug 12, 2022
… Checkout (#6869)

* Add default page notice

* show notice all inner blocks

* support flow when page isnt saved

* switch from where we get the current post id

* update lock

* fix types

* Remove old compatibility notices from Cart and Checkout

* Move useCompatibilityNotice to sidebar-compatibility-notice directory

* Remove old CartCheckoutCompatibilityNotice

* Create sidebar compatibility notice hoc

* Add isCartOrCheckoutOrInnerBlock function

* Refactor defaultNotice to use new isCartOrCheckoutOrInnerBlock func

* Remove BlockSettings from checkout edit and export from checkout-shared

* Change so component still renders, it is just hidden with display: none

This is required because when it returns null the component gets skipped from being added to the Slot, then when it does return a component, then it gets rendered at the bottom of the Slot. By ensuring it always renders we can have it at the top all the time.

* Set the priorities of the hoc filters so compat notice renders first

* Make isCartOrCheckoutInnerBlock a hook

* Remove old compatibility notice related tests

* Remove BlockSettings from Cart

* Remove withDefaultNotice hoc

* Include DefaultNotice in compatibility notice

* Remove DefaultNotice from Checkout

* Rename withSidebarCompatibilityNotice to withSidebarNotices

This is because it includes the sidebar compatibility notice and the default notices

* Remove useIsCartOrCheckoutOrInnerBlock hook

* Remove compatibility notice code from tests

* Revert DefaultNotice back to the old one

* Remove unused components

* Remove withBlockSettings HOC and fix TS types

This is an abstraction that is no longer required, we can just include BlockSettings in the Cart and Checkout blocks

* Remove CartCheckoutFeedbackPrompt from BlockSettings

It will be included in sidebar-notices instead

* Fix TS Types in DefaultNotice

* Add BlockSettings to cart and checkout edit

* Editor: Add feedback box to the Cart & Checkout Inner Blocks (#6881)

* Show "Feedback prompt" for all inner blocks

* Fix the "feedback" notice position for these blocks

The "checkout fields", "checkout billing address" and
"checkout shipping address" have the addressFields option which
gets rerendered and placed at the bottom of the inspector controls.

* Tidy up the address-fields hoc

* Use correct block name to check for billing or shipping address

* Revert "Editor: Add feedback box to the Cart & Checkout Inner Blocks (#6881)"

This reverts commit 5f3d6cf.

* Add hack to get feedback prompt to render last

* Fix TS errors for context and attributes

* Include CartCheckoutFeedbackPrompt in accountcontrols & addresscontrols

* Do not include feedback prompt if on an address block or contact info

* Remove unused hoc for address fields

Co-authored-by: Nadir Seghir <[email protected]>
Co-authored-by: Saad Tarhi <[email protected]>
@tarunvijwani tarunvijwani added the type: enhancement The issue is a request for an enhancement. label Aug 15, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Editor: Update the Sidebar Feedback section for the Cart and Checkout Blocks
3 participants