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

Order confirmation block styling #10780

Merged

Conversation

mikejolley
Copy link
Member

@mikejolley mikejolley commented Aug 30, 2023

What

This PR restores #10606 and applies styles (padding, alignment, colors) to finalise the order confirmation page.

Fixes #10763

Why

n/a

Testing Instructions

Please consider any edge cases this change may have, and also other areas of the product this may impact.

  1. Go to Appearance > Editor > Templates, select Order Confirmation
  2. If you've made edits, click the three dots and "reset customisations"
  3. Hover over the order confirmation placeholder and "convert to blocks"
  4. You should see the correct layout now including summary, status, details, downloads, address sections
  5. Confirm the design matches the screenshot below
  6. Try applying some changes such as background and color changes. One to test is the summary block; give it a background color and confirm it gets automatic padding of 16px once it refreshes
  7. Save changes
  8. Place an order and confirm the frontend matches the preview state
  • Do not include in the Testing Notes
  • Should be tested by the development team exclusively

Screenshots or screencast

screenshot_2023-08-30_at_16 16 24_720

WooCommerce Visibility

Required:

  • WooCommerce Core
  • Feature plugin
  • Experimental
  • N/A

Checklist

Required:

  • This PR has either a [type] label or a [skip-changelog] label.
  • This PR is assigned to a milestone.

Conditional:

  • This PR has a changelog description (if [skip-changelog] label is not present).
  • 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.
  • This PR has been accessibility tested.
  • This PR has had any necessary documentation added/updated.

Changelog

n/a

@mikejolley mikejolley added type: enhancement The issue is a request for an enhancement. skip-changelog PRs that you don't want to appear in the changelog. block: checkout Issues related to the checkout block. labels Aug 30, 2023
@mikejolley mikejolley added this to the Behind Feature Flag milestone Aug 30, 2023
@mikejolley mikejolley self-assigned this Aug 30, 2023
@woocommercebot woocommercebot requested review from a team and tarhi-saad and removed request for a team August 30, 2023 15:55
@github-actions
Copy link
Contributor

github-actions bot commented Aug 30, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-10780.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
product-gallery-large-image.js wp-components ⚠️
order-confirmation-summary.js wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-date, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
order-confirmation-totals-wrapper.js wc-settings, wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
order-confirmation-totals.js wc-price-format, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
order-confirmation-downloads-wrapper.js wc-settings, wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
order-confirmation-downloads.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
order-confirmation-billing-address.js wp-block-editor, wp-blocks, wp-element, wp-polyfill, wp-primitives ⚠️
order-confirmation-shipping-address.js wp-block-editor, wp-blocks, wp-element, wp-polyfill, wp-primitives ⚠️
order-confirmation-billing-wrapper.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
order-confirmation-shipping-wrapper.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
order-confirmation-status.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️

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

TypeScript Errors Report

  • Files with errors: 483
  • Total errors: 2260

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

assets/js/atomic/blocks/product-elements/shared/product-selector.tsx

assets/js/atomic/blocks/product-elements/shared/with-product-selector.js

assets/js/base/utils/errors.js

assets/js/blocks/order-confirmation/billing-wrapper/index.tsx

assets/js/blocks/order-confirmation/downloads-wrapper/index.tsx

assets/js/blocks/order-confirmation/downloads/edit.tsx

assets/js/blocks/order-confirmation/shipping-wrapper/index.tsx

assets/js/blocks/order-confirmation/status/index.tsx

assets/js/blocks/order-confirmation/summary/index.tsx

assets/js/blocks/order-confirmation/totals-wrapper/index.tsx

assets/js/blocks/order-confirmation/totals/edit.tsx

assets/js/blocks/order-confirmation/totals/index.tsx

assets/js/blocks/reviews/reviews-by-product/edit.tsx

assets/js/blocks/single-product/edit/shared-product-control.tsx

assets/js/editor-components/product-control/index.js

assets/js/utils/products.js

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Aug 30, 2023

Size Change: +6 kB (0%)

Total Size: 1.45 MB

