problem with using gutenberg blocks in wordpress customizer - php

Question

to create a guteberg block in wordpress i created a plugin and i used this code to register the block :
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);
}
and then i created TopHeaderInfo_HTML($attributes) in seperated file and i call the file using this code :
require_once plugin_dir_path(__FILE__) . 'inc/TopHeaderInfoWidget.php';
inside the file 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();
}
in the index.js i did this code :
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="[phone]" 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>
)
}
the block is working perfectly in my admin dashboard, i created this block essentially to use it as a widget, in the widgets areas everything is good working just fine no problems no bugs, but when i go the the website customizer and click widgets and try to edit the widget within the customizer i found this error :
Your site doesn’t include support for the "widgetsplugin/info-top-header-widget" block. You can leave this block intact or remove it entirely.