Editor side translations are loaded on the frontend side

[gigitux]

Describe the bug

On the frontend side, the code loads the block translations that belong to the editor side.

To reproduce

Steps to reproduce the behavior:

1. Change the language to the Netherlands then update all translations.
2. Create a page with the All Products block.
3. Check the page source of the new page and you can notice that the editor side translations are loaded.

Expected behavior

The editor side translations should be loaded only on the editor side.

Screenshots

[Aljullu]

@gigitux I think these translations come from wp-block-editor, right? In that case, do you think this is a duplicate of #4543?

[gigitux]

@gigitux I think these translations come from wp-block-editor, right? In that case, do you think this is a duplicate of #4543?

Mmm, yes, more or less :D
The main problem is that this issue is not related only to the All Products block. I tried with Checkout block and we load the editor-side translation on the frontend side.

Maybe we should merge the issues and be sure that we check the problem for all blocks.

[Aljullu]

Can you check if that happens on npm run build instead of npm start (it doesn't for me 🤔 )? We do some more aggressive tree shaking on build, so some dependencies which are loaded in dev mode aren't in production.

[gigitux]

Can you check if that happens on npm run build instead of npm start (it doesn't for me 🤔 )? We do some more aggressive tree shaking on build, so some dependencies which are loaded in dev mode aren't in production.

I installed the plugin from wp.org and I'm still able to reproduce the problem

[Aljullu]

I installed the plugin from wp.org and I'm still able to reproduce the problem

With the Checkout block? I tested again with this test site and I can't reproduce it:

https://ephemeral-aljullu-20220607.atomicsites.blog/checkout/ (← you will need to add a product to the cart for the Checkout page to appear)

I checked the source code of the page and can't find the wp-block-editor-js-translations string. Am I doing something wrong? 😕

Versions:

• WooCommerce 6.5.1
• WooCommerce Blocks 7.8.0
• WordPress 6.0

[gigitux]

I guess that you are not able to reproduce it because you have to switch to another language (for example switch to Italian).

On my test website, I'm able to reproduce the issue with the Checkout block.

I added a Checkout Block without adding shipping options and this is the Italian translation on the editor side:

This is the Checkout Block on the frontend side:

You can notice that the translations that I highlight on the first image don't appear, but unfortunately, it is loaded on our page:

In this case, the translations are added with a script tag with id wc-checkout-block-frontend-js-before.

[Aljullu]

I guess that you are not able to reproduce it because you have to switch to another language (for example switch to Italian).

Ouch, sorry, I forgot to change the language. 🤦‍♂️

In this case, the translations are added with a script tag with id wc-checkout-block-frontend-js-before.

Right, I'm able to see. I wonder if we should have two different issues, one for the All Products block (which I think is #4543) and one for the Checkout block (maybe this one?). I think they are two different issues and this way we can assign each one to the correct team. Thoughts? 🤔

[gigitux]

I guess that you are not able to reproduce it because you have to switch to another language (for example switch to Italian).

Ouch, sorry, I forgot to change the language. 🤦‍♂️

In this case, the translations are added with a script tag with id wc-checkout-block-frontend-js-before.

Right, I'm able to see. I wonder if we should have two different issues, one for the All Products block (which I think is #4543) and one for the Checkout block (maybe this one?). I think they are two different issues and this way we can assign each one to the correct team. Thoughts? 🤔

I'm not sure because my knowledge of translations is pretty limited. I'm wondering:

• Can we improve how we handle translations? Potentially not handling translations for each block, but create a code that works that we can easily re-use (maybe improve this)
• Are there other blocks that we should check?

[Aljullu]

• Can we improve how we handle translations? Potentially not handling translations for each block, but create a code that works that we can easily re-use (maybe improve this)

I have you some ideas on how to improve it, go for it! Maybe as a cooldown task?

• Are there other blocks that we should check?

I'm not sure, I guess we could check all blocks, but those issues seem to be specific to Checkout and All Products, no?

[gigitux]

I have you some ideas on how to improve it, go for it! Maybe as a cooldown task?

To be honest, for now, I don't have any ideas :(

I'm not sure, I guess we could check all blocks, but those issues seem to be specific to Checkout and All Products, no?

True, but in the case of the All products block, in the dedicated class there isn't any particular code for the translations.

This is the reason why I think that we should debug this code on the AbstractBlock class.

[tarhi-saad]

Upon some investigation, I realized that this bug had been resolved in this PR: #9251. The solution was to remove the dependency on block-editor from frontend blocks.

@gigitux, @Aljullu, could you please double-check? If it works for you, feel free to close this issue! 🙌

[gigitux]

@tarhi-saad You're right! I'm not able to reproduce anymore! We can close this issue and #4543! I will proceed with it! @Aljullu feel free to open both issues if you find some issues!