Filename Size Change
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js 930 B +1 B (0%)
build/active-filters.css 1.99 kB +1 B (0%)
build/active-filters.js 7.51 kB +1 B (0%)
build/all-products.js 41.3 kB -5 B (0%)
build/all-reviews.js 7.76 kB -2 B (0%)
build/attribute-filter.css 4.13 kB -1 B (0%)
build/attribute-filter.js 13.1 kB -7 B (0%)
build/cart-blocks/cart-items-style.js 218 B -1 B (0%)
build/cart-blocks/cart-order-summary-style.js 317 B +1 B (0%)
build/cart-blocks/empty-cart-style.js 346 B +1 B (0%)
build/cart-blocks/filled-cart-style.js 310 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-style.js 137 B -1 B (-1%)
build/cart-blocks/order-summary-discount-style.js 138 B +1 B (+1%)
build/cart-blocks/order-summary-fee-style.js 138 B +1 B (+1%)
build/cart-blocks/order-summary-heading-style.js 327 B +1 B (0%)
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB +2 B (0%)
build/cart-rtl.css 9.71 kB -1 B (0%)
build/cart.css 9.69 kB -1 B (0%)
build/cart.js 45 kB +9 B (0%)
build/catalog-sorting.js 1.71 kB -2 B (0%)
build/checkout-blocks/actions-style.js 682 B -1 B (0%)
build/checkout-blocks/contact-information-style.js 606 B -2 B (0%)
build/checkout-blocks/order-summary-coupon-form-style.js 138 B +2 B (+1%)
build/checkout-blocks/order-summary-shipping-style.js 138 B +1 B (+1%)
build/checkout-blocks/order-summary-style.js 317 B +1 B (0%)
build/checkout-blocks/payment-style.js 459 B -2 B (0%)
build/checkout-blocks/shipping-address-style.js 475 B -1 B (0%)
build/checkout-blocks/shipping-method-style.js 1.35 kB +1 B (0%)
build/checkout-blocks/shipping-methods-style.js 415 B -2 B (0%)
build/checkout-rtl.css 9.08 kB -1 B (0%)
build/checkout.css 9.07 kB +1 B (0%)
build/checkout.js 47.7 kB -5 B (0%)
build/customer-account.js 3.18 kB +2 B (0%)
build/featured-category.js 14.9 kB -3 B (0%)
build/featured-product.js 15.1 kB -5 B (0%)
build/filter-wrapper.js 2.38 kB -4 B (0%)
build/handpicked-products.js 7.97 kB -2 B (0%)
build/legacy-template.js 8.23 kB +5 B (0%)
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---a5b7fa58-style.js 929 B -1 B (0%)
build/mini-cart-contents-block/checkout-button-style.js 465 B +1 B (0%)
build/mini-cart-contents-block/filled-cart-style.js 268 B +1 B (0%)
build/mini-cart-contents-block/footer-style.js 2.35 kB +3 B (0%)
build/mini-cart-contents-block/items-style.js 228 B -1 B (0%)
build/mini-cart-contents-block/products-table-style.js 5.33 kB +1 B (0%)
build/mini-cart-contents-block/shopping-button-style.js 399 B +1 B (0%)
build/mini-cart-contents-block/title-items-counter-style.js 302 B +1 B (0%)
build/mini-cart-contents-block/title-label-style.js 301 B +2 B (+1%)
build/mini-cart-contents.js 17.6 kB +20 B (0%)
build/mini-cart-rtl.css 2.56 kB -1 B (0%)
build/mini-cart.css 2.56 kB +1 B (0%)
build/order-confirmation-billing-address-rtl.css 371 B +119 B (+47%) 🚨
build/order-confirmation-billing-address.css 370 B +119 B (+47%) 🚨
build/order-confirmation-billing-wrapper.js 1.43 kB +28 B (+2%)
build/order-confirmation-downloads-rtl.css 477 B +146 B (+44%) 🚨
build/order-confirmation-downloads.css 478 B +149 B (+45%) 🚨
build/order-confirmation-downloads.js 1.9 kB +506 B (+36%) 🚨
build/order-confirmation-shipping-address-rtl.css 372 B +120 B (+48%) 🚨
build/order-confirmation-shipping-address.css 371 B +119 B (+47%) 🚨
build/order-confirmation-shipping-address.js 1.55 kB +1 B (0%)
build/order-confirmation-shipping-wrapper.js 1.43 kB +28 B (+2%)
build/order-confirmation-status.js 1.54 kB -18 B (-1%)
build/order-confirmation-summary-rtl.css 458 B +98 B (+27%) 🚨
build/order-confirmation-summary.css 457 B +98 B (+27%) 🚨
build/order-confirmation-summary.js 1.76 kB +218 B (+14%) ⚠️
build/order-confirmation-totals-rtl.css 482 B +104 B (+28%) 🚨
build/order-confirmation-totals.css 483 B +106 B (+28%) 🚨
build/order-confirmation-totals.js 2.18 kB +254 B (+13%) ⚠️
build/price-filter.js 8.53 kB +3 B (0%)
build/product-add-to-cart.js 8.55 kB -2 B (0%)
build/product-best-sellers.js 8.32 kB -2 B (0%)
build/product-button.js 3.88 kB +1 B (0%)
build/product-categories.js 2.72 kB -2 B (0%)
build/product-category.js 9.29 kB -1 B (0%)
build/product-collection.js 14.9 kB +3 B (0%)
build/product-gallery.js 7.51 kB +2 B (0%)
build/product-image.js 1.51 kB +1 B (0%)
build/product-new.js 8.6 kB -2 B (0%)
build/product-on-sale.js 8.6 kB -3 B (0%)
build/product-query.js 13.1 kB +4 B (0%)
build/product-search.js 2.62 kB -1 B (0%)
build/product-tag.js 8.61 kB -1 B (0%)
build/product-template.js 3.43 kB +1 B (0%)
build/product-top-rated.js 8.86 kB +3 B (0%)
build/products-by-attribute.js 9.62 kB -2 B (0%)
build/rating-filter.css 4.2 kB +1 B (0%)
build/rating-filter.js 6.88 kB +4 B (0%)
build/reviews-by-product.js 13.1 kB +3 B (0%)
build/single-product.js 11.2 kB +2 B (0%)
build/stock-filter.css 4 kB -1 B (0%)
build/stock-filter.js 7.6 kB +2 B (0%)
build/store-notices.js 1.69 kB +5 B (0%)
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js 606 B -1 B (0%)
build/vendors--checkout-blocks/shipping-method-style.js 11.7 kB +5 B (0%)
build/vendors--mini-cart-contents-block/products-table-style.js 3.16 kB -1 B (0%)
build/wc-all-blocks-style-rtl.css 29.9 kB +224 B (+1%)
build/wc-all-blocks-style.css 29.8 kB +226 B (+1%)
build/wc-blocks-editor-style-rtl.css 6.44 kB +1 B (0%)
build/wc-blocks-vendors.js 65.8 kB -1 B (0%)
build/wc-blocks.js 2.62 kB -2 B (0%)
build/order-confirmation-downloads-wrapper.js 1.5 kB +1.5 kB (new file) 🆕
build/order-confirmation-totals-wrapper.js 1.82 kB +1.82 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.57 kB
build/active-filters-rtl.css 1.99 kB
build/active-filters-wrapper-frontend.js 7.58 kB
build/active-filters-wrapper-rtl.css 1.85 kB
build/active-filters-wrapper.css 1.85 kB
build/add-to-cart-form-rtl.css 355 B
build/add-to-cart-form.css 354 B
build/all-products-frontend.js 9.95 kB
build/all-products-rtl.css 4.4 kB
build/all-products.css 4.39 kB
build/all-reviews-rtl.css 1.79 kB
build/all-reviews.css 1.79 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-rtl.css 4.14 kB
build/attribute-filter-wrapper-frontend.js 8.01 kB
build/attribute-filter-wrapper-rtl.css 4.01 kB
build/attribute-filter-wrapper.css 4.01 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs-rtl.css 232 B
build/breadcrumbs.css 232 B
build/breadcrumbs.js 2.26 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.34 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 137 B
build/cart-blocks/cart-cross-sells-frontend.js 250 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.89 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.73 kB
build/cart-blocks/cart-cross-sells-products-style.js 137 B
build/cart-blocks/cart-cross-sells-style.js 250 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5 kB
build/cart-blocks/cart-express-payment-frontend.js 711 B
build/cart-blocks/cart-express-payment-style.js 137 B
build/cart-blocks/cart-items-frontend.js 284 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.34 kB
build/cart-blocks/cart-line-items-frontend.js 1.04 kB
build/cart-blocks/cart-line-items-style.js 137 B
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 287 B
build/cart-blocks/cart-totals-style.js 228 B
build/cart-blocks/empty-cart-frontend.js 352 B
build/cart-blocks/filled-cart-frontend.js 652 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.57 kB
build/cart-blocks/order-summary-discount-frontend.js 2.04 kB
build/cart-blocks/order-summary-fee-frontend.js 271 B
build/cart-blocks/order-summary-heading-frontend.js 325 B
build/cart-blocks/order-summary-shipping-frontend.js 12 kB
build/cart-blocks/order-summary-shipping-style.js 178 B
build/cart-blocks/order-summary-subtotal-frontend.js 271 B
build/cart-blocks/order-summary-subtotal-style.js 137 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/order-summary-taxes-style.js 178 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.41 kB
build/cart-frontend.js 29.7 kB
build/catalog-sorting-rtl.css 256 B
build/catalog-sorting.css 256 B
build/checkout-blocks/actions--checkout-blocks/terms-style.js 487 B
build/checkout-blocks/actions-frontend.js 1.81 kB
build/checkout-blocks/billing-address-frontend.js 4.3 kB
build/checkout-blocks/billing-address-style.js 532 B
build/checkout-blocks/contact-information-frontend.js 2.03 kB
build/checkout-blocks/express-payment-frontend.js 1.12 kB
build/checkout-blocks/fields-frontend.js 301 B
build/checkout-blocks/fields-style.js 249 B
build/checkout-blocks/order-note-frontend.js 1.1 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.64 kB
build/checkout-blocks/order-summary-cart-items-style.js 136 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.73 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.22 kB
build/checkout-blocks/order-summary-discount-style.js 137 B
build/checkout-blocks/order-summary-fee-frontend.js 274 B
build/checkout-blocks/order-summary-fee-style.js 137 B
build/checkout-blocks/order-summary-frontend.js 1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js 12 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 272 B
build/checkout-blocks/order-summary-subtotal-style.js 137 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/order-summary-taxes-style.js 177 B
build/checkout-blocks/payment-frontend.js 9.13 kB
build/checkout-blocks/pickup-options-frontend.js 4.13 kB
build/checkout-blocks/pickup-options-style.js 440 B
build/checkout-blocks/shipping-address-frontend.js 4.28 kB
build/checkout-blocks/shipping-method-frontend.js 2.59 kB
build/checkout-blocks/shipping-methods-frontend.js 5.68 kB
build/checkout-blocks/terms-frontend.js 1.51 kB
build/checkout-blocks/terms-style.js 673 B
build/checkout-blocks/totals-frontend.js 333 B
build/checkout-blocks/totals-style.js 275 B
build/checkout-frontend.js 31.6 kB
build/combobox-control-style-rtl.css 585 B
build/combobox-control-style.css 585 B
build/custom-select-control-style-rtl.css 479 B
build/custom-select-control-style.css 479 B
build/customer-account-rtl.css 388 B
build/customer-account.css 387 B
build/featured-category-rtl.css 971 B
build/featured-category.css 970 B
build/featured-product-rtl.css 1.02 kB
build/featured-product.css 1.02 kB
build/filter-wrapper-frontend.js 14.1 kB
build/filter-wrapper-rtl.css 375 B
build/filter-wrapper.css 375 B
build/form-token-field-style-rtl.css 1.23 kB
build/form-token-field-style.css 1.22 kB
build/legacy-template-rtl.css 238 B
build/legacy-template.css 238 B
build/mini-cart-component-frontend.js 30.7 kB
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js 248 B
build/mini-cart-contents-block/cart-button-frontend.js 1.69 kB
build/mini-cart-contents-block/cart-button-style.js 384 B
build/mini-cart-contents-block/checkout-button-frontend.js 1.77 kB
build/mini-cart-contents-block/empty-cart-frontend.js 358 B
build/mini-cart-contents-block/empty-cart-style.js 355 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.77 kB
build/mini-cart-contents-block/footer-rtl.css 400 B
build/mini-cart-contents-block/footer.css 400 B
build/mini-cart-contents-block/items-frontend.js 228 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js 316 B
build/mini-cart-contents-block/products-table-frontend.js 549 B
build/mini-cart-contents-block/products-table-rtl.css 2.12 kB
build/mini-cart-contents-block/products-table.css 2.11 kB
build/mini-cart-contents-block/shopping-button-frontend.js 487 B
build/mini-cart-contents-block/title-frontend.js 1.86 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.58 kB
build/mini-cart-contents-block/title-label-frontend.js 1.51 kB
build/mini-cart-contents-block/title-style.js 440 B
build/mini-cart-contents-rtl.css 2.66 kB
build/mini-cart-contents.css 2.65 kB
build/mini-cart-frontend.js 2.79 kB
build/mini-cart.js 6.35 kB
build/order-confirmation-billing-address.js 1.55 kB
build/order-confirmation-status-rtl.css 250 B
build/order-confirmation-status.css 250 B
build/packages-style-rtl.css 3.55 kB
build/packages-style.css 3.55 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-rtl.css 2.67 kB
build/price-filter-wrapper-frontend.js 8.57 kB
build/price-filter-wrapper-rtl.css 2.53 kB
build/price-filter-wrapper.css 2.53 kB
build/price-filter.css 2.67 kB
build/price-format.js 1.15 kB
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js 273 B
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js 150 B
build/product-add-to-cart--product-image--product-title.js 319 B
build/product-add-to-cart-frontend.js 8.5 kB
build/product-add-to-cart-rtl.css 1.35 kB
build/product-add-to-cart.css 1.36 kB
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js 933 B
build/product-average-rating-frontend.js 1.71 kB
build/product-average-rating.js 403 B
build/product-button-frontend.js 4.87 kB
build/product-button-interactivity-frontend.js 9.51 kB
build/product-button-rtl.css 1.12 kB
build/product-button.css 1.11 kB
build/product-categories-rtl.css 651 B
build/product-categories.css 649 B
build/product-details-rtl.css 394 B
build/product-details.css 391 B
build/product-gallery-large-image-rtl.css 295 B
build/product-gallery-large-image.css 295 B
build/product-gallery-large-image.js 2.03 kB
build/product-gallery-pager-rtl.css 289 B
build/product-gallery-pager.css 289 B
build/product-gallery-pager.js 3.5 kB
build/product-gallery-rtl.css 464 B
build/product-gallery-thumbnails-rtl.css 272 B
build/product-gallery-thumbnails.css 271 B
build/product-gallery-thumbnails.js 3.91 kB
build/product-gallery.css 462 B
build/product-image-frontend.js 2.65 kB
build/product-image-gallery-rtl.css 304 B
build/product-image-gallery.css 303 B
build/product-image-rtl.css 922 B
build/product-image.css 920 B
build/product-price-frontend.js 247 B
build/product-price-rtl.css 667 B
build/product-price.css 665 B
build/product-price.js 1.66 kB
build/product-query-rtl.css 347 B
build/product-query.css 347 B
build/product-rating-counter-frontend.js 2.01 kB
build/product-rating-counter.js 690 B
build/product-rating-frontend.js 2.35 kB
build/product-rating-rtl.css 244 B
build/product-rating-stars-frontend.js 2.25 kB
build/product-rating-stars-rtl.css 895 B
build/product-rating-stars.css 897 B
build/product-rating-stars.js 939 B
build/product-rating.css 244 B
build/product-rating.js 1.04 kB
build/product-results-count-rtl.css 228 B
build/product-results-count.css 228 B
build/product-results-count.js 1.66 kB
build/product-reviews-rtl.css 456 B
build/product-reviews.css 455 B
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge-rtl.css 369 B
build/product-sale-badge.css 370 B
build/product-sale-badge.js 673 B
build/product-search-rtl.css 415 B
build/product-search.css 415 B
build/product-sku-frontend.js 1.84 kB
build/product-sku-rtl.css 237 B
build/product-sku.css 237 B
build/product-sku.js 523 B
build/product-stock-indicator-frontend.js 2.02 kB
build/product-stock-indicator-rtl.css 229 B
build/product-stock-indicator.css 229 B
build/product-stock-indicator.js 709 B
build/product-summary-frontend.js 2.18 kB
build/product-summary-rtl.css 546 B
build/product-summary.css 546 B
build/product-summary.js 917 B
build/product-template-rtl.css 418 B
build/product-template.css 418 B
build/product-title-frontend.js 2.21 kB
build/product-title-rtl.css 688 B
build/product-title.css 689 B
build/product-title.js 964 B
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-rtl.css 4.2 kB
build/rating-filter-wrapper-frontend.js 6.63 kB
build/rating-filter-wrapper-rtl.css 4.07 kB
build/rating-filter-wrapper.css 4.07 kB
build/reviews-by-category-rtl.css 1.79 kB
build/reviews-by-category.css 1.79 kB
build/reviews-by-category.js 12 kB
build/reviews-by-product-rtl.css 1.79 kB
build/reviews-by-product.css 1.79 kB
build/reviews-frontend.js 7.07 kB
build/single-product-rtl.css 375 B
build/single-product.css 375 B
build/snackbar-notice-style-rtl.css 672 B
build/snackbar-notice-style.css 671 B
build/stock-filter-frontend.js 21.6 kB
build/stock-filter-rtl.css 4.01 kB
build/stock-filter-wrapper-frontend.js 6.82 kB
build/stock-filter-wrapper-rtl.css 3.88 kB
build/stock-filter-wrapper.css 3.88 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.84 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 8.31 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.28 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.55 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.22 kB
build/vendors--cart-blocks/proceed-to-checkout-style.js 179 B
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.6 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js 5.27 kB
build/vendors--product-add-to-cart-frontend.js 7.52 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css 237 B
build/wc-blocks-classic-template-revert-button-style.css 236 B
build/wc-blocks-classic-template-revert-button.js 1.53 kB
build/wc-blocks-data.js 21.9 kB
build/wc-blocks-editor-style.css 6.44 kB
build/wc-blocks-google-analytics.js 1.55 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.19 kB
build/wc-blocks-rtl.css 2.46 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.63 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks.css 2.46 kB
build/wc-interactivity.js 10.7 kB
build/wc-payment-method-bacs.js 817 B
build/wc-payment-method-cheque.js 813 B
build/wc-payment-method-cod.js 914 B
build/wc-payment-method-paypal.js 852 B
build/wc-settings.js 2.68 kB
build/wc-shipping-method-pickup-location.js 30.4 kB

