Skip Navigation

Home › Support › English Support › [Resolved] Can't translate Gutenberg blocks links

[Resolved] Can't translate Gutenberg blocks links

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: 

This topic contains 8 replies, has 2 voices.

Last updated by Ahmed Mohammed 1 year, 8 months ago.

Assisted by: Ahmed Mohammed.

Author Posts
May 3, 2023 at 9:37 am #13576849

sylvieH-3

Hi,

I've tried a lot of different Gutenberg blocks that make it possible to wrap content into a link (like this one : hidden link) but none of them seem to let me translate the link I set into other languages.

But no matter which plugin I use I can always translate the text inside the container no problem but everytime I translate the link (I can see the translated link just fine in the back-office) it still shows the original French link on the front-end, even when I'm on the English version of the page...

In the attached screenshot: the green rectangle text shows up fine on the english page on the front-end, but the red rectangle text (the english link) does not.

I can't seem to find any gutenberg container link blocks that are translatable.

I don't mind editing one of those plugins and creating a wpml-config.xml file to make the link translatable, so if someone can help me with that it would be great too!

Thanks in advance for your help.

Screenshot-03-05-2023-11-34-16@2x.png
May 3, 2023 at 1:12 pm #13578901

Ahmed Mohammed
Supporter

Timezone: Africa/Cairo (GMT+02:00)

Hi there,

Thank you for contacting WPML support!

I'm not very familiar with the concept of wrapping a Block Editor block into a link. To better understand the issue, I have created a sandbox website at hidden link. Please use the quick login URL provided and try to replicate the scenario. Once we have more information, we can investigate further.

Looking forward to hearing back from you.
May 3, 2023 at 1:21 pm #13579067

sylvieH-3

Thanks!

I just installed the plugin I use to wrap content with links (Hyperlink group block) and created one of those blocks here :

hidden link

When I add french translation, I can translate everything but not the link (I put hidden link and want it to be hidden link for the french page for example).

Here's the english page : hidden link
The french translation : hidden link

Is there a quick way (with wpml-config.xml or another technique) to make just the URL translatable? Thanks ๐Ÿ™‚
May 3, 2023 at 7:32 pm #13581817

Ahmed Mohammed
Supporter

Timezone: Africa/Cairo (GMT+02:00)

Hi there,

Thank you for replicating the issue.

You can use the following XML under WPML โ†’ Settings โ†’ Custom XML Configuration tab:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="tiptip/hyperlink-group-block" translate="1">
      <key name="url">
      </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

That will register the URL from the new plugin for translation.

Hope that helps ๐Ÿ™‚
May 4, 2023 at 7:16 am #13583215

sylvieH-3

Thanks, that's exactly what I was looking for.

I previously tried something similar (creating a wpml-config.xml file at the root the tiptip/hyperlink-group-block plugin with this content inside :

<wpml-config>
    <gutenberg-blocks>
        <gutenberg-block type="tiptip/hyperlink-group-block" translate="1">
            <xpath type="link">//a/@href</xpath>
        </gutenberg-block>
    </gutenberg-blocks>
</wpml-config>

But it didn't work.

Seeing your working solution, it seems that I wasn't that far off, thanks! ๐Ÿ™‚
May 5, 2023 at 8:19 am #13591789

sylvieH-3

Hi,

I have a last question. I also installed a plugin to have more Gutenberg blocks (https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/).

I use only the "popup video" block from this plugin.

I put one of those blocks on this page : hidden link

But I want it to show another video (change the src value of the video tag only) when I'm on the french page.

Could you give me a WPML xml snippet like you did before, to translate this URL?

Thanks!

I've tried this but it doesn't seem to work :

<gutenberg-block type="stackable/video-popup" translate="1">
      <xpath>//video/@src</xpath>
 </gutenberg-block>
May 5, 2023 at 9:00 am #13592169

Ahmed Mohammed
Supporter

Timezone: Africa/Cairo (GMT+02:00)

Hi there,

As you can see in the attached screenshot, the stackable/video-popup block does not have a src attribute for the video, but videoLink and data-video (not sure which one is responsible for displaying the video on the frontend). So you can use something like:

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="stackable/video-popup" translate="1">
      <key name="videoLink">
      </key>
<key name="data-video" />
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

Hope that helps ๐Ÿ™‚

20230505 at 11.56.54.png
May 5, 2023 at 9:17 am #13592375

sylvieH-3

Thanks,

I just tried that (on the sandbox site) and added another video URL to the french translation (...-vert.mp4 instead of ...-blanc.mp4) but on the front-end the ...-blanc.mp4 video is still the one being displayed on both languages.

Sorry for all those questions and thanks a lot for your help... ๐Ÿ™‚
May 5, 2023 at 9:26 am #13592429

Ahmed Mohammed
Supporter

Timezone: Africa/Cairo (GMT+02:00)

Hi there,

Thank you for trying that ๐Ÿ™‚

It could be a compatibility issue with the Stackable โ€“ Page Builder Gutenberg Blocks plugin.

Since we limit 1 issue per ticket to keep things clear and easy to follow, please open a new ticket and we will be glad to help and check it out further.