Rosetta: Enable locale-specific customizations to theme.json settings.

[ryelle]

Add a method for overriding the default parent theme settings for rosetta sites. This will allow polyglots teams to provide, for example, preferred font sizes, which they or a meta dev can then code into the get_locale_customizations function using a theme.json format, so that any values defined in settings can be adjusted. While the entire object can be updated (so that locales can also control the responsive sizes and line heights), some things like colors will likely not be allowed to change.

This PR works in tandem with https://github.com/WordPress/wporg-main-2022/pull/380, which adds a new CSS file for specific rosetta site overrides.

In practice, I see this working like so:

• Polyglots test out the theme with https://[locale].wordpress.org/?new-theme=1
• Notice some typography/alignment/spacing does not work well.
• Make an issue in wporg-main-2022 describing the issue.
• If the issue is page or section specific, a dev can make a PR to add CSS (like in https://github.com/WordPress/wporg-main-2022/pull/380).
• If the issue is more general, like universally font sizes should be smaller, the change should be made here to apply to all future sites as well.

If we end up with many customization requests, we could look at providing a UI for polyglots teams to manage this themselves, but I'd like to start here first.

❓ Review question: Is get_locale() the best thing to switch on, or is there a better, rosetta-specific function I should use?

See https://github.com/WordPress/wporg-main-2022/issues/266, Fixes https://github.com/WordPress/wporg-main-2022/issues/306

Screenshots

I took a number of screenshots (with an automated script), you can look through the whole batch here.

Homepage

In Catalan (and fr, it, ro), the heading CTA font is smaller (first two sections, community section, get started). In Japanese, the heading CTA and heading-2 fonts are smaller (all other headings).

Locale	Before	After
English (UK)
Catalan
Japanese

Download page

Here, you can see the heading-2 size difference in the last two sections.

Before	After

How to test the changes in this Pull Request:

You can test localized sites by following the instructions on wporg-main-2022.

I also tested this on my sandbox with the top completed languages for wporg.

After that, just clicking around pages and making sure they look okay. What I used:

• Home: '/'
• Download: '/download/'
• A download subpage: '/download/source/'
• About: '/about/'
• An about subpage: '/about/etiquette/'
• News: '/news/'

[t-hamano]

Thanks for the PR! There is one thing that concerns me about the Japanese site.

This line break is very strange to Japanese people.

For example, imagine the following displayed on an English site.

What we expect is to be displayed as follows.

We have also not inserted any special line break tags for this text.

I would also like to find out the cause, but do you know why this problem occurs?

[ryelle]

We have also not inserted any special line break tags for this text.

It looks like there are linebreaks in the strings, <span>WordPress:</span><br />発信を<strong>すべての</strong>人の手に

https://translate.wordpress.org/projects/meta/wordpress-org/ja/default/?filters%5Bterm%5D=%2Fsrc%2Frandom-heading%2Findex.php&filters%5Bterm_scope%5D=scope_any&filters%5Bstatus%5D=current_or_waiting_or_fuzzy_or_untranslated&filters%5Buser_login%5D=&filter=Apply+Filters&sort%5Bby%5D=priority&sort%5Bhow%5D=desc

If I add CSS to make the bold text not wrap, that helps on the "Publish your passion" string. But I think the business string is still breaking in a bad place. If you remove those linebreaks though, I think the combination of both will fix it. How does the second column here look to you?

	With linebreak	No linebreak
Passion
Business
Freedom

[t-hamano]

Thank you for your detailed testing.

It looks like there are linebreaks in the strings, <span>WordPress:</span><br />発信を<strong>すべての</strong>人の手に

Sorry, I missed one br tag 😅😅

How does the second column here look to you?

This depends on the variation being displayed, but in general, it looks more natural without a linebreak.

This PR simply changes the font size according to the locale, so this problem might be fixed by adding appropriate line breaks on GlotPress.

We will be able to find out the cause of this problem and fix it in advance by enabling preview mode. If a line break alone doesn't solve the problem, we might submit a PR adding some styles as a follow-up.

Sorry for confusing you 🙇

[ryelle]

This PR simply changes the font size according to the locale, so this problem might be fixed by adding appropriate line breaks on GlotPress.

Right, the line breaks need to be changed on GlotPress.

If a line break alone doesn't solve the problem, we might submit a PR adding some styles as a follow-up.

That would be great.

Sorry for confusing you 🙇

No confusion here — I just want to help you get a site that looks good :)

I'm going to merge this PR for the font size updates, and we can continue the conversation on https://github.com/WordPress/wporg-main-2022/issues/266