Gutenberg区块未加样式表且自定义区块无法显示求助

我帮你梳理下这个自定义区块的问题，主要有两个核心部分需要修正，同时也会告诉你如何正确给区块添加样式表：

一、区块无法正常显示的核心代码问题 #

你的代码里编辑组件（edit）、属性定义（attributes）、保存组件（save）三者完全不匹配，这是导致区块无法正常渲染的关键：

1. 属性与编辑组件的逻辑脱节
   你在attributes里定义了label和title两个属性，但Edit函数里却在处理完全无关的content属性，完全没有绑定label和title，这会导致编辑器无法正确读取和写入数据，自然显示不出预期内容。

2. 保存组件逻辑正确，但需要编辑组件对应配合
   Save组件是输出label和title的内容，但Edit组件没有提供对应的输入控件，所以需要把Edit组件改成对应两个RichText输入框，分别绑定label和title属性。

修正后的完整代码 #

const { __ } = wp.i18n; 
const { registerBlockType } = wp.blocks; 
const { RichText } = wp.editor; 

registerBlockType( 'block-examples/block-example-03-editable-block', { 
    title: __('MonnyEditable Block'), // 修正了拼写错误：MonnyEditabale → MonnyEditable
    icon: 'star-filled', 
    category: 'layout', 
    attributes: { 
        label: { type: 'string', source: 'html', selector: '.label' }, 
        title: { type: 'string', source: 'html', selector: '.title' } 
    }, 
    edit: ( props ) => { 
        const { attributes: { label, title }, setAttributes, className } = props; 
        
        // 处理label内容变更
        const onChangeLabel = ( newLabel ) => {
            setAttributes( { label: newLabel } );
        };
        
        // 处理title内容变更
        const onChangeTitle = ( newTitle ) => {
            setAttributes( { title: newTitle } );
        };
        
        return ( 
            <div className={className}>
                <RichText 
                    tagName="div" 
                    className="label" 
                    onChange={ onChangeLabel } 
                    value={ label } 
                    placeholder={__('输入标签...')}
                /> 
                <RichText 
                    tagName="div" 
                    className="title" 
                    onChange={ onChangeTitle } 
                    value={ title } 
                    placeholder={__('输入标题...')}
                />
            </div>
        ); 
    }, 
    save: function(props) { 
        const { label, title } = props.attributes 
        return ( 
            <div> 
                <div className="label"> 
                    <RichText.Content value={ label } /> 
                </div> 
                <div className="title"> 
                    <RichText.Content value={ title } /> 
                </div> 
            </div> 
        ) 
    } 
} );

二、给Gutenberg区块添加样式表的方法 #

要让样式在编辑器和前端都生效，需要分别注册编辑器样式和前端样式：

1. 准备CSS文件 #

创建两个CSS文件（也可以合并，分开更便于维护）：

• block-editor.css：仅在后台编辑器中生效的样式
• block-frontend.css：在网站前端生效的样式

示例样式内容：

/* block-editor.css */
.block-examples-block-example-03-editable-block .label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}
.block-examples-block-example-03-editable-block .title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

/* block-frontend.css */
.label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}
.title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

2. 在PHP中注册并加载样式 #

如果是WordPress主题或插件开发，需要在PHP文件中添加以下代码来注册样式：

// 注册编辑器样式
function my_custom_block_editor_styles() {
    wp_enqueue_style(
        'my-custom-block-editor-style',
        get_template_directory_uri() . '/path/to/block-editor.css', // 替换成你的文件实际路径
        array( 'wp-edit-blocks' ), // 依赖Gutenberg的基础样式
        filemtime( get_template_directory() . '/path/to/block-editor.css' ) // 自动更新版本号，避免缓存问题
    );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_editor_styles' );

// 注册前端样式
function my_custom_block_frontend_styles() {
    wp_enqueue_style(
        'my-custom-block-frontend-style',
        get_template_directory_uri() . '/path/to/block-frontend.css', // 替换成你的文件实际路径
        array(),
        filemtime( get_template_directory() . '/path/to/block-frontend.css' )
    );
}
add_action( 'enqueue_block_assets', 'my_custom_block_frontend_styles' );

三、额外注意事项 #

• 确保你的JavaScript文件是通过wp_enqueue_script正确加载到编辑器中的，并且声明了wp-blocks、wp-i18n、wp-editor这些依赖脚本
• 代码里的拼写错误（比如MonnyEditabale）已经修正，避免不必要的小问题

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