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