HTML-код вместо этого отображается в JavaScript для блока Гутенберга

Question

Я создал блок Гутенберга, используя этот код, приведенный ниже.Я также создал вызов API отдыха с помощью функции register_rest_field ().Остальной API вернет HTML-код и будет доступен в JavaScript-коде.Но JS показывает код HTML вместо того, чтобы читать его.

Вот код PHP:

<?php /* PHP Code */
    register_block_type( 'myplugin/myelement', array(
        'attributes' => array(
            'heading' => array(
                'type' => 'string',
                'default' => ''
            ),
            'subheading' => array(
                'type' => 'string',
                'default' => ''
            ),
        ),
        'render_callback' => 'myplugin_render_myelement',
    ) );

    }
    add_action( 'init', 'myplugin_init_myelement' );


    /**
    * Create API fields for additional info
    */
function myplugin_myelement_backend_view_rest_api() {

    register_rest_field(
        'post',
        'myplugin_myelement_style_preview',
        array(
            'get_callback' => 'myplugin_myelement_backend_view',
            'update_callback' => null,
            'schema' => null,
        )
    );


}
add_action( 'rest_api_init', 'myplugin_myelement_backend_view_rest_api' );


function myplugin_myelement_backend_view( $object, $field_name, $request ) {
    $return = '';
    return '<div class="testing_class">This is <strong>with HTML</strong> tags</div>';
}

Вот код JS:

/* JavaScript Code */
const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks

const {
    RichText,
    InspectorControls,
    PanelColorSettings,
    BlockControls,
    AlignmentToolbar,
    MediaUpload,
} = wp.editor;


//  Import JS .
import { myplugin } from '../global';
import { PostsGridIcon } from '../icons';

const { 
    SelectControl,
    TextControl,
    RangeControl,
    PanelBody,
} = wp.components;

const { withSelect } = wp.data;


registerBlockType( 'myplugin/myelement', {
    // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    title: __( 'MyPlugin MyElement' ), // Block title.
    icon: 'format-aside', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: 'layout', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __( 'MyPlugin MyElement' ),
        __( 'post' ),
        __( 'latest recent' ),
    ],
    attributes: {
        heading: {
            type: 'string',
            default: '',
        },
        subheading: {
            type: 'string',
            default: '',
        }

    },


    edit: withSelect( ( select, props ) => {
        const getEntityRecords = select( 'core' ).getEntityRecords;
        const { 
            attributes,
        } = props;

    } )( ( props ) => {
        const {
            isSelected,
            posts,
            categoriesList,
            setAttributes,
        } = props;

        const {
            heading,
            subheading,
        } = props.attributes;

        if( ! posts ){
            return "loading !";
        }

        if ( posts.length === 0 ) {
            return "No posts";
        }

        // prepare Posts Output
        const output = posts.map( function( post ){

                const htmlcode = post.myplugin_myelement_style_preview;
                console.log(htmlcode); /*  This is with HTML */
                return (

                    <div className={ 'myplugin-myelement-wrapper' }>
                        {htmlcode}
                    </div>

                )


        });


        return [

            isSelected && (

                <InspectorControls key = {'inspector'} > 

                    <PanelBody
                        title={ __('Headings') }
                        initialOpen={true}
                    >

                        <TextControl
                            label = { __('Heading') }
                            value = { heading }
                            onChange = { ( newVal ) => setAttributes( { heading: newVal } ) }
                        />
                        <TextControl
                            label = { __('Sub-Heading') }
                            value = { subheading }
                            onChange = { ( newVal ) => setAttributes( { subheading: newVal } ) }
                        />

                    </PanelBody>



                </InspectorControls>

            ),

            <div className = { 'myplugin-block myplugin-posts-grid _' + columns + '_columns_myplugin' }>
                { output }
            </div>

        ];

    } ),

    save: () => null,
} );

Так что в основномконстанта "htmlcode" содержит код HTML, но React JS кодирует его и напрямую отображает код HTML вместо отображения содержимого в формате HTML.Так как я могу решить эту проблему.

ОБНОВЛЕНИЕ: Вывод console.log такой:

<div class="testing_class">TTTTTTTTTTTTTTTTTTTTTT POST BOX YYYYYYYYYYYYY</div>

Вот вывод на странице редактирования: