Installation pages do not have JS translations

[sabernhardt]

The password toggle buttons on install.php and setup-config.php have translated visible text and aria-label when the page loads, but then the visible text becomes "Show" or "Hide" when I click on the button (the aria-label becomes "Show password" or "Hide password"). The setup-config.php toggle was just added in [56008], but the install.php page apparently has had trouble with those buttons and/or the password strength meter for several releases.

[sabernhardt]

installation page in WordPress 6.3 beta 2, choosing French: the password toggle button and password strength meter show English text

[sabernhardt]

in WordPress 5.5, the installation page password visibility toggle button showed English text with interaction, but password strength meter had French translation

[sabernhardt]

both the password toggle button and password strength meter show French text on the Profile page in WordPress 6.3

[sabernhardt]

The password toggle buttons and strength meters work for me on the Login, New User, User Profile and Writing Settings pages. Those use wp_enqueue_script(); Install and Setup Config pages use wp_print_scripts().

script from Install page in WordPress 5.4.2:

/* <![CDATA[ */
var userProfileL10n = {"warn":"Votre nouveau mot de passe n\u2019a pas \u00e9t\u00e9 enregistr\u00e9.","warnWeak":"Confirmer l\u2019utilisation du mot de passe faible","show":"Afficher","hide":"Cacher","cancel":"Annuler","ariaShow":"Afficher le mot de passe","ariaHide":"Cacher le mot de passe"};
/* ]]> */
</script>
<script type='text/javascript' src='http://localhost/wp54/wp-admin/js/user-profile.js?ver=5.4.2'></script>

script from Install page in WordPress 5.5:

<script type='text/javascript' id='user-profile-js-translations'>
( function( domain, translations ) {
	var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
	localeData[""].domain = domain;
	wp.i18n.setLocaleData( localeData, domain );
} )( "default", { "locale_data": { "messages": { "": {} } } } );
</script>
<script type='text/javascript' src='http://localhost/wp55/wp-admin/js/user-profile.js?ver=5.5' id='user-profile-js'></script>

[52937] removed the empty translations script later

[joedolson]

Do you think that this would better belong in the I18n component?

[sabernhardt]

It can fit both, but yes it's probably better in i18n.

[NekoJonez]

I have taken screenshots from @sabernhardt video's since this kept bugging out on VLC and my computer... As a polyglot, I find this kind of things quite important to fix.
Currently, the issue is only showing when you are installing WP and not on other labels.

I also tested this with my locale nl_BE and had the exact same behavior. So, it doesn't look like a problem with the translations themselves.

Since, they are in the pack...

Show: ​https://translate.wordpress.org/projects/wp/dev/admin/nl-be/default/?filters%5Bstatus%5D=either&filters%5Boriginal_id%5D=928&filters%5Btranslation_id%5D=107216845

Hide: ​https://translate.wordpress.org/projects/wp/dev/admin/nl-be/default/?filters%5Bstatus%5D=either&filters%5Boriginal_id%5D=929&filters%5Btranslation_id%5D=75419389

And as in the example:
The labels for the password strength: ​https://translate.wordpress.org/projects/wp/dev/nl-be/default/?filters%5Bterm%5D=password+strength&filters%5Bterm_scope%5D=scope_context&filters%5Bstatus%5D=current&filters%5Buser_login%5D=&filter=Apply+Filters&sort%5Bby%5D=translation_date_modified&sort%5Bhow%5D=desc

Also, is it me or is the label not in bold during the install and in the UI it is in bold...?

[NekoJonez]

Possibly related: #59024

[joemcgill]

This is currently blocking #57157, per this comment. Moving into the 6.4 milestone for visibility.

[swissspidy]

The main culprit for this bug is that all the blocks are registered on init, even when WP is not installed yet.

Because blocks register scripts, that causes WP_Scripts to be initialized very early, triggering script localization of the password meter.

Because of the way wp-admin/install.php loads translations, it's actually too early, and when the script localization happens it still thinks the locale is en_US.

Not registering any blocks would automatically solve this issue.

An alternative solution is to adjust determine_locale() to detect the current locale on the install screen. That's what my PR does.

Works around issues with script localization happening too early because of blocks being registered.

Trac ticket: https://core.trac.wordpress.org/ticket/58696

[nicolefurlan]

It looks like this PR needs review before we can move this ticket forward (cc @SergeyBiryukov, @ocean90, @costdev)

@swissspidy Thanks for working on this! This appears to work for the password strength indicator but not for the Show/Hide button on interaction.

​https://github.com/WordPress/wordpress-develop/assets/79332690/64373f93-a136-4d36-8280-f65d024ba985

@costdev Weird, I cannot reproduce this. Did you perhaps navigate forward/backward in the browser or reload the install page when you recorded this, instead of starting install from scratch? The $_REQUEST could have been emptied.

Works fine for me:

​https://github.com/WordPress/wordpress-develop/assets/841956/be78233f-a666-4aff-969b-a84b7481c1be

@swissspidy Hmm, I'm not sure now. Might be worth getting another tester to check it in case it's maybe something going on locally for me.

@SergeyBiryukov @ocean90 Would appreciate your review on this one so we can fix it in 6.5 🙏

[jornp]

​https://github.com/WordPress/wordpress-develop/pull/5121 is testing well for me; I've approved the PR.

[swissspidy]

#60186 was marked as a duplicate.

[swissspidy]

In 57286:

Upgrade/Install: Fix JavaScript localization on install page.

Blocks registration causes scripts to be initialized and localized very early, before the current locale has been properly set on the installation page.

This changes determine_locale() so that the locale chosen during installation is recognized and loaded earlier, ensuring proper script localization.

Props sabernhardt, NekoJonez, jornp, costdev.
Fixes #58696

Committed in https://core.trac.wordpress.org/changeset/57286

[johnbillion]

@swissspidy Can you double check the tests that were added in [57286]?

• test_language_param_not_installing() is identical to test_wp_local_package_global_not_installing()
• test_language_param_installing() is identical to test_wp_local_package_global_installing()

[swissspidy]

In 57305:

I18N: Fix duplicate determine_locale() tests added in [57286].

Props johnbillion.
See #58696.