为了在wordpress中创建一个guteberg块，我创建了一个插件，并使用以下代码注册了该块：

add_action('init', [$this, 'myInit']); and then callback the myInit : 
function myInit()
    {
 wp_enqueue_script('pluginsscriptwidgets', plugin_dir_url(__FILE__) . 'build/index.js', array('wp-blocks', 'wp-element', 'wp-editor', 'wp-dom-ready'));
 register_block_type('widgetsplugin/info-top-header-widget', array(
            'render_callback' => array($this, 'TopHeaderInfoWidget_HTML')
        ));
}
function TopHeaderInfoWidget_HTML($attributes)
    {
        return TopHeaderInfo_HTML($attributes);
    }

然后我在一个单独的文件中创建了TopHeaderInfo_HTML（$attributes），并使用以下代码调用该文件：

require_once plugin_dir_path(__FILE__) . 'inc/TopHeaderInfoWidget.php';

在文件TopHeaderInfoWidget.php中：

<?php
function TopHeaderInfo_HTML($data)
{
    ob_start();
?>

    <div class="col-lg-9 pd-right_zero">
        <div class="topbar-left topbar-widgets text-left">
            <div id="cargo-office-location-widget-2" class="widget cargo-office-location-widget">
                <div class="office-location clearfix">
                    <div id="tab-1" class="tab-content">
                        <ul class="topbar-office ">
                            <li><i class="flaticon-telephone" aria-hidden="true"></i>Phone <?php echo $data['PhoneNumber'] ?></li>
                            <li><i class="flaticon-web" aria-hidden="true"></i><?php echo $data['EmailAdress'] ?></li>
                            <li><i class="flaticon-pin" aria-hidden="true"></i><?php echo $data['OfficeAdress'] ?></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

<?php
    return ob_get_clean();
}

在index.js中我做了以下代码：

import { TextControl, Flex, FlexBlock, BaseControl } from "@wordpress/components";
wp.blocks.registerBlockType("widgetsplugin/info-top-header-widget", {
    title: "header info website ",
    description: "plugin for widgets",
    icon: "info-outline",
    category: "common",
    attributes: {
        PhoneNumber: { type: "string" },
        EmailAdress: { type: "string" },
        OfficeAdress: { type: "string" }
    },
    edit: editHeaderInfos,
    save: function () {
        return null
    }
})

function editHeaderInfos(props) {
    return (
        <div className="our-widgets-container">
            <BaseControl label="Informations">
                <Flex>
                    <FlexBlock>
                        <TextControl label="Phone:" placeholder="+212655667788" value={props.attributes.PhoneNumber} onChange={(value) => { props.setAttributes({ PhoneNumber: value }) }} required />
                    </FlexBlock>
                    <FlexBlock>
                        <TextControl label="Email:" placeholder="example@email.com" value={props.attributes.EmailAdress} onChange={(value) => { props.setAttributes({ EmailAdress: value }) }} required />
                    </FlexBlock>
                    <FlexBlock>
                        <TextControl label="Adress:" placeholder="rue 23 n 156, oulfa" value={props.attributes.OfficeAdress} onChange={(value) => { props.setAttributes({ OfficeAdress: value }) }} required />
                    </FlexBlock>
                </Flex>
            </BaseControl>
        </div>
    )
}

该块在我的管理 Jmeter 板中工作完美，我创建这个块本质上是为了将其用作一个小部件，在小部件区域中一切都很好，工作正常，没有问题，没有错误，但当我进入网站定制器并单击小部件，并尝试在定制器中编辑小部件时，我发现了这个错误：

Your site doesn’t include support for the "widgetsplugin/info-top-header-widget" block. You can leave this block intact or remove it entirely.