Search code examples
javascriptphpwordpresswordpress-gutenberg

Wordpress custom block not showing in block inserter


I'm trying to create a custom block for a site but the block is not appearing in the editor dialogue. I've gone through multiple tutorials and changed my code a lot but it simply won't work.

What I've checked:

  • The block is added through a plugin but it also doesn't work when moved to the theme.
  • I know the plugin is working correctly as I can use other wp hooks/actions with no issues within the plugin.
  • I have tried using both 'init' & 'enqueue_block_assets' but neither work.
  • I have verified all the file locations and paths are correct as I have echoed them out to check.
  • I have changed to the default theme and it still does not appear.

Any help would be appreciated.

Here is the js block src (which is compiled):

import { registerBlockType } from '@wordpress/blocks'

registerBlockType('ghs/landing-page-block', {
    title: 'Landing Page',
    apiVersion: 2,
    category: 'design',
    icon: 'smiley',
    description: 'Layout for the GHS landing page',
    keywords: ['GHS', 'landing', 'page', 'front'],
    edit: () => {
        return (<div>hello</div>)
    },
    save: () => {
        return (<div>hello</div>)
    }
});

and the php registering it:

add_action('init', function() {
    $asset_file = include( WP_PLUGIN_DIR . '/ghs-custom-blocks/assets/js/landing-page-block.asset.php');

    wp_register_script('ghs-landing-page',
        WP_PLUGIN_DIR . '/ghs-custom-blocks/assets/js/landing-page-block.js',
        $asset_file['dependencies'],
        $asset_file['version']);

    register_block_type('ghs/landing-page-block', [
        'api_version' => 2,
        'editor_script' => 'ghs-landing-page',
    ]);
});

Solution

  • Solved it, it was because I was using WP_PLUGIN_DIR instead of plugin_dir_url(__FILE__). It meant the js request url was from the root instead of the wp installation.