compressed-size-action

Copy link
Contributor

@tarhi-saad tarhi-saad left a comment

Choose a reason for hiding this comment

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

Thank you, @mikejolley, for working on this PR! 🙌 Everything works as expected! 💯

I have a single recommendation. To maintain consistency and enhance user experience, perhaps we can utilize a placeholder in React for the Order Summary and Order Details Blocks, similar to what we implemented for the Shipping Address, Billing Address, and Downloads Blocks, instead of rendering their editor content from the server. I've made the exact conversion for the Downloads Block in this PR #10606 in the last three commits:

image

@mikejolley
Copy link
Member Author

Thanks @tarhi-saad. I've removed the server side renders and adding localisation. I'm gonna go ahead and merge this into the feature branch and start preparing testing instructions for release.

@mikejolley mikejolley merged commit f1a1a12 into feature/blockify-order-confirmation Sep 1, 2023
@mikejolley mikejolley deleted the add/order-confirmation-styling branch September 1, 2023 11:07
mikejolley added a commit that referenced this pull request Sep 1, 2023
* Add missing heading to order details

* Summary block spacing

* Update css variables

* table styles

* Inherit border styles for cells

* Alignment and address styles

* Add downloads wrapper

* Style controls

* Fix typo

* Update Download Wrapper's Icon

