[CYS on Core] Ensure the size of fonts is not affected by the font family changes

[albarin]

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:

This PR resets the typography settings from the user styles before applying the new ones to avoid influencing one another.

Closes #44259

How to test the changes in this Pull Request:

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

1. Ensure the WooCommerce Beta Tester plugin is installed and activated (available on this monorepo).
2. Head over to /wp-admin/tools.php?page=woocommerce-admin-test-helper and enable customize-store feature flag.
3. Visit the wp-admin/admin.php?page=wc-admin&path=/customize-store
4. Follow the process.
5. Click on Change fonts.
6. Click on Montserrat + Arvo.
7. Click on Albert Sans + Lora, the size is the same.
8. Click on Rubik + Inter and you'll see the font is bigger.
9. Click back on Albert Sans + Lora and check the font is the same size compared to the initial Albert Sans + Lora pairing (clicking on Montserrat + Arvo should not influence the size of Albert Sans + Lora).
10. Go to Change the color palette and select a new one.
11. Go back to Change fonts and select a new one.
12. Make sure the color palette is kept after selecting the font.

Before	After
https://github.com/woocommerce/woocommerce/assets/15730971/62553860-ca65-4476-b6e3-d615a4308ae7	https://github.com/woocommerce/woocommerce/assets/186112/f62c33c1-66f9-41ef-ab93-6de41e35aee2

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 - Ensure the size of fonts is not affected by a font family change.

Comment

[github-actions]

Test Results Summary

Commit SHA: 15a1b4e

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	304	0	0	10	0	314	6m 47s

---

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 @chihsuan, @gigitux, @nefeline, @woocommerce/woo-fse

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

[chihsuan]

Hey @albarin Thanks for working on this! 👍

Unlike the GB site editor, I use mergeBaseAndUserConfigs here because we've split style variations into font and color parts. We need to preserve the color changes when updating the font and vice versa.

I tested this PR on JN, and you can see when I change the color and then update the font, the color gets reset. I think this is a bit tricky. Perhaps a way to fix it is to create a custom merge function. 🤔

Screen.Recording.2024-02-08.at.11.27.15.mov

[albarin]

Thanks @chihsuan, great feedback!
I've addressed it 15a1b4e let me know what you think.
What I'm doing it remove all the typhography settings from the styles before applying new ones.

[nefeline]

I'm pre-approving as everything is working as described (great job!), but I'll defer to @chihsuan for the code review, as he's way more versed than I at this area of the codebase :)

[chihsuan]

Code looks good. Thanks! 💯