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';
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 whatimport
is or why there are tags like<PluginSidebar
in the JS file