I am trying to create a basic plugin that will create both admin dashboard as well as a Gutenberg block. I first started with creating the admin side and it was working perfectly fine as I followed WordPress’s tutorial [here]). But then afterI registered a block, it is not getting any editor styles. Also I feel like I am enqueuing the scripts and styles properly. So want to know the correct approach and a fix.
Please note that I will have multiple blocks.
This is my folder structure:
my-plugin
build
src
admin
adminIndex.js
stylesheet
style.css
components
SomeComponent.js
blocks
block-1
block.json
edit.js
blockIndex.js
save.js
editor.scss
style.scss
index.js
plugin.php
package.json
adminIndex.js file looks like this:
import { render } from ‘@wordpress/element’;
import App from ‘./components/App/App’;
window.addEventListener(
‘load’,
function () {
render(
<App />,
document.querySelector( ‘#my-plugin’ )
);
},
false
);
And this is what plugin.php file looks like without block:
class MY_PLUGIN{
public function __construct() {
add_action( ‘admin_enqueue_scripts’, [ $this, ‘load_admin_scripts’ ] );
add_action( ‘admin_menu’, [ $this, ‘menu_item’ ] );
add_action( ‘init’, [ $this, ‘register_blocks’ ] );
}
public function menu_item() {
add_menu_page(
‘My Plugin’,
‘My Plugin’,
‘manage_options’,
‘my-plugin’,
‘
<h2>Pages</h2>
<div id=”my-plugin”></div>
‘,
‘dashicons-schedule’,
3
);
}
public function load_admin_scripts( $hook ) {
// Load only on ?page=my-amazon-plugin
if ( ‘toplevel_page_my-plugin’ !== $hook ) {
return;
}
// Automatically load imported dependencies and assets version.
$asset_file = include plugin_dir_path( __FILE__ ) . ‘build/index.asset.php’;
// Enqueue CSS dependencies.
foreach ( $asset_file[‘dependencies’] as $style ) {
wp_enqueue_style( $style );
}
// Load our app.js.
wp_register_script(
‘my-plugin’,
plugins_url( ‘build/index.js’, __FILE__ ),
$asset_file[‘dependencies’],
$asset_file[‘version’]
);
wp_enqueue_script( ‘my-plugin’ );
// Load our style.css.
wp_register_style(
‘my-plugin’,
plugins_url( ‘src/admin/stylesheet/style.css’, __FILE__ ),
array(),
$asset_file[‘version’]
);
wp_enqueue_style( ‘my-plugin’ );
}
public function register_blocks() {
register_block_type( __DIR__ . ‘/build/blocks/block-1’ );
}
}
index.js file is the import of both of those admin and block index files:
import ‘./admin/adminIndex.js
import ‘./blocks/block-1/blockIndex.js’;
This is how the build folder looks like:
build
blocks
block-1
block.json
index.asset.php
index.css
index.css.map
index.js
index.js.map
style-index.css
style-index.css.map
And lastly, this is block.json file:
{
“$schema”: “https://schemas.wp.org/trunk/block.json”,
“apiVersion”: 2,
“name”: “my-plugin/dummy”,
“version”: “0.1.0”,
“title”: “Dummy”,
“category”: “text”,
“icon”: “flag”,
“description”: “A dummy block”,
“attributes”: {
“message”: {
“type”: “string”,
“source”: “text”,
“selector”: “div”
}
},
“supports”: {
“html”: false
},
“textdomain”: “dummy”,
“editorScript”: “file:../../index.js”,
“editorStyle”: “file:../../index.css”,
“style”: “file:../../style-index.css”
}
What am I doing wrong here? Is there something wrong with enqueuing scripts and styles above? Am I doing the whole thing correctly? I can’t seem to find this type of documentation anywhere that would tell me how to structure this type of plugin. So I am kind of confused. Someone please help.
[ad_2]