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

Enable blockified templates #9551

Merged
merged 15 commits into from
Jun 1, 2023
Merged

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented May 19, 2023

⚠️ This PR is blocked by #9579

This PR breaks E2E tests, so there are serial follow-up PRs to fix them:

Please, review them as well!

The goal of this PR is to render the new blocified templates, only when the user:

  • installs the plugin.
  • enables a block theme.

and don't have a customized template.

In this table, you can see the expected behavior for the different cases:

Plugin Theme Type Blockified block
New Installation Classic Theme 🚫
New Installation Block ✔️
New Installation Switch from Classic Theme to Block Theme ✔️
Update Classic Theme 🚫
Update Block 🚫
Update Switch from Classic Theme to Block Theme ✔️

Fixes #8209

Testing

it is not necessary to activate WC Blocks.

Download zips:

  1. Install the current version of WC Core from wp.org

  2. Build of WooCommerce Core that contains a version of WC Blocks built with this PR. woocommerce.zip

Please, don't rename the name of the zip.

For convenience, in the testing instructions:

  • we use the name pre-update package for the plugin installed via wp.org.
  • we use the name after-update package for the build of WooCommerce Core that contains a version of WC Blocks built with this PR.

User Facing Testing

Test 1:

Plugin Theme Type Blockified block
New Installation Block ✔️
  1. Be sure that you have a block theme installed.
  2. Install the plugin with the after-update package.
  3. Open the FSE -> templates and check that Product Catalog, Product Search Results, Products by Category. Products by Tag and Single Product are blockified.

Test 2:

Plugin Theme Type Blockified block
New Installation Switch from Classic Theme to Block Theme ✔️
  1. Be sure that you have a classic theme installed.
  2. Install the plugin with the after-update package.
  3. Active a block theme.
  4. Open the FSE -> templates and check that Product Catalog, Product Search Results, Products by Category, Products by Tag and Single Product are blockified.

Test 3:

Plugin Theme Type Blockified block
Update Block 🚫
  1. Install pre-update package.
  2. Open the FSE -> templates and check that Product Catalog, Product Search Results, Products by Category, Products by Tag and Single Product renders the classic WooCommerce Product Grid Block.
  3. Update the plugin with after-update package.
  4. Open the database, and check if in the table wp_option there is a key wc_blocks_use_blockified_product_grid_block_as_template set to no.
  5. Open the FSE -> templates and check that Product Catalog, Product Search Results, Products by Category, Products by Tag and Single Product renders the classic WooCommerce Product Grid Block.
  6. Remove the key wc_blocks_use_blockified_product_grid_block_as_template and the key wc_blocks_version from the database and remove the plugin.

Test 4:

Plugin Theme Type Blockified block
Update Switch from Classic Theme to Block Theme ✔️
  1. Be sure that you have a classic theme installed.
  2. Install pre-update package.
  3. Update the plugin with after-update package.
  4. Enable a block theme.
  5. Open the database, and check if in the table wp_option there is a key wc_blocks_use_blockified_product_grid_block_as_template set to yes.
  6. Open the FSE -> templates and check that Product Catalog, Product Search Results, Products by Category, Products by Tag and Single Product are blockified.
  7. Remove the key wc_blocks_use_blockified_product_grid_block_as_template and the key wc_blocks_version from the database and remove the plugin.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Enable blockified templates.

@github-actions
Copy link
Contributor

github-actions bot commented May 19, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9551.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-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 ⚠️
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, wp-i18n, wp-polyfill ⚠️
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 ⚠️
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: 467
  • Total errors: 2254

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@gigitux gigitux self-assigned this May 19, 2023
@gigitux gigitux added the status: blocker Used on issues or pulls that block work from being released. label May 19, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 19, 2023

Size Change: 0 B

