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.

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

Problem: I am trying to build a simple custom WordPress block using the Block API, but I'm struggling to get the text strings to show up for translation properly within WPML (using translation editor).

Solution: You'll need some custom XML config for the custom block. Please have a look at this article https://wpml.org/documentation/support/language-configuration-files/#gutenberg-blocks. Basically, you need to add this XML config to let WPML know about your new block and how to handle it.

This topic contains 4 replies, has 2 voices.

Last updated by usahello 1 month, 1 week ago.

Assigned support staff: Radu.

Author Posts
September 7, 2019 at 10:00 pm #4529833

usahello

I am trying to build a simple custom WordPress block using the Block API, but I'm struggling to get the text strings to show up for translation properly within WPML (using custom translation editor). I've seen other custom blocks build by other plugins (e.g. Kadence Blocks) accomplish what I'm trying to do so I know it's possible.

The goal is to have the text strings register separately in the WPML translation editor. The custom block I'm building shows up in the WPML editor as one big string that contains all of the HTML.

These screenshots show how the Kadence Infobox custom block renders it's two RichText elements (the first is an H2 element and the second is a paragraph) separately and without any of their HTML. For comparison, you can see that my custom block appears in WPML with both RichText elements (a blockquote and a cite element) together and with all of the HTML, including the wrapper and container markup. Also for reference is what the blocks look like in the WP Editor.

I can provide my code if that's helpful, but I've compared my registerBlockType() edit and save functions with Kadence Blocks and I can't notice any difference.

September 9, 2019 at 9:15 am #4535123

Radu
Supporter

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hey,

Thank you for reaching out the WPML support!

As I understand from your message, you just created a new block and you'd like to make it translatable. In this case, I think that you'll need some custom XML config for it too. Please have a look at this article https://wpml.org/documentation/support/language-configuration-files/#gutenberg-blocks. Basically, you need to add this XML config to let WPML know about your new block and how to handle it. Please have a look at this and give it a try.

Thanks,
Radu

September 9, 2019 at 3:30 pm #4538537

usahello

Radu,

Thank you very much for your quick reply. I somehow overlooked the need to add the custom block structure to the wpml-config.xml file. That seems to be the missing piece! After I first created the new XML file in the root directory of my plugin I didn't see any difference in the WPML translation editor.

<wpml-config>
	<gutenberg-blocks>
		<gutenberg-block type="hello-tools/blue-cta" translate="1">
			<xpath>//div/figure/blockquote/p</xpath>
			<xpath>//div/figure/cite</xpath>
		</gutenberg-block>
	</gutenberg-blocks>
</wpml-config>

Then I went to the WPML > Settings page to see if there was any other steps I needed to take, but didn't see any. I tried translating the custom block again and this time it worked. So one last question is, when I update the wpml-config.xml file do I need to go to WPML > Settings each time a change is made to reload the XML file?

September 9, 2019 at 9:48 pm #4540285

Radu
Supporter

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03:00)

Hey,

You don't need to reload the XML file or anything like that. I guess that this happened because you already started to translate the page with the block, before adding the XML config. Basically, when you do changes like this in the middle of a page translation, you need to complete the translation to 100% first and then edit it once again.

Basically, WPML starts adding to the translation editor the existing content (remember that he doesn't know about you custom block yet). WPML will scan again the original language for new content (once you add the XML config, he'll know that he should include the custom block in his scan) and will make it available for translation.

However, I'm glad that to hear that you managed to sort this out using the XML config. You can mark this ticket as resolved if things are done on this subject.

Thanks,
Radu

September 9, 2019 at 9:52 pm #4540289

usahello

I thought that I finished the translation 100% before deleting the block and creating another one after the wpml-config.xml file was loaded, but maybe I didn't. Regardless, it seems to be working and if I notice anything different in the future I'll reach out again. Thanks for the support.