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

Add global styles for order confirmation status block #10164

Conversation

mikejolley
Copy link
Member

@mikejolley mikejolley commented Jul 11, 2023

Adds styles for the status block. This also removes legacy classnames so the new styles can apply without conflicts.

Fixes #10117

Screenshots

Screenshot 2023-07-11 at 13 06 20
Screenshot 2023-07-11 at 13 06 14

Testing

Automated Tests

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

User Facing Testing

  1. Go to Appearance > Editor > Templates > Order Confirmation
  2. Select the "status" block
  3. In the inspector, adjust styles (color, type, padding) and save
  4. Go to the frontend and place a new order
  5. Confirm the confirmation page matches your selected styling
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@mikejolley mikejolley added type: new block Applied to work that introduces a new block (typically used on an epic issue). block: checkout Issues related to the checkout block. labels Jul 11, 2023
@mikejolley mikejolley self-assigned this Jul 11, 2023
@woocommercebot woocommercebot requested review from a team and nielslange and removed request for a team July 11, 2023 12:46
@mikejolley mikejolley changed the base branch from trunk to feature/blockify-order-confirmation July 11, 2023 12:46
@woocommerce woocommerce deleted a comment from github-actions bot Jul 11, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jul 11, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-10164.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-collection.js wp-hooks 🎉
order-confirmation-summary.js wp-block-editor, wp-blocks, wp-element, wp-polyfill, wp-primitives, wp-server-side-render ⚠️
order-confirmation-totals.js wp-block-editor, wp-blocks, wp-element, wp-polyfill, wp-primitives, wp-server-side-render ⚠️
order-confirmation-downloads.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-polyfill, wp-primitives, wp-server-side-render ⚠️
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-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: 473
  • Total errors: 2246

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

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

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

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

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

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

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

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

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

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

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jul 11, 2023

Size Change: +199 B (0%)

Total Size: 1.37 MB

