Product gallery: Enable block in blockified template and add transform from legacy one

[roykho]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

As apart of this effort #42043 to surface the new Product Gallery block to users.

This PR transforms the Classic Single Product template to the blocks version with the new Product Gallery block. In addition, it adds the transform function for the legacy Product Image Gallery to the new Product Gallery Block.

Both of these additions will help surface this new Product Gallery block to existing and new users.

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

Test 1

1. Go to Appearance > Editor > Templates > Single Product (clear customizations)
2. Click on the editor and you should see "Transform into blocks" action button.
3. Hover over this button and you should see a preview with the Product Gallery block.
4. Click on the "Transform into blocks" action button and ensure you see the new Product Gallery block.

Test 2

1. Go to Appearance > Editor > Templates > Single Product (clear customizations)
2. Click on the editor and you should see "Transform into blocks" action button.
3. Remove the new Product Gallery block.
4. Add the legacy Product Image Gallery block.
5. Click on the "transform to" button and ensure you see the Product Gallery block.
6. Click on it and ensure your legacy Product Image Gallery block is now transformed to the new Product Gallery block.

Test 3

1. Run pnpm run --filter='@woocommerce/block-library' build:deploy and then pnpm run --filter='@woocommerce/plugin-woocommerce' build.
2. Go to Appearance > Editor > Templates > Single Product (clear customizations)
3. Click on the editor and you should see "Transform into blocks" action button.
4. Ensure you only see the legacy Product Image Gallery and you can't transform to the new Product Gallery block.

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

[github-actions]

Hi @danieldudzic, @thealexandrelara,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Hi @danieldudzic, @thealexandrelara,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test Results Summary

Commit SHA: 77e9e9f

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	258	0	0	3	0	261	13m 52s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[danieldudzic]

I was able to successfully test 1 & 2, but failed at the 3.

I tried multiple times, also utilizing (rm -rf **/.wireit) but the new Product Gallery block would still be available in the transform for the deploy package. (I do blame it on the setup/caching issues though).

I'd potentially consider adding a transform to the Product Gallery to allow people to transform back to the legacy block, in case they want to revert the transformation.

[danieldudzic]

Nit-picky: wouldn't productGalleryBlock make more sense here?