ChatGPT生成的学术摘要关键词Gutenberg区块插件无法显示求助

问题诊断 #

导致区块不显示的核心问题：

• 重复注册资源：PHP中同时通过enqueue_block_editor_assets和init钩子注册同一脚本/样式，引发加载冲突
• JS语法错误：Block.js文件末尾缺失闭合的}，导致JavaScript执行中断
• 模块依赖过时：使用已废弃的wp.editor模块，需替换为wp.block-editor
• 前端样式缺失：未注册区块前端显示所需的CSS，且内联CSS关联目标错误
• 图片渲染缺陷：未上传图片时会渲染无效的<img>标签

修复后的完整代码 #

1. 主插件PHP文件（abstract-keywords-block.php） #

<?php
/**
 * Plugin Name: Abstract and Keywords Block
 * Description: Adds a Gutenberg block for adding an abstract and keywords to an article
 * Version: 1.0
 * Author: Clevious
 * License: GPL2
 */

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

/**
 * Register block and assets
 */
function register_abstract_keywords_block() {
    // Register block editor script
    wp_register_script(
        'abstract_keywords_block-editor-script',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-block-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );

    // Register editor styles
    wp_register_style(
        'abstract_keywords_block-editor-css',
        plugins_url( 'editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
    );

    // Register front-end styles
    wp_register_style(
        'abstract_keywords_block-frontend-css',
        plugins_url( 'frontend.css', __FILE__ ),
        array(),
        filemtime( plugin_dir_path( __FILE__ ) . 'frontend.css' )
    );

    // Register block
    register_block_type( 'abstract-keywords-block/block', array(
        'editor_script' => 'abstract_keywords_block-editor-script',
        'editor_style'  => 'abstract_keywords_block-editor-css',
        'style'         => 'abstract_keywords_block-frontend-css',
    ) );
}
add_action( 'init', 'register_abstract_keywords_block' );

/**
 * Add custom inline CSS to front-end styles
 */
function abstract_keywords_block_custom_css() {
    $css = '.wp-block-abstract-keywords-block .title { color: #fff; background-color: #2508a5; }
    .wp-block-abstract-keywords-block .abstract-keywords-box { background-color: #fff; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); }';
    wp_add_inline_style( 'abstract_keywords_block-frontend-css', $css );
}
add_action( 'wp_enqueue_scripts', 'abstract_keywords_block_custom_css' );
?>

2. Block.js文件 #

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText, MediaUpload } = wp.block-editor;

registerBlockType( 'abstract-keywords-block/block', {
    title: __( 'Abstract and Keywords' ),
    icon: 'list-view',
    category: 'common',
    attributes: {
        title: {
            type: 'string',
            source: 'html',
            selector: '.title'
        },
        abstract: {
            type: 'string',
            source: 'html',
            selector: '.abstract'
        },
        keywords: {
            type: 'string',
            source: 'html',
            selector: '.keywords'
        },
        image: {
            type: 'string',
            source: 'attribute',
            selector: 'img',
            attribute: 'src'
        }
    },
    edit: function( props ) {
        const { attributes: { title, abstract, keywords, image }, setAttributes } = props;

        const onChangeTitle = ( newTitle ) => {
            setAttributes( { title: newTitle } );
        };

        const onChangeAbstract = ( newAbstract ) => {
            setAttributes( { abstract: newAbstract } );
        };

        const onChangeKeywords = ( newKeywords ) => {
            setAttributes( { keywords: newKeywords } );
        };

        const onSelectImage = ( newImage ) => {
            setAttributes( { image: newImage.sizes.full.url } );
        };

        return (
            <div className={ props.className }>
                <RichText
                    tagName="h2"
                    placeholder={ __( 'Title' ) }
                    value={ title }
                    onChange={ onChangeTitle }
                    className="title"
                />
                <RichText
                    tagName="p"
                    placeholder={ __( 'Abstract' ) }
                    value={ abstract }
                    onChange={ onChangeAbstract }
                    className="abstract"
                />
                <RichText
                    tagName="p"
                    placeholder={ __( 'Keywords' ) }
                    value={ keywords }
                    onChange={ onChangeKeywords }
                    className="keywords"
                />
                <div className="abstract-keywords-box">
                    <MediaUpload
                        onSelect={ onSelectImage }
                        type="image"
                        value={ image }
                        render={ ( { open } ) => (
                            <div>
                                { image && <img src={ image } alt={ __( 'Uploaded Image' ) } /> }
                                <button className="upload-button" onClick={ open }>
                                    { __( 'Upload Image' ) }
                                </button>
                            </div>
                        ) }
                    />
                </div>
            </div>
        );
    },
    save: function( props ) {
        const { attributes: { title, abstract, keywords, image } } = props;

        return (
            <div className={ props.className }>
                <h2 className="title">{ title }</h2>
                <p className="abstract">{ abstract }</p>
                <p className="keywords">{ keywords }</p>
                { image && <img src={ image } className="abstract-keywords-box-image" alt={ __( 'Abstract and Keywords Image' ) } /> }
            </div>
        );
    },
} );

3. Editor.css文件 #

/* Title */
.wp-block-abstract-keywords-block .title {
    font-size: 1.5em;
    margin-bottom: 1em;
    padding: 0.5em;
    text-align: center;
}

/* Abstract and Keywords Box */
.wp-block-abstract-keywords-block .abstract-keywords-box {
    padding: 1em;
    text-align: center;
}

/* Upload Image Button */
.wp-block-abstract-keywords-block .upload-button {
    display: inline-block;
    margin: 1em auto;
    padding: 0.5em 1em;
    background-color: #2508a5;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
}

/* Image */
.wp-block-abstract-keywords-block img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

4. 新增frontend.css文件（前端显示用） #

/* Title */
.wp-block-abstract-keywords-block .title {
    font-size: 1.5em;
    margin-bottom: 1em;
    padding: 0.5em;
    text-align: center;
}

/* Abstract and Keywords */
.wp-block-abstract-keywords-block .abstract,
.wp-block-abstract-keywords-block .keywords {
    margin-bottom: 1em;
    line-height: 1.6;
}

/* Image */
.wp-block-abstract-keywords-block img {
    max-width: 100%;
    height: auto;
    margin: 1em auto;
    display: block;
}

内容的提问来源于stack exchange，提问作者Dexter