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

Checkout Block: Avoid using editor buttons in the post content to prevent inheriting global styles #8957

Merged
merged 6 commits into from
Apr 6, 2023

Conversation

mikejolley
Copy link
Member

This PR takes a different approach to fixing #8571 and #8944 by removing editor-only buttons from the post content shown in the editor. Important notices and buttons are instead moved to the block inspector which mitigates those issues, as well as streamlining the appearance of the block in the editor so it more closely matches the frontend.

To summarise the changes:

  1. Express checkout placeholder has been removed. The express checkout block is now only visible if an express payment method is in use.
  2. Payments block will show a notice matching the frontend. The block inspector will link to the payment methods settings page instead.
  3. Terms and conditions block will not show a placeholder/notice inline. It has been moved to the block inspector. Functionality is the same as before—this includes links to setup those pages, as well as buttons that are more appropriate to restore content.
  4. Consolidated the feedback notice into one location and removed legacy notice handling (as the min version of WooCommerce was bumped beyond the version it was targeting).

This PR has therefore covered the following issues:

Fixes #8362
Fixes #8571
Fixes #8944

Screenshots

Express checkout

Before:
Screenshot 2023-04-04 at 15 54 23

After:
Removed.

Payment methods

Before:
Screenshot 2023-04-04 at 15 55 04

After:
Screenshot 2023-04-04 at 15 38 31
Screenshot 2023-04-04 at 15 38 39

Terms and conditions

Before:
Screenshot 2023-04-04 at 15 55 27
Screenshot 2023-04-04 at 15 55 57

After:
Screenshot 2023-04-04 at 15 41 05
Screenshot 2023-04-04 at 15 38 20

Testing

Automated Tests

JS tests will need to pass. I'll update if necessary as some elements were moved around.

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

User Facing Testing

Express payments

  1. With no express payment methods setup
  2. Edit the checkout page
  3. You should not see an express payment method placeholder at the top of the checkout
  4. Enable an express payment method such as Stripe
  5. Edit the checkout page. You should see the express payment block now

Payment methods

  1. With some payment methods setup e.g. BACS
  2. Edit the checkout page
  3. Confirm payment method block displays normally
  4. Go to WooCommerce > Settings > Payments
  5. Disable all payment methods
  6. Edit the checkout page
  7. Confirm a notice is shown in place of the block
  8. Click on the notice.
  9. Open the block inspector
  10. See the notice telling you to configure payment methods

Terms and conditions

  1. Go to tools > privacy and unset the privacy page
  2. Go to WooCommerce > Settings > Advanced and ensure a terms page has been configured
  3. Edit the checkout page
  4. Focus on the terms and conditions block
  5. Open the block inspector. See the notice telling you to configure pages.
  6. Go to tools > privacy and set the privacy page to a valid published page
  7. Edit the checkout page
  8. Focus on the terms and conditions block
  9. There should be no notice if both pages are configured
  10. Edit the block content and remove one of the links to either the privacy page or the terms page
  11. The inspector should show a notice to restore default content
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Moved editor-only placeholders to the block inspector to improve the appearance of the checkout block in the post editor.

@mikejolley mikejolley self-assigned this Apr 4, 2023
@mikejolley mikejolley added status: needs review block: checkout Issues related to the checkout block. labels Apr 4, 2023
@woocommercebot woocommercebot requested review from a team and wavvves and removed request for a team April 4, 2023 15:11
@github-actions
Copy link
Contributor

github-actions bot commented Apr 4, 2023

The release ZIP for this PR is accessible via:

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

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

assets/js/editor-components/no-payment-methods-notice/index.tsx

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Apr 4, 2023

Size Change: -1.62 kB (0%)

Total Size: 1.06 MB

