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

Cart and Checkout Page Migration: Inherit Page template and fix rendering #10375

Merged
merged 2 commits into from
Jul 27, 2023

Conversation

mikejolley
Copy link
Member

@mikejolley mikejolley commented Jul 26, 2023

This PR resolves the styling issues reporting in #10357, and the template migration issue reported in #10181. Both are related to how content is migrated, and how content renders after migration.

@wavvves @ralucaStan

Issue causes

Refs:

Fixes #10357
Fixes #10181

Testing

User Facing Testing

To setup your environment for testing:

  1. Switch to a non-block theme, such as Twenty Nineteen
  2. Edit the Cart Page. Ensure there is some content inside, as well as a shortcode block containing [woocommerce_cart]
  3. Delete WP options which may have been added already due to a past migration called has_migrated_cart and has_migrated_checkout. If you're using Local WP, you can use the Adminer tool it provides to access your DB.

Testing steps:

  1. Switch from your non-block theme to Twenty Twenty Three theme
  2. Visit the cart page on the frontend
  3. Ensure the layout of your cart page matches other pages, and that the styles look correct, for example, the "proceed to checkout" button should have no extra padding caused by an erroneous <br> tag.
  4. Repeat for the Checkout page.
  5. Edit the cart page. You'll be redirected to the template editor.
  6. Replace the shortcode block with a real Cart Block and save.
  7. Go back to the frontend cart page and see the block working.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Not needed as this feature has not landed yet.

@mikejolley mikejolley added this to the 10.6.2 milestone Jul 26, 2023
@mikejolley mikejolley self-assigned this Jul 26, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jul 26, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-10375.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
reviews-frontend.js wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
attribute-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
cart-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
checkout-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
filter-wrapper-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning ⚠️
mini-cart-frontend.js wc-price-format, wc-settings, wp-i18n, wp-polyfill ⚠️
price-filter-frontend.js react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
stock-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️

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

TypeScript Errors Report

  • Files with errors: 470
  • Total errors: 2246

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jul 26, 2023

Size Change: +574 B (0%)

Total Size: 1.34 MB