Total Size: 1.1 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.65 kB
build/active-filters-wrapper-frontend.js 7.61 kB
build/active-filters.js 7.47 kB
build/all-products-frontend.js 12 kB
build/all-products.js 40 kB
build/all-reviews.js 7.85 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 4.04 kB
build/attribute-filter-wrapper-frontend.js 4.29 kB
build/attribute-filter.js 13.2 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js 254 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.92 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.71 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 720 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.51 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 656 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.13 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 333 B
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/cart-frontend.js 29.9 kB
build/cart.js 45.1 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 kB
build/checkout-blocks/billing-address-frontend.js 1.19 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 332 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.27 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 436 B
build/checkout-blocks/payment-frontend.js 8.28 kB
build/checkout-blocks/pickup-options-frontend.js 4.85 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 6.4 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 361 B
build/checkout-frontend.js 32 kB
build/checkout.js 46.4 kB
build/customer-account.js 3.18 kB
build/featured-category.js 15.1 kB
build/featured-product.js 15.3 kB
build/filter-wrapper-frontend.js 14.3 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8.04 kB
build/legacy-template.js 6.46 kB
build/mini-cart-component-frontend.js 28.5 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.73 kB
build/mini-cart-contents-block/empty-cart-frontend.js 362 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 4.09 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 593 B
build/mini-cart-contents-block/shopping-button-frontend.js 526 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-label-frontend.js 1.53 kB
build/mini-cart-contents.js 18 kB
build/mini-cart-frontend.js 2.66 kB
build/mini-cart.js 4.43 kB
build/price-filter-wrapper-frontend.js 6.75 kB
build/price-filter.js 8.55 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 250 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.52 kB
build/product-add-to-cart.js 8.84 kB
build/product-best-sellers.js 8.35 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 954 B
build/product-button-frontend.js 2.65 kB
build/product-button.js 3.97 kB
build/product-categories.js 2.71 kB
build/product-category.js 9.36 kB
build/product-collection.js 9.89 kB
build/product-image-frontend.js 2.62 kB
build/product-image.js 4.14 kB
build/product-new.js 8.65 kB
build/product-on-sale.js 8.68 kB
build/product-price-frontend.js 203 B
build/product-price.js 1.69 kB
build/product-query.js 11.8 kB
build/product-rating-frontend.js 2.27 kB
build/product-rating.js 971 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.79 kB
build/product-sale-badge.js 665 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.84 kB
build/product-sku.js 536 B
build/product-stock-indicator-frontend.js 2.03 kB
build/product-stock-indicator.js 730 B
build/product-summary-frontend.js 2.19 kB
build/product-summary.js 904 B
build/product-tag.js 9.01 kB
build/product-template.js 3.35 kB
build/product-title-frontend.js 2.21 kB
build/product-title.js 3.66 kB
build/product-top-rated.js 8.91 kB
build/products-by-attribute.js 9.75 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.2 kB
build/rating-filter.js 6.89 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.3 kB
build/reviews-frontend.js 7.18 kB
build/single-product.js 11.1 kB
build/stock-filter-wrapper-frontend.js 2.98 kB
build/stock-filter.js 7.61 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.21 kB
build/vendors--attribute-filter-wrapper--stock-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.5 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.26 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.4 kB
build/wc-blocks-editor-style-rtl.css 5.96 kB
build/wc-blocks-editor-style.css 5.96 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 27.9 kB
build/wc-blocks-style.css 27.8 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 65 kB
build/wc-blocks.js 3.7 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
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@mikejolley mikejolley added this to the 10.3.0 milestone May 22, 2023
@gigitux gigitux force-pushed the add/enable-blockified-templates-as-default branch 5 times, most recently from 07ecc19 to b8c5426 Compare May 22, 2023 14:27
@gigitux gigitux added the focus: template Related to API powering block template functionality in the Site Editor label May 22, 2023
@gigitux gigitux marked this pull request as ready for review May 22, 2023 14:41
@woocommercebot woocommercebot requested review from a team and roykho and removed request for a team May 22, 2023 14:42
@gigitux gigitux force-pushed the add/enable-blockified-templates-as-default branch 3 times, most recently from 9bb4dd2 to 7fda740 Compare May 23, 2023 07:51
@gigitux gigitux modified the milestones: 10.3.0, 10.4.0 May 23, 2023
@gigitux gigitux removed the status: blocker Used on issues or pulls that block work from being released. label May 23, 2023
@gigitux gigitux marked this pull request as draft May 23, 2023 14:29
@gigitux gigitux force-pushed the add/enable-blockified-templates-as-default branch from cb31fee to acc8358 Compare May 24, 2023 07:48
@woocommercebot woocommercebot requested a review from a team May 25, 2023 09:57
@gigitux gigitux marked this pull request as draft May 25, 2023 17:25
@gigitux gigitux added the type: enhancement The issue is a request for an enhancement. label May 29, 2023
@gigitux gigitux marked this pull request as ready for review May 30, 2023 12:14
@gigitux gigitux force-pushed the add/enable-blockified-templates-as-default branch from cf7c11f to 504507f Compare May 30, 2023 12:18
@roykho
Copy link
Member

roykho commented May 30, 2023

Hi @gigitux - Can you please clarify that in the testing, I don't need to activate the WooCommerce Blocks stand alone plugin correct? The instructions didn't state this so I wanted to make sure.

@gigitux
Copy link
Contributor Author

gigitux commented May 30, 2023

Hi @gigitux - Can you please clarify that in the testing, I don't need to activate the WooCommerce Blocks stand alone plugin correct? The instructions didn't state this so I wanted to make sure.

Yes, it is not necessary to activate WC Blocks. I updated the testing instructions!

Copy link
Member

@roykho roykho left a comment

Choose a reason for hiding this comment

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

All tests worked as described. I think we should definitely get a second pair of eyes though.

Copy link
Contributor

@tjcafferkey tjcafferkey 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 the testing instructions @gigitux this works as expected, and I can't see anything of concern in the code changes either.

gigitux added 2 commits June 1, 2023 13:05
* Add E2E tests

* add comment

* set worker to 1

* try now

* add beforeAll and afterAll hook

* restore woocommerce-gutenberg-products-block.php

* enable plugin with .wp-env configuration

* remove waitForNetworkIdle

* Products block: Add e2e tests (#9577)

* migrate classic block to Playwright

* fix can be inserted more than once tests

* migrate classic block to Playwright

* fix command

* remove old tests

* improve E2E tests

* skip test

* Products block: add E2E pw tests

* Add E2E tests

* fix E2E test

* test now

* try now

* rename path

* set one worker

* try now

* try now

* try now

* set 1 worker
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: template Related to API powering block template functionality in the Site Editor type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Make the blockified Single Product template default for the new stores
4 participants