problem with using gutenberg blocks in wordpress customizer

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="+212655667788" value={props.attributes.PhoneNumber} onChange={(value) => { props.setAttributes({ PhoneNumber: value }) }} required />
                    </FlexBlock>
                    <FlexBlock>
                        <TextControl label="Email:" placeholder="[email protected]" 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.

Answer 1

Looking at your code, it seems redundant to use PHP to render the block content when the markup rendered from TopHeaderInfoWidget.php is not dynamically generated. I would suggest starting with wordpress/create-block to generate the basic structure of your plugin, which creates a basic block setup that compiles and works.

Next, I would take what you have in TopHeaderInfoWidget.php and convert it to be the save() function in registerBlockType(...), eg:

save.js

export default function save({ attributes }) {

    const { PhoneNumber, EmailAdress, OfficeAdress } = attributes;

    // The content returned will be stored in the block markup, no need for PHP as it uses the stored block attributes
    return (
        <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 {PhoneNumber}</li>
                                <li><i class="flaticon-web" aria-hidden="true"></i>{EmailAdress}</li>
                                <li><i class="flaticon-pin" aria-hidden="true"></i>{OfficeAdress}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

What you currently have defined in editHeaderInfos() would become the content edit() in edit.js

The block properties and attributes from wp.blocks.registerBlockType() then can be moved to block.json file.

The create-block tool also creates a PHP file which registers and loads the required dependencies for your plugin. If you can re-set up your project this way, you will find it much easier to manage and troubleshoot.

The Create a Block Tutorial has a section that explains the edit() & save() functions. Given your block content is based on block attributes that don't change outside the Editor, PHP is not required to render it. The values of PhoneNumber, EmailAdress & OfficeAdress are stored as markup in the post_content when the save() is called.