John Davidson

Message:

So, I am working on a plugin for woo-commerce in WordPress, and now am trying to build a widget.
I have successfully build a custom widget which can be shown across the store (under appearance > widgets).
Now I would like to build a custom Gutenberg Block for use in the page-editor.
The problem right now is that even a simple sample doesn't seem to load, but there is also not even 1 error message anywhere, so I am kinda clueless about how to continue.

I used the sample from WordPress docs itself, and as they state, with this simple example the block should be initialized in the ' inserter dialog'.

Code I have is >

block.jsx (file used is compiled by webpack, loaded and console log shows up):

import { registerBlockType } from '@wordpress/blocks';

import { useBlockProps } from '@wordpress/block-editor';



const blockStyle = {

    backgroundColor: '#900',

    color: '#fff',

    padding: '20px',

};

 console.log("test1");

registerBlockType('gutenberg-examples/example-01-basic-esnext', {

    apiVersion: 2,

    title: 'Example: Basic (esnext)',

    icon: 'universal-access-alt',

    category: 'design',

    example: {},

    edit() {

        const blockProps = useBlockProps( { style: blockStyle } );

        return <div {...blockProps}>Hello World, step 1 (from the editor).</div>;

    },

    save() {

        const blockProps = useBlockProps.save( { style: blockStyle } );

        return <div {...blockProps}>Hello World, step 1 (from the front-end).</div>;

    },

} );

blockload.php (tested the add action("init") but doesn't seem to do much either:

<?php

// if (! defined( "ABSPATH")){

//     exit;

// };



function gutenberg_examples_01_register_block() {

 

 // automatically load dependencies and version

//  $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');

$asset_file = array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => 'fc93c4a9675c108725227db345898bcc');



 wp_register_script(

     'gutenberg-examples-01-esnext',

     plugins_url('wocom_bl/resources/Scripts/bundles/editpage/editpage.bundle.js'),

    //  plugins_url( 'build/index.js', __FILE__ ),

     $asset_file['dependencies'],

     $asset_file['version']

 );



 register_block_type( 'gutenberg-examples/example-01-basic-esnext', array(

     'editor_script' => 'gutenberg-examples-01-esnext',

 ) );



}

// add_action( 'init', 'gutenberg_examples_01_register_block' );

add_action('enqueue_block_assets', 'gutenberg_examples_01_register_block');

and the main plugin file call which starts everything:

if ( wcmbl_isWooCommerceActivated() ) {

    require_once __DIR__ . '/includes/settings.php';

    require_once __DIR__ . '/includes/products/producttab.php';

    // require_once __DIR__ . '/includes/page/register_widgets.php';

     require_once __DIR__ . '/includes/page/blocks/blockload.php';

}

So any syntax error inside the blockload.php will throw an error.
as I have posted it now, everything loads fine, no error anywhere (wp_bugging, true)
BUT there is also not a extra block under the design category in the inserter dialog?

So where would I start to find the culprit now?

EDIT **

So, basically I have no idea what was wrong with the initial js, as it was from the sample on dev.wordpress.

I went with a slightly alternative approach how js returns the content, but it works.
Followed this example (edit2 >> tho this uses a deprecated function I see now, so shouldn't be used, but got something working so the rest is out of the scope of this question):
https://themes.artbees.net/blog/create-a-custom-block-for-wordpress-gutenberg/

So question closed!

---

My Answer:
> widgets). Now, I want to create a custom GutenBerg block for this widget so that users can easily add it to their pages/posts using the block editor.

I have followed the official WordPress documentation on creating custom blocks and have registered my block using `registerBlockType` function. However, when I try to add the block using the inserter dialog in the block editor, my custom block is not showing up.

I have double-checked my code and everything seems to be in order. I have also cleared the browser cache and tried on different browsers, but the issue persists.

I am not sure what could be causing this issue. Any help or guidance on how to troubleshoot this problem would be greatly appreciated. Thank you.