Filename Size Change
build/active-filters-frontend.js 7.98 kB -2 B (0%)
build/active-filters.js 7.49 kB +1 B (0%)
build/all-products.js 37.8 kB +3 B (0%)
build/all-reviews.js 7.66 kB +7 B (0%)
build/attribute-filter-frontend.js 22.5 kB -6 B (0%)
build/attribute-filter.js 13.2 kB +1 B (0%)
build/breadcrumbs.js 2.04 kB -1 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB -2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.72 kB -2 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB -33 B (-1%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB +1 B (0%)
build/cart-blocks/cart-line-items-frontend.js 1.07 kB +1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB -2 B (0%)
build/cart-blocks/cart-totals-frontend.js 308 B +1 B (0%)
build/cart-blocks/empty-cart-frontend.js 344 B -1 B (0%)
build/cart-blocks/filled-cart-frontend.js 655 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB -2 B (0%)
build/cart-blocks/order-summary-fee-frontend.js 272 B -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 11.5 kB -5 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 431 B -2 B (0%)
build/cart-frontend.js 29.3 kB +1 B (0%)
build/cart.js 48.4 kB -278 B (-1%)
build/checkout-blocks/actions-frontend.js 1.85 kB +4 B (0%)
build/checkout-blocks/billing-address-frontend.js 4.18 kB -6 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.05 kB +1 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.14 kB +3 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB -1 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.78 kB +1 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB -2 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.24 kB -1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 11.6 kB -4 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 431 B -3 B (-1%)
build/checkout-blocks/payment-frontend.js 8.27 kB -513 B (-6%)
build/checkout-blocks/pickup-options-frontend.js 4.11 kB -6 B (0%)
build/checkout-blocks/shipping-address-frontend.js 4.14 kB -3 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.61 kB -1 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 5.81 kB -6 B (0%)
build/checkout-blocks/terms-frontend.js 1.56 kB -3 B (0%)
build/checkout-blocks/totals-frontend.js 311 B +2 B (+1%)
build/checkout-frontend.js 30.9 kB -13 B (0%)
build/checkout.js 46 kB -334 B (-1%)
build/customer-account.js 3.16 kB -2 B (0%)
build/featured-category.js 14 kB -6 B (0%)
build/featured-product.js 14.4 kB -5 B (0%)
build/filter-wrapper-frontend.js 14 kB -16 B (0%)
build/handpicked-products.js 7.92 kB +3 B (0%)
build/mini-cart-component-frontend.js 28.3 kB -41 B (0%)
build/mini-cart-contents-block/cart-button-frontend.js 820 B +2 B (0%)
build/mini-cart-contents-block/checkout-button-frontend.js 821 B +2 B (0%)
build/mini-cart-contents-block/empty-cart-frontend.js 360 B -1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 3.18 kB -2 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 705 B +1 B (0%)
build/price-filter-frontend.js 13.9 kB +3 B (0%)
build/price-filter.js 8.4 kB -6 B (0%)
build/product-best-sellers.js 8.26 kB +2 B (0%)
build/product-button-frontend.js 1.92 kB +3 B (0%)
build/product-categories.js 2.36 kB -1 B (0%)
build/product-category.js 9.25 kB +3 B (0%)
build/product-image-frontend.js 1.76 kB +1 B (0%)
build/product-new.js 8.26 kB +3 B (0%)
build/product-on-sale.js 8.59 kB +3 B (0%)
build/product-price-frontend.js 2.08 kB -3 B (0%)
build/product-query.js 11 kB +11 B (0%)
build/product-sale-badge-frontend.js 975 B +1 B (0%)
build/product-search.js 2.63 kB +1 B (0%)
build/product-stock-indicator-frontend.js 1.01 kB -2 B (0%)
build/products-by-attribute.js 9.58 kB +1 B (0%)
build/rating-filter-frontend.js 20.8 kB -11 B (0%)
build/rating-filter.js 6.98 kB -1 B (0%)
build/reviews-by-category.js 11.9 kB +6 B (0%)
build/reviews-by-product.js 13 kB +3 B (0%)
build/stock-filter-frontend.js 21.1 kB -12 B (0%)
build/stock-filter-wrapper-frontend.js 5.83 kB +6 B (0%)
build/stock-filter.js 7.7 kB -4 B (0%)
build/store-notices.js 1.69 kB -2 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.82 kB -17 B (0%)
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB -1 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB +2 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB -1 B (0%)
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB +2 B (0%)
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB +1 B (0%)
build/wc-blocks-editor-style-rtl.css 5.8 kB -4 B (0%)
build/wc-blocks-editor-style.css 5.8 kB -6 B (0%)
build/wc-blocks-style-rtl.css 27.6 kB -29 B (0%)
build/wc-blocks-style.css 27.6 kB -29 B (0%)
build/wc-blocks-vendors.js 63.6 kB -273 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-wrapper-frontend.js 5.97 kB
build/all-products-frontend.js 11.8 kB
build/attribute-filter-wrapper-frontend.js 7.1 kB
build/blocks-checkout.js 35.1 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-express-payment-frontend.js 718 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/filter-wrapper.js 2.4 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-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 589 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/mini-cart.js 4.49 kB
build/price-filter-wrapper-frontend.js 6.96 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-image.js 178 B
build/product-rating-frontend.js 1.33 kB
build/product-results-count.js 1.66 kB
build/product-sku-frontend.js 999 B
build/product-summary-frontend.js 1.29 kB
build/product-tag.js 8.74 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 178 B
build/product-top-rated.js 8.49 kB
build/rating-filter-wrapper-frontend.js 5.58 kB
build/reviews-frontend.js 7.1 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/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB
build/wc-blocks-data.js 21.8 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-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 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
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

@mikejolley
Copy link
Member Author

There is a test fail because the tests don't factor in the inspector; if I cannot find a solution to include them, Ill remove the tests...

@mikejolley mikejolley force-pushed the fix/admin-button-styles-for-checkout branch from 638371d to 11fe7a5 Compare April 5, 2023 14:18
@mikejolley
Copy link
Member Author

Tests should be ok now. Ready for review.

Copy link
Member

@nielslange nielslange 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 working on this, @mikejolley. The changes work as expected and the updated unit test is passing. I noticed that a few e2e tests are failing, but they seem to be unrelated to this change and might be flaky tests.

@github-actions github-actions bot added this to the 10.0.0 milestone Apr 6, 2023
@nielslange nielslange added type: enhancement The issue is a request for an enhancement. and removed status: ready to merge labels Apr 6, 2023
@mikejolley mikejolley force-pushed the fix/admin-button-styles-for-checkout branch from d042812 to 243d448 Compare April 6, 2023 09:46
@mikejolley mikejolley merged commit b430315 into trunk Apr 6, 2023
@mikejolley mikejolley deleted the fix/admin-button-styles-for-checkout branch April 6, 2023 11:16
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. type: enhancement The issue is a request for an enhancement.
Projects
None yet
2 participants