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

Add migration strategy and load blockified templates #6538

Merged
merged 52 commits into from
Jul 6, 2022

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Jun 8, 2022

Fixes #6513

The goal of this PR is to render the new blockied Product Grid block (when it will be ready), 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 ✔️

To reach this goal, we created a new class Migration that set the option wc_blocks_use_blockified_product_grid_block_as_template to no (this code will be enabled when the new block will be released).

In the class BlockTemplatesController we render the new template only if the option wc_blocks_use_blockified_product_grid_block_as_template is set to yes.

We added unit tests for the Migration class and for the BlockTemplatesUtils class.

Testing

Automated Tests

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

User Facing Testing

Download zips:

  1. Zip generated from the current trunk branch (link)
  2. Zip generated from the PR. (link)

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

For convenience, in the testing instructions:

  • we use the name pre-update package for the zip generated from the current trunk branch.
  • we use the name after-update package for the zip generated from the PR.

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 and Products by Tag renders a Paragraph block (it is just a placeholder).

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 and Products by Tag renders a Paragraph block (it is just a placeholder).

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 and Products by Tag 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 and Products by Tag 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, and Products by Tag renders a Paragraph block (it is just a placeholder).
  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.

Unit Test Fix

We fixed #6618. We noticed that the command pretest:php was executed in another container and break some references in the phpunit container. We decide to remove the command: now, before running npm run php:test the user must install PHP deps.

Test:

Be sure that PHP unit tests don't fail.

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@github-actions
Copy link
Contributor

github-actions bot commented Jun 8, 2022

Size Change: 0 B

Total Size: 875 kB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.26 kB
build/active-filters.js 7.92 kB
build/all-products-frontend.js 18.1 kB
build/all-products.js 33.5 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 25 kB
build/attribute-filter.js 14.2 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.06 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-line-items-frontend.js 432 B
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 782 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.62 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.36 kB
build/cart-blocks/order-summary-shipping-frontend.js 427 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 432 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 45.7 kB
build/cart.js 44.2 kB
build/checkout-blocks/actions-frontend.js 1.41 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 888 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.36 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.08 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.78 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.25 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 603 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 432 B
build/checkout-blocks/payment-frontend.js 7.67 kB
build/checkout-blocks/shipping-address-frontend.js 991 B
build/checkout-blocks/shipping-methods-frontend.js 4.72 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 326 B
build/checkout-frontend.js 47.9 kB
build/checkout.js 45.5 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/handpicked-products.js 7.4 kB
build/legacy-template.js 2.8 kB
build/mini-cart-component-frontend.js 16.6 kB
build/mini-cart-contents-block/empty-cart-frontend.js 364 B
build/mini-cart-contents-block/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 5.75 kB
build/mini-cart-contents-block/items-frontend.js 226 B
build/mini-cart-contents-block/products-table-frontend.js 290 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 22.9 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 6.62 kB
build/price-filter-frontend.js 13 kB
build/price-filter.js 9 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 222 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB
build/product-add-to-cart--product-button.js 564 B
build/product-add-to-cart-frontend.js 6.95 kB
build/product-add-to-cart.js 6.63 kB
build/product-best-sellers.js 7.49 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 500 B
build/product-button-frontend.js 1.84 kB
build/product-button.js 1.09 kB
build/product-categories.js 2.78 kB
build/product-category-list-frontend.js 920 B
build/product-category-list.js 502 B
build/product-category.js 8.59 kB
build/product-image-frontend.js 1.83 kB
build/product-image.js 1.07 kB
build/product-new.js 7.77 kB
build/product-on-sale.js 8.09 kB
build/product-price-frontend.js 1.94 kB
build/product-price.js 1.5 kB
build/product-rating-frontend.js 1.15 kB
build/product-rating.js 731 B
build/product-sale-badge-frontend.js 1.09 kB
build/product-sale-badge.js 679 B
build/product-search.js 2.18 kB
build/product-sku-frontend.js 381 B
build/product-sku.js 381 B
build/product-stock-indicator-frontend.js 1.03 kB
build/product-stock-indicator.js 621 B
build/product-summary-frontend.js 1.33 kB
build/product-summary.js 916 B
build/product-tag-list-frontend.js 914 B
build/product-tag-list.js 497 B
build/product-tag.js 8.13 kB
build/product-title-frontend.js 1.29 kB
build/product-title.js 909 B
build/product-top-rated.js 8.01 kB
build/products-by-attribute.js 8.7 kB
build/reviews-by-category.js 11.3 kB
build/reviews-by-product.js 12.4 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.4 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 7.35 kB
build/stock-filter.js 7.25 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.74 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 20.5 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 5.08 kB
build/wc-blocks-editor-style.css 5.08 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 22.1 kB
build/wc-blocks-style.css 22.1 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 59 kB
build/wc-blocks.js 2.63 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.61 kB

compressed-size-action

@albarin albarin changed the title Feature/6513 load blockified templates POC: Feature/6513 load blockified templates Jun 13, 2022
@albarin albarin force-pushed the feature/6513-load-blockified-templates branch from 07c151a to 2a188a1 Compare June 14, 2022 14:44
@gigitux gigitux force-pushed the feature/6513-load-blockified-templates branch from 42cdb5a to 545efaf Compare June 16, 2022 16:22
@albarin albarin force-pushed the feature/6513-load-blockified-templates branch from a7bb2cc to e4c463c Compare June 17, 2022 10:03
@gigitux gigitux force-pushed the feature/6513-load-blockified-templates branch from 49c66fb to e6c65a1 Compare June 22, 2022 08:18
@albarin albarin marked this pull request as ready for review June 27, 2022 12:53
@rubikuserbot rubikuserbot requested review from a team and gigitux and removed request for a team June 27, 2022 12:54
@gigitux gigitux requested review from a team and frontdevde and removed request for gigitux and a team June 27, 2022 12:57
@gigitux
Copy link
Contributor

gigitux commented Jun 27, 2022

I removed myself as a reviewer because I worked on this PR.

Copy link
Contributor

@frontdevde frontdevde 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 getting this in place! 👏

Was a journey to review but we got there. Glad to confirm it's working as expected. ✅

* @param \WP_Theme $old_theme Instance of the old theme.
* @return void
*/
public function check_should_use_blockified_product_grid_templates( $old_name, $old_theme ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder if we can optimize by creating a more abstract method which accepts the option key so we are able to use it for future templates we are going to convert to block templates to avoid creating separate methods for each scenario?

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 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
4 participants