* Fix TS error

* Disable Download Block's server side rendering in the editor

This fixes the loading after each style change from the style controls

* Clean up Downloads render functions

* Fix client side Downloads Block's table border

* Download + Total wrappers and tables styling

* small screen

* Remove server side render for previews

---------

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
mikejolley added a commit that referenced this pull request Sep 19, 2023
* Add missing heading to order details

* Summary block spacing

* Update css variables

* table styles

* Inherit border styles for cells

* Alignment and address styles

* Add downloads wrapper

* Style controls

* Fix typo

* Update Download Wrapper's Icon

* Fix TS error

* Disable Download Block's server side rendering in the editor

This fixes the loading after each style change from the style controls

* Clean up Downloads render functions

* Fix client side Downloads Block's table border

* Download + Total wrappers and tables styling

* small screen

* Remove server side render for previews

---------

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
mikejolley added a commit that referenced this pull request Sep 20, 2023
* Main block types for confirmation

* Initial blocks

* Styling and placeholders

* Make blocks experimental

* Update summary icon

* Add name/description for status block and missing text descriptions in the block.

Closes #10057

* Order confirmation: Convert Order Details Templates to Blocks (#10095)

* Move code from templates into the details block

* Details -> Totals

* Downloads block

* Sample content for downloads block

* Add block icon

* Add conversion template (#10077)

* Update inner block name

* Add default title constant

* Revert "Add default title constant"

This reverts commit 1dd3bbf.

* Add global styles for order confirmation status block (#10164)

* Implement style controls

* Prevent link color spilling over onto wrapper

* Add styles and remove class names

* Remove __experimentalWritingMode

* Add global styles for order confirmation summary block (#10179)

* Styles for summary

* Remove __experimentalWritingMode

* Add table styles for order details (#10185)

* Add table styles for order details

* __experimentalFontWeight

* Add link styles

* Handle preview link styles

* Unauthenticated views for Order Confirmation template (#10414)

* Different views by permission

* check user id matches when logged out

* Add order confirmation wrapper block (#10286)

* Add a heading wrapper block

* Register the BillingWrapper Block server side

* Fix exception 'render_content' error

* Add the Billing Wrapper Block to the template

* Fix wrong block name error

* Fix php error

* Conditionally render Billing Address within the Wrapper

* Fix parent rendering

* Clean up code (remove billing address from the template)

* Update titles, descriptions, and icons of the billing Block and inner block

* Fix broken block by removing the "parent" keyword

* Use a user-friendly title and description for the Billing Wrapper

* Update Billing Wrapper Block's title case

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Fix PHP failing unit test

---------

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Remove "thanks" for authenticated page

* Introduce shipping wrapper based on billing wrapper

Closes #10053

* Order confirmation block: Verify email address for guest customers (#10567)

* Add verify step for guest orders

* Render content to pass through block content

* Revert package changes

* Customer orders cannot use email to verify

* Add style controls for order shipping and billing address blocks (#10633)

* Order confirmation block styling (#10780)

* Add missing heading to order details

* Summary block spacing

* Update css variables

* table styles

* Inherit border styles for cells

* Alignment and address styles

* Add downloads wrapper

* Style controls

* Fix typo

* Update Download Wrapper's Icon

* Fix TS error

* Disable Download Block's server side rendering in the editor

This fixes the loading after each style change from the style controls

* Clean up Downloads render functions

* Fix client side Downloads Block's table border

* Download + Total wrappers and tables styling

* small screen

* Remove server side render for previews

---------

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>

* Shorten template description

* Update test address data

* Avoid leaking order key in permission form

* Remove todo

* Make email form required.

* Remove edit page link

* Remove empty columns from address wrapper

* Remove IIFE

* typo

* Update description to mention billing

* Adjust link scss

* Fix wrapper markup and spacing controls

* Add link preview in editor

* Add initial E2E setup for the Order Confirmation Block (#10840)

* Fix WC_DateTime check

* Move form outside of block markup

* Add additional information block (#10842)

* Add block which contains hooks

* Use skeleton for placeholder instead of illustration

* Remove duplicate methods

* Remove duplicate align tag

* Update meta styles

* Tests for order confirmation conditional blocks (#10972)

* Add tests for conditional blocks

* Move setup into test

* Add E2E to the the Order Confirmation Block (#10863)

* Add editor util functions

* Update editor template E2E test

* Add the "exact" property for consistency

* Skip test

Can't get the element in the page. More investigation needed! Skipping
for now.

* Fix "transformIntoBlocks" logic

* Add tests for logged in user

* Fix "beforeAll" config

* Confirm downloads section is visible when logged in

* Create "verifyOrderConfirmationDetails" util function

* Add logged in test case

* Add Guest user test case

* Fix editor e2e testing

* Apply a proper teardown

* Fix failing tests after logout

* Ensure we are logged in before visiting the editor

* Ensure to have shipping selected

* Wait for changes to be saved on the editor

* Ensure shipping options is selected

* Remove comment

* Ensure we are logged in before going to the admin page

* Mark the Order Confirmation as a side effect test

* OrderConfirmation blocks are not experimental

* resolve merge conflict

* Revert package lock changes

* Fix enqueue_assets

* Fix CSS 404s

* Make template tests more robust

* Fix page URL for default confirmation page

* Try afterEach to log back in

* Skip guest/logout use cases

Login out causes other tests to fail. We will implement these case when
the multiple sign in roles are introduced in the codebase.

* Remove tests requiring login out & add comments

* Remove unused util functions

* Hide confirmation blocks from post editor

---------

Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
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. skip-changelog PRs that you don't want to appear in the changelog. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants