CYS: Override header and footer template parts

[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:

As described in #44889, the Assembler previously focused on updating only the homepage template, where the header and footer patterns were incorporated as blocks within the homepage.

This pull request transforms the header and footer sections into template parts. This adjustment ensures that any changes applied via the assembler to the header and footer will propagate to other pages, ensuring consistent updates across the entire site.

Closes #44889.

How to test the changes in this Pull Request:

Caution

This PR impacts CYS on Woo Express.

Warning

This PR changes the current logic about how the assembler works. It is crucial to conduct a careful review, taking into account possible edge cases or unconventional scenarios.

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

1. Enable the WooCommerce Beta Tester plugin if you don't have it enabled yet
2. On your Dashboard, head over to Tools > WCA Test Helper > Features and enable the customize-store
3. Ensure you have the Gutenberg plugin installed from the latest trunk (or install it from this zip file: gutenberg.zip
4. Visit the /wp-admin/admin.php?page=wc-admin&path=/customize-store.
5. Follow the process.
6. On the sidebar, click on "Choose your footer".
7. Ensure that the footer is highlighted.
8. Select another pattern.
9. Click Save.
10. On the sidebar, click on "Choose your header".
11. Ensure that the header is highlighted.
12. Select another pattern.
13. Click Save.
14. On the sidebar, click on "Design your homepage".
15. Select another pattern.
16. Click Save.
17. Click Done.
18. Visit the homepage of your store.
19. Ensure that the page is equal to the Assembler preview.
20. Visit a product page.
21. Ensure that the header and footer are equal to the Assembler preview and the homepage.
22. Visit the Site Editor.
23. Edit the Homepage template.
24. Open the list view.
25. Ensure that you see the Header and Footer template parts:

JN Installation

1. Create a new WooCommerce installation with this version.
2. Ensure Jetpack is installed and your site is connected with JP.
3. Ensure the WooCommerce Beta Tester plugin is installed and activated (available on this monorepo).
4. Ensure the Woo AI plugin is installed and activated (available on this monorepo).
5. Head over to /wp-admin/tools.php?page=woocommerce-admin-test-helper and enable customize-store feature flag.
6. Head over to WooCommerce -> Home and click on "Start Customizing".
7. Follow the steps 6-25 of the above testing instructions.

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: Override header and footer template parts.

Comment

[github-actions]

Test Results Summary

Commit SHA: e4d6a43

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 38s
E2E Tests	329	0	0	18	0	347	7m 39s

---

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.

[github-actions]

Hi @albarin, @dinhtungdu, @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

[albarin]

@gigitux I've noticed a couple of things when selecting a footer and not clicking Save:

1. The footer is "saved", when you go back, you see it applied to the homepage, is this expected?
2. When you go again to Choose your footer, it is not the selected one.

Check this video: https://github.com/woocommerce/woocommerce/assets/186112/ae617fc3-a38d-4f18-a98c-4596d4fb7021

[gigitux]

@gigitux I've noticed a couple of things when selecting a footer and not clicking Save:

1. The footer is "saved", when you go back, you see it applied to the homepage, is this expected?
2. When you go again to Choose your footer, it is not the selected one.

Check this video: https://github.com/woocommerce/woocommerce/assets/186112/ae617fc3-a38d-4f18-a98c-4596d4fb7021

Good catch! I didn't notice this. I don't think that it is a regression of this PR. I tried on trunk, and I'm able to reproduce it:

Screen.Capture.Feb.29.at.10-39-10.mov

[gigitux]

Regarding the issue above, I'm wondering what the point of the Save button is because even if the user didn't save, the selected pattern is still visible on the site when returning back.

cc @verofasulo @nefeline

[albarin]

Awesome job! 👌

[gigitux]

Thanks for the review, @albarin! I'm going to merge this PR!

@gigitux I've noticed a couple of things when selecting a footer and not clicking Save:

1. The footer is "saved", when you go back, you see it applied to the homepage, is this expected?
2. When you go again to Choose your footer, it is not the selected one.

As I wrote earlier, both issues are not caused by this PR. Regarding point 2, I created a dedicated issue: #45215

About point 1, I agree that it is a little bit weired this behavior. @verofasulo, what do you think? Should we revisit the beavhior?

[verofasulo]

Regarding the issue above, I'm wondering what the point of the Save button is because even if the user didn't save, the selected pattern is still visible on the site when returning back.

@gigitux, I agree. I believe it's because we're still dragging a pending decision on Woo Express, where we thought of removing the "Save" button completely. Thanks for flagging it 🙏 Let's revisit the behavior and update the pattern/layout/colors/fonts only if the user clicks on "Save" as per your suggestion. Thank you 🙇‍♀️