Filename Size Change
build/order-confirmation-status-rtl.css 268 B +29 B (+12%) ⚠️
build/order-confirmation-status.css 269 B +31 B (+13%) ⚠️
build/order-confirmation-status.js 1.54 kB +139 B (+10%) ⚠️
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.7 kB
build/active-filters-rtl.css 2.02 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--3d5b804b-style.js 959 B
build/active-filters-wrapper-frontend.js 7.64 kB
build/active-filters-wrapper-rtl.css 1.88 kB
build/active-filters-wrapper.css 1.88 kB
build/active-filters.css 2.02 kB
build/active-filters.js 7.59 kB
build/all-products-frontend.js 12.2 kB
build/all-products-rtl.css 4.18 kB
build/all-products.css 4.18 kB
build/all-products.js 41.2 kB
build/all-reviews-rtl.css 1.84 kB
build/all-reviews.css 1.84 kB
build/all-reviews.js 7.87 kB
build/attribute-filter-frontend.js 23.1 kB
build/attribute-filter-rtl.css 4.19 kB
build/attribute-filter-wrapper-frontend.js 7.79 kB
build/attribute-filter-wrapper-rtl.css 4.06 kB
build/attribute-filter-wrapper.css 4.06 kB
build/attribute-filter.css 4.19 kB
build/attribute-filter.js 13.4 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs-rtl.css 253 B
build/breadcrumbs.css 253 B
build/breadcrumbs.js 2.14 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB
build/cart-blocks/cart-accepted-payment-methods-style.js 138 B
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.91 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.83 kB
build/cart-blocks/cart-cross-sells-products-style.js 137 B
build/cart-blocks/cart-cross-sells-style.js 253 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 721 B
build/cart-blocks/cart-express-payment-style.js 137 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-items-style.js 228 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.47 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-line-items-style.js 138 B
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB
build/cart-blocks/cart-order-summary-style.js 319 B
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/cart-totals-style.js 238 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/empty-cart-style.js 340 B
build/cart-blocks/filled-cart-frontend.js 657 B
build/cart-blocks/filled-cart-style.js 312 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-coupon-form-style.js 136 B
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-discount-style.js 137 B
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-fee-style.js 137 B
build/cart-blocks/order-summary-heading-frontend.js 334 B
build/cart-blocks/order-summary-heading-style.js 335 B
build/cart-blocks/order-summary-shipping-frontend.js 17 kB
build/cart-blocks/order-summary-shipping-style.js 176 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-subtotal-style.js 136 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/order-summary-taxes-style.js 177 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.43 kB
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB
build/cart-frontend.js 29.9 kB
build/cart-rtl.css 9.6 kB
build/cart.css 9.59 kB
build/cart.js 45.4 kB
build/catalog-sorting-rtl.css 277 B
build/catalog-sorting.css 276 B
build/catalog-sorting.js 1.71 kB
build/checkout-blocks/actions--checkout-blocks/terms-style.js 487 B
build/checkout-blocks/actions-frontend.js 1.88 kB
build/checkout-blocks/actions-style.js 683 B
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/billing-address-style.js 530 B
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/contact-information-style.js 610 B
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 318 B
build/checkout-blocks/fields-style.js 260 B
build/checkout-blocks/order-note-frontend.js 1.12 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.76 kB
build/checkout-blocks/order-summary-cart-items-style.js 136 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-coupon-form-style.js 136 B
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-discount-style.js 136 B
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-fee-style.js 137 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-shipping-style.js 137 B
build/checkout-blocks/order-summary-style.js 318 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-subtotal-style.js 136 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/order-summary-taxes-style.js 177 B
build/checkout-blocks/payment-frontend.js 9.28 kB
build/checkout-blocks/payment-style.js 459 B
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/checkout-blocks/pickup-options-style.js 443 B
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-address-style.js 477 B
build/checkout-blocks/shipping-method-frontend.js 2.62 kB
build/checkout-blocks/shipping-method-style.js 1.37 kB
build/checkout-blocks/shipping-methods-frontend.js 6.4 kB
build/checkout-blocks/shipping-methods-style.js 418 B
build/checkout-blocks/terms-frontend.js 1.55 kB
build/checkout-blocks/terms-style.js 676 B
build/checkout-blocks/totals-frontend.js 348 B
build/checkout-blocks/totals-style.js 285 B
build/checkout-frontend.js 31.8 kB
build/checkout-rtl.css 9.23 kB
build/checkout.css 9.22 kB
build/checkout.js 48 kB
build/customer-account-rtl.css 406 B
build/customer-account.css 406 B
build/customer-account.js 3.19 kB
build/featured-category-rtl.css 986 B
build/featured-category.css 987 B
build/featured-category.js 15.1 kB
build/featured-product-rtl.css 1.03 kB
build/featured-product.css 1.03 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14.2 kB
build/filter-wrapper-rtl.css 399 B
build/filter-wrapper.css 397 B
build/filter-wrapper.js 2.4 kB
build/handpicked-products.js 8.08 kB
build/legacy-template-rtl.css 258 B
build/legacy-template.css 257 B
build/legacy-template.js 9.02 kB
build/mini-cart-component-frontend.js 30.8 kB
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js 293 B
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/cart-button-style.js 386 B
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB
build/mini-cart-contents-block/checkout-button-style.js 468 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/empty-cart-style.js 359 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/filled-cart-style.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.83 kB
build/mini-cart-contents-block/footer-rtl.css 419 B
build/mini-cart-contents-block/footer-style.js 2.4 kB
build/mini-cart-contents-block/footer.css 418 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/items-style.js 237 B
build/mini-cart-contents-block/products-table--product-summary-style.js 737 B
build/mini-cart-contents-block/products-table-frontend.js 588 B
build/mini-cart-contents-block/products-table-rtl.css 2.19 kB
build/mini-cart-contents-block/products-table-style.js 5.1 kB
build/mini-cart-contents-block/products-table.css 2.18 kB
build/mini-cart-contents-block/shopping-button-frontend.js 531 B
build/mini-cart-contents-block/shopping-button-style.js 393 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB
build/mini-cart-contents-block/title-items-counter-style.js 300 B
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB
build/mini-cart-contents-block/title-label-style.js 301 B
build/mini-cart-contents-block/title-style.js 443 B
build/mini-cart-contents-rtl.css 2.73 kB
build/mini-cart-contents.css 2.73 kB
build/mini-cart-contents.js 18.1 kB
build/mini-cart-frontend.js 2.84 kB
build/mini-cart-rtl.css 2.61 kB
build/mini-cart.css 2.61 kB
build/mini-cart.js 5.93 kB
build/order-confirmation-billing-address-rtl.css 270 B
build/order-confirmation-billing-address.css 269 B
build/order-confirmation-billing-address.js 1.67 kB
build/order-confirmation-downloads-rtl.css 349 B
build/order-confirmation-downloads.css 349 B
build/order-confirmation-downloads.js 1.39 kB
build/order-confirmation-shipping-address-rtl.css 271 B
build/order-confirmation-shipping-address.css 271 B
build/order-confirmation-shipping-address.js 1.67 kB
build/order-confirmation-summary-rtl.css 345 B
build/order-confirmation-summary.css 344 B
build/order-confirmation-summary.js 1.36 kB
build/order-confirmation-totals-rtl.css 349 B
build/order-confirmation-totals.css 349 B
build/order-confirmation-totals.js 1.68 kB
build/packages-style-rtl.css 3.59 kB
build/packages-style.css 3.59 kB
build/price-filter-frontend.js 14.7 kB
build/price-filter-rtl.css 2.71 kB
build/price-filter-wrapper-frontend.js 6.85 kB
build/price-filter-wrapper-rtl.css 2.56 kB
build/price-filter-wrapper.css 2.56 kB
build/price-filter.css 2.71 kB
build/price-filter.js 8.66 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-rating-s--92e2d51d.js 271 B
build/product-add-to-cart--product-button--product-image--product-rating--product-rating-stars--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.53 kB
build/product-add-to-cart-rtl.css 1.39 kB
build/product-add-to-cart.css 1.4 kB
build/product-add-to-cart.js 8.84 kB
build/product-best-sellers.js 8.43 kB
build/product-button--product-image--product-price--product-rating--product-rating-stars--product-sale-ba--4e6a8b3c.js 955 B
build/product-button-frontend.js 2.67 kB
build/product-button-rtl.css 889 B
build/product-button.css 891 B
build/product-button.js 3.97 kB
build/product-categories-rtl.css 671 B
build/product-categories.css 670 B
build/product-categories.js 2.71 kB
build/product-category.js 9.43 kB
build/product-collection.js 12.9 kB
build/product-details-rtl.css 413 B
build/product-details.css 410 B
build/product-gallery-large-image-rtl.css 314 B
build/product-gallery-large-image.css 313 B
build/product-gallery-large-image.js 2.01 kB
build/product-gallery.js 2.29 kB
build/product-image-frontend.js 2.71 kB
build/product-image-gallery-rtl.css 322 B
build/product-image-gallery.css 322 B
build/product-image-rtl.css 948 B
build/product-image.css 946 B
build/product-image.js 4.21 kB
build/product-new.js 8.72 kB
build/product-on-sale.js 8.73 kB
build/product-price-frontend.js 231 B
build/product-price-rtl.css 696 B
build/product-price.css 695 B
build/product-price.js 1.67 kB
build/product-query-rtl.css 367 B
build/product-query.css 365 B
build/product-query.js 12 kB
build/product-rating-frontend.js 2.35 kB
build/product-rating-rtl.css 262 B
build/product-rating-stars-frontend.js 2.24 kB
build/product-rating-stars-rtl.css 904 B
build/product-rating-stars.css 906 B
build/product-rating-stars.js 940 B
build/product-rating.css 262 B
build/product-rating.js 1.04 kB
build/product-results-count-rtl.css 248 B
build/product-results-count.css 247 B
build/product-results-count.js 1.66 kB
build/product-reviews-rtl.css 474 B
build/product-reviews.css 473 B
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge-rtl.css 392 B
build/product-sale-badge.css 389 B
build/product-sale-badge.js 667 B
build/product-search-rtl.css 435 B
build/product-search.css 434 B
build/product-search.js 2.64 kB
build/product-sku-frontend.js 1.85 kB
build/product-sku-rtl.css 258 B
build/product-sku.css 258 B
build/product-sku.js 535 B
build/product-stock-indicator-frontend.js 2.04 kB
build/product-stock-indicator-rtl.css 250 B
build/product-stock-indicator.css 250 B
build/product-stock-indicator.js 732 B
build/product-summary-frontend.js 2.26 kB
build/product-summary-rtl.css 571 B
build/product-summary.css 572 B
build/product-summary.js 1.01 kB
build/product-tag.js 8.92 kB
build/product-template-rtl.css 439 B
build/product-template.css 437 B
build/product-template.js 3.35 kB
build/product-title-frontend.js 2.22 kB
build/product-title-rtl.css 718 B
build/product-title.css 719 B
build/product-title.js 3.66 kB
build/product-top-rated.js 8.98 kB
build/products-by-attribute.js 9.77 kB
build/rating-filter-frontend.js 21.5 kB
build/rating-filter-rtl.css 4.24 kB
build/rating-filter-wrapper-frontend.js 6.3 kB
build/rating-filter-wrapper-rtl.css 4.11 kB
build/rating-filter-wrapper.css 4.11 kB
build/rating-filter.css 4.24 kB
build/rating-filter.js 6.99 kB
build/reviews-by-category-rtl.css 1.84 kB
build/reviews-by-category.css 1.84 kB
build/reviews-by-category.js 12.2 kB
build/reviews-by-product-rtl.css 1.84 kB
build/reviews-by-product.css 1.84 kB
build/reviews-by-product.js 13.3 kB
build/reviews-frontend.js 7.17 kB
build/single-product-rtl.css 399 B
build/single-product.css 397 B
build/single-product.js 11.2 kB
build/stock-filter-frontend.js 21.7 kB
build/stock-filter-rtl.css 4.06 kB
build/stock-filter-wrapper-frontend.js 6.55 kB
build/stock-filter-wrapper-rtl.css 3.93 kB
build/stock-filter-wrapper.css 3.93 kB
build/stock-filter.css 4.06 kB
build/stock-filter.js 7.73 kB
build/store-notices.js 1.69 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--6436fd83-style.js 606 B
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.83 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB
build/vendors--attribute-filter-wrapper-frontend.js 5.11 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.57 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/proceed-to-checkout-style.js 179 B
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB
build/vendors--checkout-blocks/shipping-method-style.js 11.8 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js 5.27 kB
build/vendors--mini-cart-contents-block/products-table-style.js 3.16 kB
build/vendors--price-filter-wrapper-frontend.js 2.19 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.4 kB
build/wc-blocks-editor-style-rtl.css 6.17 kB
build/wc-blocks-editor-style.css 6.17 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-rtl.css 2.54 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-vendors.js 65.6 kB
build/wc-blocks.css 2.54 kB
build/wc-blocks.js 3.75 kB
build/wc-interactivity.js 10.4 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 30.4 kB

