0

I am trying to add a custom Gutenberg sidebar panel but it isn't showing up. I'm not sure why though as I have the sidebar.js and then enqueue it in PHP. I ran npm run start and it compiled the JSX into JS and then I enqueued the JS file in the build folder.

init.php:

<?php

add_action( 'enqueue_block_editor_assets', function() {

    wp_enqueue_script(
        'global-page-settings',
        get_stylesheet_directory_uri() . '/build/index.js',
        array( 'wp-edit-post', 'wp-element', 'wp-components', 'wp-plugins', 'wp-data' )
    );

});

Then I add it into my functions.php file:

/**
 * Load Gutenberg settings
 * 
 * @since 1.0.0
 */
require get_template_directory() . '/gutenberg/init.php';
Improve this question
5
  • 1
    😬 sidebar.js contains JSX/react components, you can't include it directly as the browser doesn't understand it! You need a build tool to compile it into native javascript, that's what things like WP Scripts and the block scaffolding tool were created for. Look at your browsers dev console and you should see it breaking since it doesn't understand what import is or why there are tags like <PluginSidebar in the JS file
    – Tom J Nowell ♦
    Mar 21 at 18:21
  • you should read this which has using the create-block tool as the first step developer.wordpress.org/block-editor/getting-started/…, while creating blocks without JSX or build tools is possible, the syntax becomes much harder and less readable, especially when most examples use JSX!
    – Tom J Nowell ♦
    Mar 21 at 18:22
  • @TomJNowell View updated question. I compiled the JSX and then enqueued the index.js from the build folder. Inside of the index.js file. This file has the compiled sidebar code but it si still not working
    – JayDev95
    Mar 21 at 18:28
  • Are you seeing any 404s in the console? Is this coming from a theme or a plugin? Can you provide the JS you're using as well?
    – Welcher
    Mar 21 at 18:42
  • 1
    You should keep the JS in your question, editing it out might have hidden the problem. Again though, check your browsers dev tool console for errors and 404's
    – Tom J Nowell ♦
    Mar 21 at 19:14

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.