CYS: Fix Header/Footer template parts disappear

[gigitux]

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:

Before	After
qtWb5l.mp4	PDRFMI.mp4

This PR fixes the Header/Footer template parts disappear, or at least, greatly reduces the chances of this happening.

This issue happens because, for some reason, the innerBlocks of the template part block became 0 (source code).

This looks like a bug (WordPress/gutenberg#20243) within the code responsible for synchronizing inner blocks on every change: https://github.com/WordPress/gutenberg/blob/0c176fef1896ee5264526601825a81b229d9ddd2/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js/#L56-L113.

In this PR, I removed all the changes we applied to the blocks array, passing the original one returned by the hook. I imagine that some optimizations are checking the reference.
Futhermore, I added a check on SidebarNavigationScreenHomepage to trigger the onChange only when the pattern is changed.

Closes #45711 .

How to test the changes in this Pull Request:

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

1. Make sure you have the WooCommerce Beta Tester plugin installed and activated.
2. Under Tools > WCA Test Helper > Features, make sure customize-store is enabled.
3. Head over to WooCommerce > Home > Customize your store.
4. Click on "Start designing" and proceed to the Pattern Assembler.
5. Click on "Design your homepage".
6. Switch the various patterns very quickly (check the video).
7. Ensure that the header and the footer don't disappear.
8. Go back.
9. Click on "Choose your Header".
10. Change it and ensure that the header is highlighted.
11. Go back.
12. Click on "Choose your Footer".
13. Change it and ensure that the header is highlighted.
14. Go Back.
15. Click done.
16. Click view store.
17. Ensure that all the changes are visible on the frontend

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

CYS: Fix Header/Footer template parts disappear

Comment

[github-actions]

Hi @albarin, @nefeline,

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

[nefeline]

Great job @gigitux !

Regarding:

This PR fixes the Header/Footer template parts disappear, or at least, greatly reduces the chances of this happening.

This issue happens because, for some reason, the innerBlocks of the template part block became 0 (source code).

This looks like a bug (WordPress/gutenberg#20243) within the code responsible for synchronizing inner blocks on every change: https://github.com/WordPress/gutenberg/blob/0c176fef1896ee5264526601825a81b229d9ddd2/packages/block-editor/src/components/inner-blocks/use-inner-block-template-sync.js/#L56-L113.

In this PR, I removed all the changes we applied to the blocks array, passing the original one returned by the hook. I imagine that some optimizations are checking the reference.
Futhermore, I added a check on SidebarNavigationScreenHomepage to trigger the onChange only when the pattern is changed.

Thanks for the detailed explanation of the problem at hand and the proposed solution. My tests of this PR were all successful, tested multiple times with different combinations of headers, footers and homepages, so we can proceed with this implementation and circle back in case new reports come up later.

[github-actions]

Test Results Summary

Commit SHA: aaee897

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 39s
E2E Tests	140	0	0	217	0	357	8m 40s

---

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.