WordPress custom block compatability with WPML

It turns out there is one crucial step that needs to be taken to tell WPML how the custom block should be translated. The wpml-config.xml file (placed in the root of your theme/plugin) gives instructions to WPML on how to translate your custom block. So, in my case, I created a new wpml-config.xml file and added the following code. Once I went to WPML > Settings, the new xml file was automatically loaded and the next time I went to translate a page that uses my custom block, the strings were decoupled from their HTML markup.

<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>

Related Posts:

  1. How to work with multilingual sites using the full site editor and block themes?
  2. Issue with translation – Gutenberg
  3. How to translate multiple blocks within one plugin
  4. Add To Gutenberg Sidebar
  5. How to detect the usage of Gutenberg
  6. What is the advantage of ‘register_block_type’ (the PHP function) when creating custom blocks?
  7. Serialize custom block with InnerBlock
  8. What replaces wpColorPicker in Gutenberg?
  9. Gutenberg Range Control default from meta value
  10. Find all the places where a block type is used
  11. Why is the new Gutenberg editor so narrow, and how to make it wider?
  12. WP Blocks – Gutenberg – not rendering $content
  13. Why does the custom HTML block not preserve the HTML characters?
  14. Can’t get dynamic Gutenberg block to render on the frontend
  15. Gutenberg change/remove “Write your story” placeholder in custom blocks
  16. What’s the absolute minimum code that I need to create a dynamic block?
  17. How to make 2/3 width column in Gutenberg
  18. Change default colors in paragraph block settings
  19. Gutenberg Reusable Block of WordPress
  20. Add custom attributes to link in Gutenberg
  21. How do I add a Gutenberg editor to a custom options page
  22. Gutenberg not all editor text translated
  23. WPML Translated Term
  24. Custom Gutenberg Block: Excluding an allowed block from InnerBlock’s templateLock={‘all’}
  25. Determine if block has already been registered
  26. InnerBlocks breaks Flexbox and CSS Grid styles
  27. Is there a way to set the gutenberg color palette outside the theme?
  28. Gutenberg get withState variable in save function
  29. Theme localization in WPML – .mo file error [closed]
  30. Gutenberg block JavaScript localisation on Polyglots does not work
  31. Restrict heading level in Gutenberg block `core/heading`
  32. How do I disable or hide the Layout block setting in the Group block
  33. Cleaning up after block dismount
  34. I cant see Block Editor with v5.7
  35. How to update block attribute after format is applied?
  36. How to add a class to the link of the default Gutenberg Button block?
  37. How to identify what templates are being loaded in a block-based theme [closed]
  38. Check if current page is using blocks (Gutenberg) or is legacy
  39. How do I replace a audio gutenberg block to native audio wordpress
  40. Converting a theme to Gutenberg but some styles are missing in the front end [closed]
  41. React useEffect not work in frontend gutenberg blocks
  42. Gutenberg Block language translation does not work
  43. Display selected image in the MediaPlaceholder component
  44. ACF and Gutenberg block, how to use blocks without ?
  45. Submitting a block to the .org repo: do I submit compiled code, or source code? [closed]
  46. Add button to Block toolbar: toggleFormat is undefined
  47. In a block transform, how do I insert innerBlocks?
  48. What is the name of the user capability to read a reusable block?
  49. Gutenberg – Prevent Column Nesting in the Visual Editor
  50. How to remove whitespaces from source of posts created through WordPress Gutenberg editor
  51. WPML icl_register_string() throws fatal error but works [closed]
  52. Gutenberg blocks (block editor) with get_the_excerpt and get_the_content, using ACF
  53. Basic use of useState
  54. Sort Posts by Sticky then by Latest date using the Latest Posts Block
  55. Unwanted white space next to inputs added within `PluginDocumentSettingPanel` using “
  56. ToolbarDropdownMenu component missing from @wordpress/scripts package
  57. Gutenberg Custom Block Not Validating – Ideas?
  58. Gutenberg dynamic block render_callback gives null for $post
  59. Editing HTML structure of Gutenberg layout recent post?
  60. How to add srcdoc attribute to YouTube oEmbed in Gutenberg oEmbed Block
  61. Pass props / function to InnerBlocks
  62. Categories in Gutenberg
  63. Block editor: content resets to the previous state in “Edit as HTML” by clicking somewhere outside of the editing window
  64. Possible to add the title of a custom gutenberg block to the edit screen?
  65. Post Format Link using Guttenberg
  66. Why does Gutenberg adds 4 around blocks? And how to change this?
  67. admin_notices not shown
  68. Layout Settings in the new Gutenberg editor
  69. How to get blocks with same heigh in columns?
  70. Gutenberg: Issue trying to commit locally
  71. How to register multiple blocks
  72. How to edit post meta by post ID in Gutenberg
  73. How do I change bullet on categories block?
  74. Add a class to img of core/cover block
  75. Hide title block on edit screen in Gutenberg
  76. How can I disable fontSizes of the Paragraph block inside the Quote block with theme.json?
  77. Categories, tags and thumbnails panels are not visible in the Block editor’s post menu
  78. How to disable the Code Editor in Gutenberg?
  79. Enable Gutenberg Editor when editing tags
  80. How to position more than one item over an image in a Gutenberg WordPress block theme
  81. Some CSS classes missing when rendering the page with get_the_content()
  82. Error with RichText Component
  83. Rem font size is different in the frontend and block editor
  84. Add to Media Inserter Categories
  85. Get attributes from last block created
  86. How do I make the block editor use https by default?
  87. Custom Gutenberg block within column block selection and update issue
  88. WP Gutenberg – How to parse simple images?
  89. How to add button to Gutenberg Editing Toolbar in Wordress
  90. Restrict Block from having a Parent or Ancenstor Block
  91. Latest WordPress Version Changes to Block Editor Template
  92. Allowed blocks for core/column
  93. Detecting whenever a user types – in the Gutenberg editor, and checking if there is a preceding or succeeding – then converting both to an em dash
  94. what is the function of the view.js file?
  95. Detect whether a block has server-side render
  96. No aspect ratio selector in a custom block
  97. How do I load css in edit screens for the block builder?
  98. How do I add text or message above the featured image area in gutenberg for a CPT
  99. Block that displays post meta as nested block of Query Loop
  100. InnerBlocks adds any block and saves, but the editor doesn’t show child blocks on reload