我正在尝试创建一个具有多个块和一个管理页面的插件。一切似乎都运转良好。管理页面正在显示,块也正在工作。但是当我进入古腾堡编辑器时,控制台中出现错误,这让我担心我所做的是否错误。
这是错误:
'Block "my-plugin/block-1" is already registered'
'Block "my-plugin/block-2" is already registered'
这是插件 php 文件:
class MY_PLUGIN{
public function __construct() {
add_action( 'admin_menu', [ $this, 'menu_item' ] );
add_action( 'admin_enqueue_scripts', [ $this, 'load_custom_wp_admin_scripts' ] );
add_action( 'init', [ $this, 'register_blocks' ] );
}
/**
* Initialize the plugin
*/
public static function init(){
static $instance = false;
if( !$instance ) {
$instance = new self();
}
return $instance;
}
/**
* Create a new admin page for our app.
*/
public function menu_item() {
add_menu_page(
'My Plugin',
'My Plugin',
'manage_options',
'my-plugin',
[ $this, 'dashboard_page' ],
'dashicons-schedule',
3
);
}
/**
* Admin page markup.
*/
public function dashboard_page() {
echo '
<h2>Pages</h2>
<div id="my-plugin"></div>
';
}
/**
* Load admin scripts and stylesheets
*/
public function load_custom_wp_admin_scripts( $hook ) {
// Load only on ?page=my-plugin
if ( 'toplevel_page_my-plugin' !== $hook ) {
return;
}
// Load the required WordPress packages.
// 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' );
register_block_type( __DIR__ . '/build/blocks/block-2' );
}
}
每个块的index.js文件如下所示:
import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import './editor.scss';
import Edit from './edit';
import Save from './save';
import metadata from './block.json';
/**
* Every block starts by registering a new block type definition.
*/
registerBlockType( metadata, {
edit: Edit,
save: Save,
} );
我在这里做错了什么吗?
更新* 下面是 block.json 的样子。两个块相同,只是名称和标题不同。就像区块 1 和区块 2 一样:
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "my-plugin/block-1",
"version": "0.1.0",
"title": "Block 1",
"category": "text",
"icon": "flag",
"description": "Some description",
"attributes": {
"message": {
"type": "string",
"source": "text",
"selector": "div"
}
},
"supports": {
"html": false
},
"textdomain": "block-1",
"editorScript": "file:../../index.js",
"editorStyle": "file:../../index.css",
"style": "file:../../style-index.css"
}
文件夹结构:
您看到的错误消息表明块“my-plugin/block-1”和“my-plugin/block-2”已经注册。这种情况通常发生在多次调用注册码时。
您可以使用以下一些方法来排除故障:
多个插件实例:确保您没有多次初始化插件。静态 init() 方法确保只创建插件的一个实例。但是,如果多次调用此方法,可能会导致块的多次注册。
插件依赖冲突:确保您的插件不依赖于另一个可能也注册相同块的插件。检查您网站上的任何其他插件或活动主题是否可能正在注册具有相同名称的块。
缓存和缓存插件:有时,缓存插件可能会导致块注册问题。清除您现有的所有缓存机制,如果您正在使用缓存插件,请尝试暂时禁用它,看看问题是否消失。
阻止 JSON 文件:确保“my-plugin/block-1”和“my-plugin/block-2”的 block.json 文件不冲突,并且指向脚本和样式的正确文件。
古腾堡插件冲突:如果您有任何其他修改或扩展古腾堡编辑器的插件,它们可能会干扰块注册。暂时禁用其他古腾堡相关插件,看看问题是否仍然存在。
如果您已检查上述所有内容,但问题仍然存在,您可能需要提供更多上下文或共享代码的其他部分来查明问题。
阻止 JSON 文件:确保“my-plugin/block-1”和“my-plugin/block-2”的 block.json 文件不冲突,并且指向脚本和样式的正确文件。
古腾堡插件冲突:如果您有任何其他修改或扩展古腾堡编辑器的插件,它们可能会干扰块注册。暂时禁用其他古腾堡相关插件,看看问题是否仍然存在。