compressed-size-action

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. Overall, the PR looks good. I just added a few questions about sections that are unclear to me respectively that don't seem to work as expected.

@mikejolley
Copy link
Member Author

@nielslange answered above. Could you approve if happy?

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.

All good now, @mikejolley! Let's ⛴️ this improvement. 🙌

@github-actions github-actions bot added this to the 10.7.0 milestone Jul 12, 2023
@mikejolley mikejolley merged commit a9ebf37 into feature/blockify-order-confirmation Jul 13, 2023
@mikejolley mikejolley deleted the add/global-styles-order-confirmation-status-10117 branch July 13, 2023 09:45
@ralucaStan
Copy link
Contributor

@mikejolley this PR is missing a changelog and is up for a release next week

@mikejolley
Copy link
Member Author

@ralucaStan No it's not. Its marked experimental and did not merge to trunk.

@ralucaStan
Copy link
Contributor

My bad, I did not notice the feature branch.

@mikejolley mikejolley added the skip-changelog PRs that you don't want to appear in the changelog. label Jul 14, 2023
mikejolley added a commit that referenced this pull request Jul 18, 2023
* Implement style controls

* Prevent link color spilling over onto wrapper

* Add styles and remove class names

* Remove __experimentalWritingMode
mikejolley added a commit that referenced this pull request Aug 14, 2023
* Implement style controls

* Prevent link color spilling over onto wrapper

* Add styles and remove class names

* Remove __experimentalWritingMode
tarhi-saad pushed a commit that referenced this pull request Aug 25, 2023
* Implement style controls

* Prevent link color spilling over onto wrapper

* Add styles and remove class names

* Remove __experimentalWritingMode
mikejolley added a commit that referenced this pull request Sep 1, 2023
* Implement style controls

* Prevent link color spilling over onto wrapper

* Add styles and remove class names

* Remove __experimentalWritingMode
mikejolley added a commit that referenced this pull request Sep 19, 2023
* Implement style controls

* Prevent link color spilling over onto wrapper

* Add styles and remove class names

* Remove __experimentalWritingMode
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: new block Applied to work that introduces a new block (typically used on an epic issue).
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Global Styles for Order Confirmation Status Block
3 participants