Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Translate Web Stories using WPML #13446

Open
diiegopereira opened this issue Aug 28, 2023 · 6 comments
Open

Translate Web Stories using WPML #13446

diiegopereira opened this issue Aug 28, 2023 · 6 comments
Labels
Group: Integration Integration with other platforms and plugins Group: WordPress Changes related to WordPress or Gutenberg integration P3 Nice to have Type: Enhancement New feature or improvement of an existing feature

Comments

@diiegopereira
Copy link

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:

Would it be possible to implement this?
@diiegopereira diiegopereira added the Type: Enhancement New feature or improvement of an existing feature label Aug 28, 2023
@swissspidy
Copy link
Collaborator

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 swissspidy added Group: Integration Integration with other platforms and plugins Group: WordPress Changes related to WordPress or Gutenberg integration labels Aug 30, 2023
@diiegopereira
Copy link
Author

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?

@swissspidy
Copy link
Collaborator

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.

@diiegopereira
Copy link
Author

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.

@swissspidy
Copy link
Collaborator

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.

@diiegopereira
Copy link
Author

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.

@swissspidy swissspidy added the P3 Nice to have label May 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Group: Integration Integration with other platforms and plugins Group: WordPress Changes related to WordPress or Gutenberg integration P3 Nice to have Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@swissspidy @diiegopereira