Filename Size Change
build/active-filters.js 7.47 kB +10 B (0%)
build/all-products.js 41.1 kB -5 B (0%)
build/all-reviews.js 7.75 kB +1 B (0%)
build/attribute-filter.js 13 kB -5 B (0%)
build/breadcrumbs.js 2.15 kB +1 B (0%)
build/cart-blocks/cart-accepted-payment-methods-style.js 138 B +1 B (+1%)
build/cart-blocks/cart-cross-sells-products-style.js 137 B -1 B (-1%)
build/cart-blocks/cart-items-style.js 218 B -1 B (0%)
build/cart-blocks/cart-line-items-style.js 137 B +1 B (+1%)
build/cart-blocks/empty-cart-style.js 336 B +1 B (0%)
build/cart-blocks/filled-cart-style.js 309 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 137 B +1 B (+1%)
build/cart-blocks/order-summary-fee-style.js 136 B -1 B (-1%)
build/cart-blocks/order-summary-shipping-style.js 177 B -1 B (-1%)
build/cart-blocks/order-summary-subtotal-style.js 136 B -1 B (-1%)
build/cart-blocks/order-summary-taxes-style.js 178 B +2 B (+1%)
build/cart-blocks/proceed-to-checkout-style.js 1.09 kB +1 B (0%)
build/cart-frontend.js 29.6 kB +6 B (0%)
build/cart.js 44.8 kB +212 B (0%)
build/catalog-sorting.js 1.71 kB +2 B (0%)
build/checkout-blocks/actions--checkout-blocks/terms-style.js 486 B +1 B (0%)
build/checkout-blocks/actions-style.js 682 B -1 B (0%)
build/checkout-blocks/billing-address-style.js 530 B -1 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.11 kB +1 B (0%)
build/checkout-blocks/order-summary-coupon-form-style.js 137 B +1 B (+1%)
build/checkout-blocks/order-summary-shipping-style.js 136 B -1 B (-1%)
build/checkout-blocks/order-summary-style.js 317 B -1 B (0%)
build/checkout-blocks/order-summary-taxes-style.js 177 B +1 B (+1%)
build/checkout-blocks/pickup-options-style.js 438 B -2 B (0%)
build/checkout-blocks/shipping-address-style.js 475 B -1 B (0%)
build/checkout-blocks/shipping-methods-style.js 415 B -1 B (0%)
build/checkout-blocks/terms-style.js 672 B +1 B (0%)
build/checkout-frontend.js 31.5 kB +5 B (0%)
build/checkout.js 47.4 kB +213 B (0%)
build/customer-account.js 3.17 kB -1 B (0%)
build/featured-category.js 14.7 kB -5 B (0%)
build/filter-wrapper.js 2.38 kB +1 B (0%)
build/handpicked-products.js 7.95 kB +1 B (0%)
build/legacy-template.js 8.06 kB -4 B (0%)
build/mini-cart-contents-block/cart-button-style.js 382 B +1 B (0%)
build/mini-cart-contents-block/checkout-button-style.js 464 B +1 B (0%)
build/mini-cart-contents-block/footer-style.js 2.35 kB -2 B (0%)
build/mini-cart-contents-block/products-table-style.js 5.31 kB +1 B (0%)
build/mini-cart-contents-block/title-style.js 437 B -2 B (0%)
build/mini-cart-contents.js 17.5 kB -4 B (0%)
build/mini-cart.js 6.32 kB -1 B (0%)
build/price-filter.js 8.48 kB +5 B (0%)
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js 271 B +2 B (+1%)
build/product-add-to-cart.js 8.5 kB -2 B (0%)
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js 925 B -2 B (0%)
build/product-button.js 3.86 kB +4 B (0%)
build/product-categories.js 2.71 kB +2 B (0%)
build/product-category.js 9.26 kB -1 B (0%)
build/product-collection.js 13.8 kB +1 B (0%)
build/product-gallery-large-image.js 2.01 kB +1 B (0%)
build/product-gallery.js 2.3 kB -2 B (0%)
build/product-image.js 1.5 kB -1 B (0%)
build/product-new.js 8.57 kB +4 B (0%)
build/product-on-sale.js 8.57 kB -1 B (0%)
build/product-query.js 12.8 kB +75 B (+1%)
build/product-rating-stars.js 934 B +1 B (0%)
build/product-sale-badge.js 666 B +1 B (0%)
build/product-search.js 2.62 kB -1 B (0%)
build/product-stock-indicator.js 706 B -1 B (0%)
build/product-summary.js 910 B -2 B (0%)
build/product-template.js 3.41 kB +79 B (+2%)
build/product-title.js 956 B +1 B (0%)
build/product-top-rated.js 8.83 kB +1 B (0%)
build/rating-filter.js 6.87 kB +4 B (0%)
build/reviews-by-product.js 13.1 kB -2 B (0%)
build/single-product.js 11.2 kB -14 B (0%)
build/vendors--cart-blocks/proceed-to-checkout-style.js 179 B +1 B (+1%)
build/vendors--checkout-blocks/shipping-method-style.js 11.7 kB -1 B (0%)
build/vendors--mini-cart-contents-block/products-table-style.js 3.16 kB -1 B (0%)
build/wc-blocks.js 3.7 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.52 kB
build/active-filters-rtl.css 1.99 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js 926 B
build/active-filters-wrapper-frontend.js 7.54 kB
build/active-filters-wrapper-rtl.css 1.85 kB
build/active-filters-wrapper.css 1.85 kB
build/active-filters.css 1.99 kB
build/add-to-cart-form-rtl.css 355 B
build/add-to-cart-form.css 354 B
build/all-products-frontend.js 9.89 kB
build/all-products-rtl.css 4.19 kB
build/all-products.css 4.19 kB
build/all-reviews-rtl.css 1.79 kB
build/all-reviews.css 1.79 kB
build/attribute-filter-frontend.js 22.8 kB
build/attribute-filter-rtl.css 4.14 kB
build/attribute-filter-wrapper-frontend.js 7.56 kB
build/attribute-filter-wrapper-rtl.css 4.01 kB
build/attribute-filter-wrapper.css 4.01 kB
build/attribute-filter.css 4.14 kB
build/blocks-checkout.js 35 kB
build/breadcrumbs-rtl.css 232 B
build/breadcrumbs.css 232 B
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.33 kB
build/cart-blocks/cart-cross-sells-frontend.js 249 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.88 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.69 kB
build/cart-blocks/cart-cross-sells-style.js 250 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.09 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 283 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.33 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-order-summary-style.js 318 B
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 342 B
build/cart-blocks/filled-cart-frontend.js 651 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.56 kB
build/cart-blocks/order-summary-discount-frontend.js 2.04 kB
build/cart-blocks/order-summary-fee-frontend.js 270 B
build/cart-blocks/order-summary-heading-frontend.js 324 B
build/cart-blocks/order-summary-heading-style.js 325 B
build/cart-blocks/order-summary-shipping-frontend.js 17 kB
build/cart-blocks/order-summary-subtotal-frontend.js 271 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.41 kB
build/cart-rtl.css 9.48 kB
build/cart.css 9.46 kB
build/catalog-sorting-rtl.css 256 B
build/catalog-sorting.css 256 B
build/checkout-blocks/actions-frontend.js 1.8 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.64 kB
build/checkout-blocks/billing-address-frontend.js 1.17 kB
build/checkout-blocks/contact-information-frontend.js 2.01 kB
build/checkout-blocks/contact-information-style.js 605 B
build/checkout-blocks/fields-frontend.js 300 B
build/checkout-blocks/fields-style.js 249 B
build/checkout-blocks/order-note-frontend.js 1.09 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.62 kB
build/checkout-blocks/order-summary-cart-items-style.js 137 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.71 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.21 kB
build/checkout-blocks/order-summary-discount-style.js 137 B
build/checkout-blocks/order-summary-fee-frontend.js 273 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 16.9 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 271 B
build/checkout-blocks/order-summary-subtotal-style.js 137 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 9.2 kB
build/checkout-blocks/payment-style.js 460 B
build/checkout-blocks/pickup-options-frontend.js 4.81 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.57 kB
build/checkout-blocks/shipping-method-style.js 1.34 kB
build/checkout-blocks/shipping-methods-frontend.js 6.36 kB
build/checkout-blocks/terms-frontend.js 1.51 kB
build/checkout-blocks/totals-frontend.js 330 B
build/checkout-blocks/totals-style.js 275 B
build/checkout-rtl.css 9.14 kB
build/checkout.css 9.13 kB
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/featured-product.js 14.9 kB
build/filter-wrapper-frontend.js 14.2 kB
build/filter-wrapper-rtl.css 375 B
build/filter-wrapper.css 375 B
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 249 B
build/mini-cart-contents-block/cart-button-frontend.js 1.69 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.77 kB
build/mini-cart-contents-block/empty-cart-frontend.js 357 B
build/mini-cart-contents-block/empty-cart-style.js 355 B
build/mini-cart-contents-block/filled-cart-frontend.js 266 B
build/mini-cart-contents-block/filled-cart-style.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.76 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/items-style.js 229 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 543 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 488 B
build/mini-cart-contents-block/shopping-button-style.js 396 B
build/mini-cart-contents-block/title-frontend.js 1.85 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.57 kB
build/mini-cart-contents-block/title-items-counter-style.js 301 B
build/mini-cart-contents-block/title-label-frontend.js 1.51 kB
build/mini-cart-contents-block/title-label-style.js 301 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-rtl.css 2.56 kB
build/mini-cart.css 2.56 kB
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 6.64 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-button--product-rating--product-rating-counter--product-rating-stars.js 151 B
build/product-add-to-cart--product-image--product-title.js 315 B
build/product-add-to-cart-frontend.js 8.45 kB
build/product-add-to-cart-rtl.css 1.35 kB
build/product-add-to-cart.css 1.36 kB
build/product-average-rating-frontend.js 1.7 kB
build/product-average-rating.js 397 B
build/product-best-sellers.js 8.29 kB
build/product-button-frontend.js 4.85 kB
build/product-button-rtl.css 864 B
build/product-button.css 863 B
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-image-frontend.js 2.64 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.65 kB
build/product-query-rtl.css 347 B
build/product-query.css 347 B
build/product-rating-counter-frontend.js 2 kB
build/product-rating-counter.js 686 B
build/product-rating-frontend.js 2.34 kB
build/product-rating-rtl.css 244 B
build/product-rating-stars-frontend.js 2.24 kB
build/product-rating-stars-rtl.css 895 B
build/product-rating-stars.css 897 B
build/product-rating.css 244 B
build/product-rating.js 1.03 kB
build/product-results-count-rtl.css 228 B
build/product-results-count.css 228 B
build/product-results-count.js 1.67 kB
build/product-reviews-rtl.css 456 B
build/product-reviews.css 455 B
build/product-sale-badge-frontend.js 1.79 kB
build/product-sale-badge-rtl.css 369 B
build/product-sale-badge.css 370 B
build/product-search-rtl.css 415 B
build/product-search.css 415 B
build/product-sku-frontend.js 1.83 kB
build/product-sku-rtl.css 237 B
build/product-sku.css 237 B
build/product-sku.js 519 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-summary-frontend.js 2.17 kB
build/product-summary-rtl.css 546 B
build/product-summary.css 546 B
build/product-tag.js 8.75 kB
build/product-template-rtl.css 418 B
build/product-template.css 418 B
build/product-title-frontend.js 2.2 kB
build/product-title-rtl.css 688 B
build/product-title.css 689 B
build/products-by-attribute.js 9.61 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-rtl.css 4.2 kB
build/rating-filter-wrapper-frontend.js 6.18 kB
build/rating-filter-wrapper-rtl.css 4.07 kB
build/rating-filter-wrapper.css 4.07 kB
build/rating-filter.css 4.19 kB
build/reviews-by-category-rtl.css 1.79 kB
build/reviews-by-category.css 1.79 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product-rtl.css 1.79 kB
build/reviews-by-product.css 1.79 kB
build/reviews-frontend.js 7.04 kB
build/single-product-rtl.css 375 B
build/single-product.css 375 B
build/stock-filter-frontend.js 21.6 kB
build/stock-filter-rtl.css 4.01 kB
build/stock-filter-wrapper-frontend.js 6.38 kB
build/stock-filter-wrapper-rtl.css 3.88 kB
build/stock-filter-wrapper.css 3.88 kB
build/stock-filter.css 4.01 kB
build/stock-filter.js 7.57 kB
build/store-notices.js 1.69 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js 604 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.19 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--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--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js 5.27 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.35 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 21.7 kB
build/wc-blocks-editor-style-rtl.css 6.33 kB
build/wc-blocks-editor-style.css 6.34 kB
build/wc-blocks-google-analytics.js 1.54 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.18 kB
build/wc-blocks-rtl.css 2.51 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.62 kB
build/wc-blocks-vendors.js 65.4 kB
build/wc-blocks.css 2.51 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 908 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.57 kB
build/wc-shipping-method-pickup-location.js 30.4 kB

