在 `npx @wordpress/create-block@latest` 和激活后不显示 WordPress 块

Question

我使用以下方法创建了我的 WordPress 块：

npx @wordpress/create-block@latest infobox

然后，一旦完成，我就在插件中激活了它。但是，当我在可用块中搜索它时，它不会显示在编辑器中。另外，我什至没有在控制台中看到任何错误。

我也尝试再次运行

npm run build

，看看是否有帮助。

这是我的文件格式，我没有对生成的文件进行任何更改：

/wp-content/plugins/infobox/
/wp-content/plugins/infobox/src/
/wp-content/plugins/infobox/src/index.js
/wp-content/plugins/infobox/src/edit.js
...
/wp-content/plugins/infobox/build/
/wp-content/plugins/infobox/build/index.js
/wp-content/plugins/infobox/build/edit.js
...

下面是我的 infobox.php 文件：

<?php
/**
 * Plugin Name:       Infobox
 * Description:       Example block scaffolded with Create Block tool.
 * Requires at least: 6.1
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            The WordPress Contributors
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       infobox
 *
 * @package CreateBlock
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

/**
 * Registers the block using the metadata loaded from the `block.json` file.
 * Behind the scenes, it registers also all assets so they can be enqueued
 * through the block editor in the corresponding context.
 *
 * @see https://developer.wordpress.org/reference/functions/register_block_type/
 */
function create_block_infobox_block_init() {
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_infobox_block_init' );

下面是我的 /src/index.js 文件：

/**
 * Registers a new block provided a unique name and an object defining its behavior.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
import { registerBlockType } from '@wordpress/blocks';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * All files containing `style` keyword are bundled together. The code used
 * gets applied both to the front of your site and to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './style.scss';

/**
 * Internal dependencies
 */
import Edit from './edit';
import save from './save';
import metadata from './block.json';

/**
 * Every block starts by registering a new block type definition.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
 */
registerBlockType( metadata.name, {
    /**
     * @see ./edit.js
     */
    edit: Edit,

    /**
     * @see ./save.js
     */
    save,
} );

下面是我的 /src/edit.js 文件：

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */
export default function Edit() {
    return (
        <p { ...useBlockProps() }>
            { __( 'Infobox – hello from the editor!', 'infobox' ) }
        </p>
    );
}

有什么原因导致该块不显示吗？我可以调试这个吗？

我什至尝试将

console.log("Hello infobox")

放入 index.js 文件中，但它没有在控制台中显示（在我

npm run build

并刷新之后）

Answer 1

有同样的问题。我必须复制旧的自定义块，必须将 src 文件夹中的文件更改为原始文件，然后更改文件夹的名称并替换 json 文件中的标题，这样就可以了（即它是可见的）希望 WP 能修复它。