plugin development - Output HTML Tags In Gutenberg Block

admin管理员组

文章数量:1122832

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?

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?

• plugin-development
• block-editor
• html

Share Improve this question edited Apr 22, 2024 at 14:02 Burgi asked Apr 22, 2024 at 13:09 BurgiBurgi 40322 silver badges1515 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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),

本文标签： plugin developmentOutput HTML Tags In Gutenberg Block