Can WPML directly translate the attributes of a gutenberg block?

This thread is resolved. Here is a description of the problem and solution.

Problem:
I want to translate the attributes of a custom block.
Solution:
https://wpml.org/documentation/support/language-configuration-files/make-custom-gutenberg-blocks-translatable/

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: Custom Work, Documentation request

This topic contains 11 replies, has 3 voices.

Last updated by Waqas Bin Hasan 1 year, 4 months ago.

Assisted by: Long Nguyen.

Author	Posts
November 30, 2023 at 6:19 pm #14966183
billJ-4	Our front page is made of custom gutenberg blocks. One of them stores its data in attributes on the block, like: <!-- wp:someblock attribute1="hello" attribute2="{'field': 'goodbye'}" --> Is there a way in the wordpress admin to have WPML see those attributes and present them for translation? If not, we may have to call WPML from the client side to translate content in React. Can you point me at some resources about how to do that? The sandbox site you've already created for us is a good place to see what we're trying to translate. Thanks!
December 1, 2023 at 8:43 am #14970189
Long Nguyen WPML Supporter since 02/2022 Languages: English (English ) Timezone: Asia/Ho_Chi_Minh (GMT+07:00)	Hi Bill, Thank you for contacting WPML support, I'd be happy to help you with this issue. Normally, the block data is stored in an object, like this <!-- wp:someblock { "attribute1":"hello", "attribute2":{'field': 'goodbye'} } --> then you can follow the documentation below to create a custom XML configuration code to register the block attribute for translation. https://wpml.org/documentation/support/language-configuration-files/make-custom-gutenberg-blocks-translatable/ For example: <wpml-config> <gutenberg-blocks> <gutenberg-block type="someblock" translate="1"> <key name="attribute1" /> <key name="attribute2" > <key name="field" /> </key> </gutenberg-block> </gutenberg-blocks> </wpml-config> Look forward to your reply. Thanks
December 5, 2023 at 6:08 pm #15001841
billJ-4	This all looks great, and exactly what I need, thank you. But I'm having a hard time finding where to translate the block once I've created the config. Where should it be appearing?
December 6, 2023 at 1:58 am #15003343
Long Nguyen WPML Supporter since 02/2022 Languages: English (English ) Timezone: Asia/Ho_Chi_Minh (GMT+07:00)	Hi, It should appear in the Advanced Translation Editor, when you translate the homepage, like other default blocks: Paragraph, Heading ... If you want to test on a sandbox site, here is the URL hidden link Refer documentation https://wpml.org/documentation/getting-started-guide/translating-content-created-using-gutenberg-editor/ Look forward to your reply. Thanks
December 6, 2023 at 4:21 pm #15010125
billJ-4	In the sandbox site, I can get the img example from the documentation to work, but if I try to translate the object on the wp:img tag, it's not being found for translation (see images). It might be that the sizeSlug is a bad example of a field for translation, so if you could add a test plugin with an attribute that is found for translation, that would help. Thanks!
December 7, 2023 at 2:12 am #15012779
Long Nguyen WPML Supporter since 02/2022 Languages: English (English ) Timezone: Asia/Ho_Chi_Minh (GMT+07:00)	Hi, You need to activate the plugin String Translation to register the block attribute for translation. I also added a custom block Simple Box with the same format and you can check it on the sandbox site. Please check the screenshot attached. Look forward to your reply. Thanks
December 7, 2023 at 2:52 pm #15017863
billJ-4	Ah, great! The simple box is also really helpful. Now, because the site we're actually working on uses a FSE theme with template parts, I have duplicated wpml-config.xml into the twentytwentyfour theme and added an image to its header template part. As you can see, wpml doesn't seem to pick up on the translatable content in that template part. Is this a limitation related to template parts?
December 8, 2023 at 2:26 am #15022365
Long Nguyen WPML Supporter since 02/2022 Languages: English (English ) Timezone: Asia/Ho_Chi_Minh (GMT+07:00)	Hi, Maybe you copy the file wpml-config.xml after translating the header. I make a small change to the header template > Save > Update the translation and the sizeSlug value available in the translation editor as well. Please check the screenshot attached. Look forward to your reply. Thanks
December 13, 2023 at 2:46 am #15050475
billJ-4	I'm sure that's what happened, thank you for the explanation. Block attributes are recognized for translation now, but the brad's custom block content is not actually being translated on the page. In the images you can see the custom content in the translation, and then you can see how it's not translated on the page. I've also tried setting a custom front page while testing, but it seems to behave the same way in both places.
December 13, 2023 at 8:20 am #15051561
Waqas Bin Hasan WPML Supporter since 05/2014 Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)	Hi, This is Waqas and I'll be looking after this ticket until Long is on vacation (this week). The text is translated because the content is recognized by WPML, that's why you see it in ATE, as well as, in String Translation. For the frontend, just like a theme and other parts being shown as translated, this particular text coming from the plugin, needs to be taken care accordingly for the display (or rendering). I'll recommend checking following guides: - https://developer.wordpress.org/block-editor/how-to-guides/internationalization/#how-to-use-i18n-in-javascript - https://wpml.org/documentation/support/translating-the-theme-you-created/ - https://wpml.org/documentation/support/enabling-text-translation-for-themes-not-compatible-with-wpml/ Regards.
December 14, 2023 at 2:46 am #15060447
billJ-4	Hi Waqas, thank you for your help. I modified your test block so that it would use wp.i18n and call __(), but I'm still not seeing translations of that block's content on the front end. Is there something wpml-specific I need to do to ensure that the call to __() sees translations generated by wpml?
December 14, 2023 at 1:13 pm #15063371
Waqas Bin Hasan WPML Supporter since 05/2014 Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)	Thank you for the updates. Well that __() is doing its job great, as well as, WPML (see attached). As you can see that blocks props.content has the translated content. You can observe this when you switch to Spanish from top admin bar and switch to code editor. Please note that when you switch to Spanish translation from top admin bar, while editing the page, you may notice that block becomes corrupted (in visual editor mode). So this is an indication that something wrong with block's coding. Unfortunately support for custom coding is out of scope of this forum. However, WPML offers filters and action hooks that can be used in your WordPress theme or plugin to provide correct multilingual support. Browse following resources for more information: - https://wpml.org/documentation/support/wpml-coding-api/ - https://wpml.org/documentation/support/wpml-coding-api/wpml-hooks-reference/ - https://wpml.org/documentation/support/wpml-coding-api/shortcodes/ - https://wpml.org/faq/how-to-get-current-language-with-wpml/ - https://wpml.org/documentation/support/wpml-tables/ - https://wpml.org/documentation/related-projects/woocommerce-multilingual/wcml-hooks-reference/ - https://wpml.org/documentation/support/ If you need additional custom work, we recommend you contact WPML Contractors at https://wpml.org/contractors/.
December 15, 2023 at 2:23 am #15069231
billJ-4	That's actually not my block, I have no idea who brad is. That block is a block that Long provided to demonstrate how the attributes of a gutenberg block could pass through wpml and end up as translated text on the front end. Long was phenomenally helpful, so today I was able to use the information he provided before he left on vacation to modify that block on the sandbox server and get it working all the way to the translated page. If you're a future reader, the process looks like this: 1. create a wpml-config.xml that tells wpml where to find the attributes of the custom block. translate all the elements inside an array key with a wildcard like ...content... 2. ensure you have the string translation library installed 3. in wp-admin, queue up a post for translation where your block is used That should allow you to translate the attributes from your block. Depending on what you change in a post, it may recognize it needs to be retranslated, or you may have to explicitly tell wpml to queue up your post for translation. Then, to ensure those attributes render as expected: 3. import the wordpress i18n library in your javascript code (use the wp.i18n global if you aren't using modules) 4. call the wp i18n translation function __(your-string) to translate source text using wpml. The test block I was working with wasn't rendering the content because I was.translating the attribute itself but not the place where the attribute was rendered (inside an h2). In my own code, I'm rendering dynamically using React, so there is no real difference between the two. - Matthew