Spectra - Some Blocks Are Not Translatable

Overview of the issue

When using Spectra with WPML, you might experience the following issue: some Spectra blocks do not appear in the Advanced Translation Editor (ATE), or their content remains untranslated on the front end even after translating.

Workaround

• Go to WPML > Settings > Custom XML Configuration in your WordPress dashboard.
• Add the following XML configuration and save:

  <wpml-config>
    <gutenberg-blocks>
      <gutenberg-block type="uagb/info-box" translate="1">
        <xpath>//*[contains(@class, "uagb-ifb-title")]</xpath>
        <xpath>//p[contains(@class, "uagb-ifb-desc")]</xpath>
        <xpath>//span[contains(@class, "uagb-inline-editing")]</xpath>
        <key name="tempHeadingDesc" />
        <key name="ctaText" />
      </gutenberg-block>
      <gutenberg-block type="uagb/image-gallery" translate="1">
        <key name="mediaGallery">
          <key name="*">
            <key name="id"/>
            <key name="url" type="link" />
            <key name="alt" />
            <key name="link" type="link" />
            <key name="caption" />
          </key>
        </key>
        <key name="mediaIDs">
          <key name="*" />
        </key>
      </gutenberg-block>
      <gutenberg-block type="uagb/tabs" translate="1">
        <key name="tabHeaders" />
        <xpath>//*[contains(@class, "uagb-tab")]/a/div</xpath>
      </gutenberg-block>
      <gutenberg-block type="uagb/tabs-child" translate="1">
        <key name="header" />
        <key name="tabHeaders">
          <key name="*" />
        </key>
      </gutenberg-block>
      <gutenberg-block type="uagb/modal" translate="1">
        <xpath>//span[contains(@class, "uagb-inline-editing")]</xpath>
        <xpath type="link">//a[contains(@class, "uagb-modal-button-link")]/@href</xpath>
        <key name="buttonText"/>
      </gutenberg-block>
    </gutenberg-blocks>
  </wpml-config>