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 pre-publish conditions to the block editor
  5. How does Gutenberg handle translations in React?
  6. gettext does not translate when called in ajax
  7. How can I access core/paragraph textColor in a block template
  8. Implement Panel Color Inspector Control in Gutenberg
  9. gutenberg dynamic block is returning 404
  10. Gutenberg InspectorControls is deprecated, how to add custom block settings?
  11. How should you internationalize javascript spread in multiple files but build in one?
  12. Why is onChange={ ( content ) => setAttributes( { content } )} now used?
  13. How to set column widths in a CPT block template?
  14. Access GutenBerg data with Javascript?
  15. Only show focused toolbar for Gutenberg Block with Multiple text fields
  16. Gutenberg: How to Change Post Status Programmatically?
  17. Adding a custom PanelColorSettings control to a core block, and using the color slug in a custom className
  18. Enhancing Gutenberg featured image control
  19. WordPress: After Gutenberg plugin migration to block.json the localization/ translations with PolyGlot in JavaScript does not work anymore
  20. Is it possible to create column width presets in Gutenberg?
  21. How to define a Block Style in an Innerblocks template
  22. Option for removing block not appearing in custom gutenberg block
  23. Testing custom themes / plugins under Gutenberg
  24. Gutenberg LinkControl suggestionsQuery not working
  25. Gutenberg – How to prevent block from being deleted and reordered/moved
  26. WordPress Gutenberg Columns block
  27. Gutenberg InnerBlocks predefined block supports
  28. Is it possible to bulk migrate all deprecated instances of a gutenberg block?
  29. How to Add a Container Class to Standard Gutenberg Blocks
  30. How to display InnerBlocks in render callback
  31. Gutenberg – button to parse and format all blocks?
  32. Fetch ID’s associated with a custom post type when translated with WPML?
  33. Custom WP Block using Inner Blocks crashes editor, doesn’t save content
  34. Should I include colon in my msgid in PO file?
  35. Gutenberg Button Border Radius Default
  36. Disable title block on edit screen for a custom post type
  37. Gutenberg: Block validation fails if editor is reloaded or post is edited. data.getBlocks(); is empty in save function
  38. Delete a Gutenberg Block Programmatically?
  39. Can Gutenberg be used as an editor on a page?
  40. Import external data into post using custom Gutenberg block
  41. How do a I add an attribute to element (when using block theme)?
  42. How to transform block variant to default version?
  43. How can I add a color picker to a custom Gutenberg block which includes the default system palette from theme.json?
  44. How to makes Custom Post Type posts as Gutenberg’s patterns?
  45. Can’t run WP e2e-test-utils because the browser exits on login?
  46. Modify the InnerBlocks ‘Add block’ block appender label
  47. Do I need wp-tinymce-js?
  48. wp_schedule_single_event issue with save_post hook in gutenberg
  49. Gutenberg TextareaControl escapes html
  50. Block editor fails to update HTML section when the word “from” is in source code
  51. Gutenberg extending the existing class
  52. Creating Block templates with ‘core/heading’ other than level 2
  53. how to trigger a Gutenberg image gallery lightbox
  54. Remove or rename “Default” from Gutenberg typography settings
  55. How to put and components inside in Gutenberg block
  56. Wp-script package stop to work
  57. CheckboxControl does not visible change
  58. How to import Reusable Blocks programatically?
  59. Remove formatting in rich text with Gutenbergs Block editor
  60. Setting font sizes in theme.json
  61. Is it possible to disable font sizes on sub blocks only?
  62. Get selected block every time a new block is selected in Gutenberg
  63. How do I include and iframe in a Custom Block?
  64. Gutenberg InnerBlocks with ACF Blocks – How to enable multiple buttons?
  65. Trying to edit a page returns the editor encountered an unexpected error
  66. Block patterns: Any way to reset the pattern to whatever is in the code?
  67. Block variation / Variation API scope “transform”
  68. Is there a function to “blockify” html?
  69. Custom style css doesn’t work in Gutenberg preview
  70. Gutenberg get list of all custom image sizes
  71. How to set a template part area?
  72. Video Block does not autoplay
  73. Upgraded to wordpress 5.7 and now I can’t select myself as a post author
  74. Extend the “Convert to Blocks” feature to add additional functionality
  75. Blocks. How to store default settings?
  76. Gutenberg/WordPress – Limit number of categories
  77. Block editor not displaying properly
  78. Can the Gutenberg editor be toggled closed?
  79. Guenberg Block Not Saving – When additional div added
  80. How to open WordPress media create/edit Gallery Dialog
  81. Pages are editable in Gutenberg, but posts are coming up in classic editor
  82. Gutenberg Development vs Release version?
  83. Gutenberg Array push
  84. Gutenberg: Why doesn’t the button core-component render on the frontend
  85. Using styled-components in the save() function on gutenberg
  86. Does WPML translate numbers automatically, or do I have to do the string translation? [closed]
  87. block theme FSE – save changes to the theme?
  88. How can I avoid setTimeout and redundant getEntityRecord calls in a block editor sidebar?
  89. Can this react script be optimized? How to make it faster
  90. Change Featured image location from side to normal using react (gutenberg)
  91. Get postId in a wordpress pattern file?
  92. Remove placeholder from core/image in InnerBlocks template
  93. Gutenberg block not displaying prop values
  94. ACF InnerBlocks breaks css grid, How can we add classes to allowedblocks (WordPress Gutenberg)
  95. How to disable block directory?
  96. Adding custom link text to a URLInputButton
  97. Rearrange order of block into a block category gutenberg
  98. Gutenberg Block Deprecation – Handling old viewScript and styles
  99. Resaving posts to update static blocks
  100. How to dynamically add style tags to Gutenberg editor in react