Output HTML Tags In Gutenberg Block

Question

I've been working to update our custom gateway plugin to make use of the block checkout in WooCommerce.

I have managed to get the gateway to output but one of the settings fields we have takes raw html. This is now being rendered on the frontend as plaintext instead of rendering the HTML tags correctly.

I saw a few people mention a RawHTML command but I'm not very familiar with how React works. Everything I have tried has resulted in either nothing being shown or a JS error. I am struggling to figure out how to get this section rendering correctly.

This is the JavaScript that I'm using to output the gateway:

const settings = window.wc.wcSettings.getSetting( 'gateway_data', {} );
const label = window.wp.htmlEntities.decodeEntities( settings.title ) || window.wp.i18n.__( 'Custom Gateway', 'custom_gateway' );
const Content = () => {
    return window.wp.htmlEntities.decodeEntities( settings.description || '' );
};

const Block_Gateway = {
    name: 'custom_gateway',
    label: label,
    content: Object( window.wp.element.createElement )( Content, null ),
    edit: Object( window.wp.element.createElement )( Content, null ),
    canMakePayment: () => true,
    ariaLabel: label,
    supports: {
        features: settings.supports,
    },
};
console.log(Block_Gateway);
window.wc.wcBlocksRegistry.registerPaymentMethod( Block_Gateway );

Does anyone have any guidance on this?

Answer 1

I had a breakthrough shortly after posting the original question (isn't that always the way?).

I reread this answer and realised what I needed to do to get the output rendered correctly.

1. I created the const as described in the other answer.

const htmlToElem = ( html ) => wp.element.RawHTML( { children: html } );

2. I tried adding the anonymous function to the content attribute but that just broke my JS and nothing would load.
3. Instead I directly referenced the const and passed it the settings.description object. This loaded everything as expected.

content: htmlToElem(settings.description),