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

Fix issue that prevented spaces being added to Mini Cart, Cart and Checkout buttons #8777

Merged
merged 2 commits into from
Mar 17, 2023

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Mar 17, 2023

Fixes #8734.

This PR:

  • Creates a new component (EditableButton) that can be used to replace buttons containing a RichText component. They were used in the editor side of the Mini Cart, Cart and Checkout blocks to customize the text of the buttons.
  • Inside this new component, adds a work-around to a Firefox bug that didn't allow to type Space in contenteditable elements inside buttons (see Firefox bug). Ideally, when the bug is fixed in Firefox, we should be able to remove this work-around.

Testing

User Facing Testing

  1. With Firefox, add the Cart block to a post or page.
  2. In the editor, press the Proceed to Checkout button to edit the text to something like: Go to payment (or any string containing spaces).
  3. Verify the text is updated correctly and spaces are added as expected.
  4. Preview the page in the frontend and verify the button text is correct as well.
  5. Repeat steps 1-4 with the Checkout and Mini Cart blocks. (For the Mini Cart, you will need to edit its template part)
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Fix issue that prevented spaces being added to Mini Cart, Cart and Checkout buttons in Firefox.

@Aljullu Aljullu added status: needs review type: bug The issue/PR concerns a confirmed bug. block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. block: mini-cart Issues related to the Mini-Cart block. labels Mar 17, 2023
@Aljullu Aljullu self-assigned this Mar 17, 2023
@woocommercebot woocommercebot requested review from a team and thealexandrelara and removed request for a team March 17, 2023 10:12
@github-actions
Copy link
Contributor

github-actions bot commented Mar 17, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 17, 2023

Size Change: +718 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/active-filters.js 7.47 kB +1 B (0%)
build/all-products.js 37.7 kB -7 B (0%)
build/all-reviews.js 7.66 kB +6 B (0%)
build/attribute-filter.js 13.2 kB +3 B (0%)
build/cart.js 48 kB +244 B (+1%)
build/catalog-sorting.js 1.7 kB +1 B (0%)
build/checkout.js 45.6 kB +237 B (+1%)
build/customer-account.js 3.17 kB +1 B (0%)
build/featured-category.js 14 kB -4 B (0%)
build/featured-product.js 14.2 kB +2 B (0%)
build/handpicked-products.js 7.91 kB +1 B (0%)
build/legacy-template.js 5.32 kB -1 B (0%)
build/mini-cart-contents.js 16.9 kB +250 B (+2%)
build/price-filter.js 8.38 kB -2 B (0%)
build/product-add-to-cart.js 8.62 kB -2 B (0%)
build/product-best-sellers.js 8.25 kB -1 B (0%)
build/product-button.js 4.01 kB -1 B (0%)
build/product-categories.js 2.36 kB -1 B (0%)
build/product-category-list.js 502 B -1 B (0%)
build/product-category.js 9.24 kB +3 B (0%)
build/product-image.js 4.11 kB -3 B (0%)
build/product-new.js 8.25 kB +2 B (0%)
build/product-on-sale.js 8.58 kB +1 B (0%)
build/product-price.js 1.64 kB +2 B (0%)
build/product-query.js 11 kB -6 B (0%)
build/product-results-count.js 1.65 kB -1 B (0%)
build/product-search.js 2.63 kB -1 B (0%)
build/product-sku.js 452 B -1 B (0%)
build/product-summary.js 920 B +1 B (0%)
build/product-tag.js 8.73 kB -3 B (0%)
build/product-title.js 3.48 kB -1 B (0%)
build/product-top-rated.js 8.48 kB -3 B (0%)
build/products-by-attribute.js 9.58 kB +4 B (0%)
build/rating-filter.js 7.42 kB +2 B (0%)
build/reviews-by-category.js 11.9 kB +7 B (0%)
build/reviews-by-product.js 13 kB +3 B (0%)
build/single-product.js 10.6 kB +1 B (0%)
build/stock-filter.js 8.13 kB -1 B (0%)
build/store-notices.js 1.69 kB -1 B (0%)
build/wc-blocks-vendors.js 64.4 kB -14 B (0%)
build/wc-blocks.js 2.63 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.97 kB
build/active-filters-wrapper-frontend.js 5.99 kB
build/all-products-frontend.js 11.7 kB
build/attribute-filter-frontend.js 22.5 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 3.35 kB
build/attribute-filter-wrapper-frontend.js 4.5 kB
build/blocks-checkout.js 43.9 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-cross-sells-products-frontend.js 9.75 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.19 kB
build/cart-blocks/cart-express-payment-frontend.js 720 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.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 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 274 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-shipping-frontend.js 11.2 kB
build/cart-blocks/order-summary-subtotal-frontend.js 275 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB
build/cart-frontend.js 29 kB
build/checkout-blocks/actions-frontend.js 1.84 kB
build/checkout-blocks/billing-address-frontend.js 4.19 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 330 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 277 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 11.2 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.43 kB
build/checkout-blocks/pickup-options-frontend.js 4.04 kB
build/checkout-blocks/shipping-address-frontend.js 4.14 kB
build/checkout-blocks/shipping-method-frontend.js 2.47 kB
build/checkout-blocks/shipping-methods-frontend.js 5.26 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 B
build/checkout-frontend.js 30.5 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-component-frontend.js 28 kB
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 2.86 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 572 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.8 kB
build/price-filter-wrapper-frontend.js 6.99 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-add-to-cart-frontend.js 6.69 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js 262 B
build/product-button-frontend.js 2.22 kB
build/product-category-list-frontend.js 1.19 kB
build/product-image-frontend.js 2.22 kB
build/product-price-frontend.js 2.39 kB
build/product-rating-frontend.js 1.65 kB
build/product-rating.js 919 B
build/product-sale-badge-frontend.js 1.45 kB
build/product-sale-badge.js 820 B
build/product-sku-frontend.js 707 B
build/product-stock-indicator-frontend.js 1.32 kB
build/product-stock-indicator.js 646 B
build/product-summary-frontend.js 1.58 kB
build/product-tag-list-frontend.js 1.18 kB
build/product-tag-list.js 498 B
build/product-title-frontend.js 1.65 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter-wrapper-frontend.js 5.61 kB
build/reviews-frontend.js 7.13 kB
build/single-product-frontend.js 17.9 kB
build/stock-filter-frontend.js 21 kB
build/stock-filter-wrapper-frontend.js 3.15 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-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.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/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.24 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-editor-style-rtl.css 5.82 kB
build/wc-blocks-editor-style.css 5.82 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-style-rtl.css 26.9 kB
build/wc-blocks-style.css 26.9 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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

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.

Looking great! That was a tough one! 🙌

@Aljullu Aljullu merged commit da5efea into trunk Mar 17, 2023
@Aljullu Aljullu deleted the fix/8734-add-spaces-in-buttons-firefox branch March 17, 2023 12:26
@Aljullu Aljullu modified the milestones: 9.9.0, 9.8.2 Mar 22, 2023
@Aljullu Aljullu added the release: cherry-pick Cherry picked into the relevant release branch. label Mar 22, 2023
Aljullu added a commit that referenced this pull request Mar 22, 2023
…eckout buttons (#8777)

* Fix issue that prevented spaces being added to Mini Cart, Cart and Checkout buttons

* Fix a couple of comments
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. block: mini-cart Issues related to the Mini-Cart block. release: cherry-pick Cherry picked into the relevant release branch. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Can't add spaces to Cart and Mini Cart buttons
2 participants