Fix missing translations for Customizer

[Soare-Robert-Daniel]

Summary

After some long debugging, the missing translations were caused by how we generated the JS build.

Alongside the main script control.js, some chunk files were generated by Webpack. Creating the .pot file associated the labels with those chunks scripts.

Thus, in the wp-content/languages/theme folder of WP, you will find JSON files like:

{"translation-revision-date":"2023-10-21 15:11:06+0000","generator":"GlotPress\/4.0.0-alpha.11","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=2; plural=n != 1;","lang":"it"},"Search":["Cerca"]}},"comment":{"reference":"assets\/apps\/customizer-controls\/build\/585056780d73ab9a0975.js"}}

Notice the reference that shows what is the associated file.

The code here that loads the translation is incomplete because is loading the translations only for control.js file.

The solution was to scan the folder for the chunks and apply the same process as we do for control.js.

With this, the translation will be included in page like this:

<script id="neve-customizer-chunk-585056780d73ab9a0975-js-translations">
( function( domain, translations ) {
	var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
	localeData[""].domain = domain;
	wp.i18n.setLocaleData( localeData, domain );
} )( "neve", {"translation-revision-date":"2023-10-21 15:11:06+0000","generator":"GlotPress\/4.0.0-alpha.11","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=2; plural=n != 1;","lang":"it"},"Search":["Cerca"]}},"comment":{"reference":"assets\/apps\/customizer-controls\/build\/585056780d73ab9a0975.js"}} );
</script>

Will affect visual aspect of the product

YES

Screenshots

Before

After

Test instructions

⚠️ You will need Neve Pro

• Change the website language to something else other than English (make sure to pick one with 100% translation)
• Check the Customizer Header/Footer builder for missing translations.

Check before Pull Request is ready:

• I have written a test and included it in this PR
• I have run all tests and they pass
• The code passes when running the PHP CodeSniffer
• Code meets WordPress Coding Standards for PHP, HTML, CSS and JS
• Security and Sanitization requirements have been followed
• I have assigned a reviewer or two to review this PR (if you're not sure who to assign, we can do this step for you)

Closes #4093

[pirate-bot]

Plugin build for 196ba22 is ready 🛎️!

• Download build

[preda-bogdan]

While this might work, I have some concerns about the code.

1. Is that using glob() might cause issues depending on the server.
2. Each script chunk is enqueued.

Can't this be fixed by modifying the webpack config? I'm asking this just based on your findings.

[selul]

I agree, that this will introduce a performance penalty due to the IO reads for unnecessary work since we don't need to read the folder at each load and it can be saved on build when the release is made since those filenames are never changed and are static. The only time when they are changed is on a new release.

[Soare-Robert-Daniel]

Another solution is to tweak webpack to make a single file, but this will change the .pot file, and I am not sure what the impact is in wp org. Does WP regenerate the .po file along with .json files based on the new references in .pot file?

Can the ranking in store might be affected by this?

[selul]

@Soare-Robert-Daniel wordpress.org generates the translation list based on the files, by extracting the texts from the files, not on the po/pot/json files, those are redundant, and they are not used on translation.wordpress.org.

[selul]

one idea is similar how wp-scripts generates the assets.php file with the deps, generate a PHP file with the chunks list by webpack and require it.

[Soare-Robert-Daniel]

Thanks guys for the feedback. I implement the idea of changing assets.php to include a special option for chunks. This was done via a small custom plugin for Webpack that modifies the output of the wp-scripts.

A message will be displayed in the terminal:

[irinelenache]

@Soare-Robert-Daniel Tested and the issue is fixed now 👍 Here are the other strings in customizer which aren't translated (I don't know if it's related to this PR):

• Header / footer scripts https://vertis.d.pr/i/6NWPFx
• Global page header settings https://vertis.d.pr/i/KbUpvU
• Stick to bottom / Stick to top / Show only on scroll https://vertis.d.pr/i/u05ZOo https://vertis.d.pr/i/AETaN5
• Show this header site wide https://vertis.d.pr/i/GQMjZB
• Enable transparent header https://vertis.d.pr/i/BHRbx1
• Enable scroll to top https://vertis.d.pr/i/LIrtnG
• Author biography, Related posts, Sharing icons https://vertis.d.pr/i/kQaHjM
• List spacing, Image position, Content padding, Add separator between posts, Enable card style https://vertis.d.pr/i/RcUrFx

[Soare-Robert-Daniel]

@irinelenache, yes, they are not related. Some are from Neve Pro, and others are from other plugins.

Like Orbit Fox:

themeisle-companion/obfx_modules/header-footer-scripts/init.php
104:				'title'      => __( 'Header/Footer scripts', 'themeisle-companion' ),

[DAnn2012]

@Soare-Robert-Daniel Thank you for addressing the issues with the Customizer. But to completely close my report #4093 , I would like to point out that there are also problems with the missing translations of pages "About us" (themeisle-sdk) and "Otter Blocks".

Thanks again.

[Soare-Robert-Daniel]

@DAnn2012, we are not providing any translation for the About Us page. That is a small module that is shared across all our products with the role of discovering our offerings, and its text domain is not tied to the products (some plugins might not detect if they scan only the theme/plugin level)

If you have the Neve Pro Agency plan, you can remove that page via the White Label feature: https://docs.themeisle.com/article/1061-white-label-module-documentation

[DAnn2012]

@Soare-Robert-Daniel I understand. However, if in the future you want to add the possibility of translating this page, I would like to point out these links which concern the topic and that is the inclusion of the vendor folder in the make-pot command:

Not possible to include vendor wp-cli/i18n-command#84

Vendor folder ignored wp-cli/i18n-command#172

Fix include logic where include path is subdirectory of excluded path. wp-cli/i18n-command#302

neve/bin/makepot.sh

Line 9 in b4d6b67

wordpress:cli bash -c 'php -d memory_limit=1024M "$(which wp)" i18n make-pot ./neve/dist ./neve/languages/neve.pot --headers={\"Last-Translator\":\"friends@themeisle.com\"\,\"Project-Id-Version\":\"Neve\"\,\"Report-Msgid-Bugs-To\":\"https://github.com/Codeinwp/neve/issues\"\} --allow-root '

Thanks.

[pirate-bot]

🎉 This PR is included in version 3.8.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