Wordpress custom block compatability with WPML

Question

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 the WPML translation plugin. 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 <p>) 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>) 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.

Here is my javascript code that is within the registerBlockType() function:

edit: ( props ) => {

    const { attributes: { content, citation }, setAttributes, className } = props;

    const onChangeContent = ( newContent ) => {
      setAttributes( { content: newContent } );
    };

    const onChangeCitation = ( newCitation ) => {
      setAttributes( { citation: newCitation } );
    };

    return (
      <div className="hello-block--fullwidth alignfull hello-bg--blue hello-text--white">
        <figure>
          <RichText
            tagName="blockquote"
            multiline="p"
            className="hello-tools-blue-cta__blockquote h2 mx-auto text-center font-weight-bold"
            onChange={ onChangeContent }
            placeholder={ __( 'Enter CTA message here...', 'hello-tools' ) }
            value={ content }
            keepPlaceholderOnFocus={ true }
          />
          <RichText
            tagName="cite"
            className="hello-tools-blue-cta__cite d-block text-center"
            onChange={ onChangeCitation }
            placeholder={ __( 'Enter additional text (optional)...', 'hello-tools' ) }
            value={ citation }
            keepPlaceholderOnFocus={ true }
          />
        </figure>
      </div>
    );

  },

  save: ( props ) => {

    return (
      <div className="hello-block--fullwidth alignfull hello-bg--blue hello-text--white">
        <figure>
          <RichText.Content 
            className="hello-tools-blue-cta__blockquote h2 mx-auto text-center font-weight-bold" 
            tagName="blockquote" 
            value={ props.attributes.content } 
          />
          <RichText.Content 
            tagName="cite"
            className="hello-tools-blue-cta__cite d-block"
            value={ props.attributes.citation } 
          />
        </figure>
      </div>
    )

  }

The code that I grabbed from Kadence Blocks for the Infobox block that I am showing for comparison looks like this (note that I just included the first <RichText> element in the edit() function for brevity, there's a lot of additional javascript that doesn't appear to be relevant):

<RichText
   className="kt-blocks-info-box-title"
   formattingControls={ ( linkProperty === 'learnmore' ? [ 'bold', 'italic', 'link', 'strikethrough' ] : [ 'bold', 'italic', 'strikethrough' ] ) }
   tagName={ titleTagName }
   placeholder={ __( 'Title' ) }
   onChange={ onChangeTitle }
   value={ title }
   style={ {
      fontWeight: titleFont[ 0 ].weight,
      fontStyle: titleFont[ 0 ].style,
      color: titleColor,
      fontSize: titleFont[ 0 ].size[ 0 ] + titleFont[ 0 ].sizeType, lineHeight: ( titleFont[ 0 ].lineHeight && titleFont[ 0 ].lineHeight[ 0 ] ? titleFont[ 0 ].lineHeight[ 0 ] + titleFont[ 0 ].lineType : undefined ),
      letterSpacing: titleFont[ 0 ].letterSpacing + 'px',
      fontFamily: ( titleFont[ 0 ].family ? titleFont[ 0 ].family : '' ),
      padding: ( titleFont[ 0 ].padding ? titleFont[ 0 ].padding[ 0 ] + 'px ' + titleFont[ 0 ].padding[ 1 ] + 'px ' + titleFont[ 0 ].padding[ 2 ] + 'px ' + titleFont[ 0 ].padding[ 3 ] + 'px' : '' ),
      margin: ( titleFont[ 0 ].margin ? titleFont[ 0 ].margin[ 0 ] + 'px ' + titleFont[ 0 ].margin[ 1 ] + 'px ' + titleFont[ 0 ].margin[ 2 ] + 'px ' + titleFont[ 0 ].margin[ 3 ] + 'px' : '' ),
      minHeight: ( undefined !== titleMinHeight && undefined !== titleMinHeight[ 0 ] ? titleMinHeight[ 0 ] + 'px' : undefined ),
   } }
   keepPlaceholderOnFocus
/>

Answer 1

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>