compressed-size-action

@wavvves
Copy link
Contributor

wavvves commented Jul 27, 2023

Nice find @mikejolley, I tested it and I works ok, I'm approving this if you make it ready 👍🏼

There is another styling issue regarding the content's container width that happens on migration, and makes the cart/checkout narrower on templates than on pages:

Page:
image

Template:
image

For TT3 for example, the width is a calculation, but the template defaults at 650px. This can be edited and fixed by the merchant here:
image

Do you think this should be tackled along this fix, or should it be tackled along the other migration issue later? Both can be fixed manually by the merchant so urgency is lower than this one.

@alexflorisca
Copy link
Member

I tried to reproduce this but I couldn't, even after following your steps in #10357 (comment). Since Paulo has verified it, I'll assume I'm missing something but I won't spend more time on trying to figure it out.

@mikejolley mikejolley added block: cart Issues related to the cart block. block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. focus: template Related to API powering block template functionality in the Site Editor labels Jul 27, 2023
@mikejolley mikejolley marked this pull request as ready for review July 27, 2023 11:23
@woocommercebot woocommercebot requested review from a team and alexflorisca and removed request for a team July 27, 2023 11:23
$settings['original_render_callback'] = $settings['render_callback'];
$settings['render_callback'] = function( $attributes, $content ) use ( $settings ) {
// The shortcode has already been rendered, so look for the cart/checkout HTML.
if ( strstr( $content, 'woocommerce-cart-form' ) || strstr( $content, 'woocommerce-checkout-form' ) ) {
Copy link
Member Author

Choose a reason for hiding this comment

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

It's checking for the classnames used by the cart/checkout forms so as only to target those shortcodes.

return $content;
}

$render_callback = $settings['original_render_callback'];
Copy link
Member Author

Choose a reason for hiding this comment

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

Falls back to original renderer for other shortcodes.


if ( $existing_page_template && ! empty( $existing_page_template->content ) ) {
// Massage the original content into something we can use. Replace post content with a group block.
$pattern = '/(<!--\s*)wp:post-content(.*?)(\/-->)/';
Copy link
Member Author

Choose a reason for hiding this comment

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

Replaces the original wp:post-content block with the actual page content, wrapped in a group. Layout props are inherited.

@mikejolley mikejolley changed the title [Draft] Change shortcode block render callback Cart and Checkout Page Migration — inherit Page template and fix rendering Jul 27, 2023
@mikejolley mikejolley changed the title Cart and Checkout Page Migration — inherit Page template and fix rendering Cart and Checkout Page Migration: Inherit Page template and fix rendering Jul 27, 2023
@wavvves wavvves self-requested a review July 27, 2023 12:10
Copy link
Contributor

@ralucaStan ralucaStan left a comment

Choose a reason for hiding this comment

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

Checkout and Cart shortcodes are migrated as expected.

I noticed some issues with other shortcodes tho, but we should not be the ones fixing those. The issue should be fixed upstream. I'm just sharing my findings in this comments.

Approving the PR.

Great work @mikejolley . Awesome that you also fixed the template parts bug

Products sale shortcode
Screenshot 2023-07-27 at 15 05 02

products sale shortcode migrated
Screenshot 2023-07-27 at 15 04 54

@mikejolley mikejolley merged commit a8b0adc into trunk Jul 27, 2023
40 checks passed
@mikejolley mikejolley deleted the fix/shortcode-rendering-in-templates branch July 27, 2023 12:43
gigitux pushed a commit that referenced this pull request Jul 31, 2023
…ring (#10375)

* Change shortcode block render callback

* Inherit template from original "page" template
gigitux added a commit that referenced this pull request Jul 31, 2023
* Fix: WooCommerce Blocks causing malfunction of the navigation block on WordPress 6.3 (#10388)

* Make sure the revert button is registered and enqueued for usage exclusively in the site editor.

* Register and enqueue the styles for the revert button.

* Rename the files.

* Revert "Rename the file renames."

This reverts commit c0330ce.

* Add plugin-proposal-optional-chaining to the WebPack plugins config.

* Rename the files.

* Remove unnecessary dependencies as those are already provided via : more specifically, get_script_data.

* Address CR.

* Cart and Checkout Page Migration: Inherit Page template and fix rendering (#10375)

* Change shortcode block render callback

* Inherit template from original "page" template

* Check if WordPress version is higher than 6.2.2 to make Products block compatible with Gutenberg 16+ (#10360)

* Check if WordPress version is higher than 6.2.2 to make Products block compatible with Gutenberg 16+

* Extract the logic of checking the post template support for grid view toi separate function

* Change the versions comparison and improve description of custom version compare function

* Render Checkout/Cart containing pages without template overriding (#10359)

* Render Checkout/Cart containing pages without template overriding

* Fix checkout typo

---------

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

* Add to cart form: Fix fatal error when missing `product` param in add_to_cart_redirect_filter (#10316)

* Transform product param optional in add_to_cart_redirect_filter method

* Remove unnecessary argument from add_to_cart_redirect_filter

* Remove mocked filter call

* Remove unnecessary argument from function docs

* Remove opinionated styles from Product Hero pattern (#10255)

* Mini Cart: Remove deprecated print_inline_script() (#10165)

* Mini Cart: Replace the deprecated print_inline_script() with supported get_inline_script_data(). Fixes #10004

* Mini Cart: Add version check for the new get_inline_script_data() function

* Update the variable names and fix a typo

* Mini Cart: Add regex to check for the WP version

* Abstract the WP version comparison regex to a separate Utils class

* Call wc_setup_product_data if the global product variable is not an instance of WC_Product. (#10128)

* Empty commit for release pull request

* add testing instructions

* Per block stylesheets (#9831)

* Clean up blank lines

* Update Webpack config

* Update PHP logic to load block styles

* Style fixes

* Style fixes (II)

* Style fixes (III)

* Style fixes (IV)

* Fix missing stylesheets in the Site Editor

* Fix wrong return values in some PHP method docs

* Fix missing ProductPrice stylesheet causing 404 in tests

* Fix missing ProductGallery stylesheet causing 404 in tests

* update testing instructions

* add zip link

* update version

* update zip link

* remove screenshot

* remove testing instructions

* Register Legacy block for all taxonomy-product_ template (#10382)

* WIP

* improve logic

* improve unit test

* $post validation on Cart and Checkout template (#10410)

Co-authored-by: Luigi Teschio <gigitux@gmail.com>

* Update zip

---------

Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com>
Co-authored-by: Mike Jolley <mike.jolley@me.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
Co-authored-by: Alexandre Lara <allexandrelara@gmail.com>
Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Luigi <gigitux@gmail.com>
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. focus: global styles Issues that involve styles/css/layout structure. focus: template Related to API powering block template functionality in the Site Editor
Projects
None yet
4 participants