web-stories-wp icon indicating copy to clipboard operation
web-stories-wp copied to clipboard

Published 20 hours ago • verified publisher icon GoogleForCreators

Translate Web Stories using WPML

Open diiegopereira opened this issue 1 year ago • 6 comments

Feature Description

Hi there, this is Diego from the WPML Compatibility team.

We did some testing with the plugin and found that we can add translation support with WPML if the post_content value were wrapped in a gutenberg block.

For instance, instead of having just the HTML content inside post_content:

<html>
    ...
</html>

We could have something like:

<!-- wp:google/web-story -->
<html>
    ...
</html>
<!-- /wp:google/web-story -->

With this, we could use our language configuration file to find the strings using XPATH and then register and translate these strings: https://wpml.org/documentation/support/language-configuration-files/#gutenberg-blocks

Here is a quick example for the XML file:

<wpml-config>
  <custom-types>
    <custom-type translate="1">web-story</custom-type>
  </custom-types>  
  <gutenberg-blocks>
    <gutenberg-block type="google/web-story" translate="1">
      <xpath>/html/@lang</xpath>
      <xpath>/html/head/title</xpath>
      <xpath>//*[contains(@class,"text-wrapper")]//span</xpath>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

This worked correctly as we can see here:

  • Original: https://onyx-whistle.sandbox.otgs.work/web-stories/test-stories-1/
  • Translation: https://onyx-whistle.sandbox.otgs.work/es/web-stories/test-stories-1-es/

Would it be possible to implement this?

diiegopereira avatar Aug 28 '23 19:08 diiegopereira

Hi Diego, very interesting workaround you're sharing here with the block approach.

I can confirm this allows translating a story using the WPML the translation editor.

The one problem with this approach is that you will never be able to open the translated story in the story editor anymore.

That is because the post_content column is not actually used directly by the editor. The source of truth is in the post_content_filtered column. After translating with WPML, post_content is modified and post_content_filtered is empty, so the translated story appears to be empty when opening it in the story editor afterwards. And when you save it, the translation is of course gone.

I see that WPML adds a warning when opening a translated story like this, but it can be ignored:

Screenshot 2023-08-29 at 13 08 34

If someone is OK with never ever being able to open a translated story in the editor again, then this approach would work. However, it is not a safe default behavior due to the risk of losing this content, which is also an issue when for example disabling WPML again.

So I think this is best achieved using a dedicated Web Stories <-> WPML companion plugin for those who wish to use this.

swissspidy avatar Aug 29 '23 11:08 swissspidy

Hello Pascal, thanks for the feedback!

We did some tests to see how Web Stories plugin uses the post_content_filtered column. If it just copied the value from post_content, it would be easy to fix this by just duplicating the value after translation. However, we found that it have a JSON content, and that it is generated before the content from post_content. So this would require a bit more complex integration.

About the issue you mentioned with the translation editors, we usually not recommend to mix translation modes in the same post: https://wpml.org/documentation/translating-your-contents/using-different-translation-editors-for-different-pages/#when-to-use-manual-translation

For example, let me describe a common scenario for page builder plugins:

  • User creates a page using a page builder plugin
  • User translate that page using ATE (Advanced Translation Editor)
  • User edit the page layout using the manual editor. So far, everything works.
  • User modify the translation using ATE. Modifications made with the manual editor will be lost.

Therefore, our official recommendation is not to mix different editors for the same post. I believe this would also apply to the Web Stories plugin.

So, if we continue with the original idea (wrap post_content in a Gutenberg block), the recommended workflow would be:

  • If you want to keep the same layout for both languages, use the translation editor to translate the post.
  • If you want to have different layouts per language, duplicate the post and then edit it using the manual editor.

We can cover both scenarios in a documentation on how to use the plugin with WPML.

After that, we can monitor how users are using the plugin, and if needed, we can work on better integration based on user feedback.

What do you think? Can we continue with the original approach?

diiegopereira avatar Sep 04 '23 13:09 diiegopereira

So, if we continue with the original idea (wrap post_content in a Gutenberg block), the recommended workflow would be:

  • If you want to keep the same layout for both languages, use the translation editor to translate the post.
  • If you want to have different layouts per language, duplicate the post and then edit it using the manual editor.

That makes sense to me. Just noting that (1) might not be possible very often, because translations can be shorter and longer. So I assume Web Stories users are more likely to do (2).

Can we continue with the original approach?

Can you elaborate on that? Does that mean you will be adding the Gutenberg block wrapper and XML config etc. in WPML? Just to clarify that this is not something that you expect us to add in the Web Stories plugin.

swissspidy avatar Sep 04 '23 14:09 swissspidy

Can you elaborate on that? Does that mean you will be adding the Gutenberg block wrapper and XML config etc. in WPML? Just to clarify that this is not something that you expect us to add in the Web Stories plugin.

We think it's safer if you could implement the Gutenberg wrapper in the Web Stories plugin. It would be possible?

With that in place, we can generate an XML configuration and then add it to our remote repository: https://github.com/OnTheGoSystems/wpml-config

This should be enough as the remote config should load automatically when activating WPML.

If you have any dummy/test content for the Web Stories plugin it would be also very useful. We will need some examples of how it is used to generate a XML configuration that covers most uset needs.

diiegopereira avatar Sep 05 '23 13:09 diiegopereira

We think it's safer if you could implement the Gutenberg wrapper in the Web Stories plugin. It would be possible?

I will need to think about it. I worry that adding this wrapper causes backward compatibility issues

If you have any dummy/test content for the Web Stories plugin it would be also very useful. We will need some examples of how it is used to generate a XML configuration that covers most used needs.

If you install the Web Stories plugin and go to Stories -> Explore Templates, there's 59 unique templates that should cover everything. You can easily create a new story from any template.

swissspidy avatar Sep 05 '23 14:09 swissspidy

I will need to think about it. I worry that adding this wrapper causes backward compatibility issues

Ok, thanks! We will wait.

If you install the Web Stories plugin and go to Stories -> Explore Templates, there's 59 unique templates that should cover everything. You can easily create a new story from any template.

Great! This will be very helpful.

diiegopereira avatar Sep 07 '23 13:09 diiegopereira