自定义Gutenberg Block的React字段不显示，无报错求排查

1. 检查JSX语法转译配置 #

Gutenberg块依赖Babel转译JSX，确认你的构建工具链配置：

• 优先使用官方@wordpress/scripts工具，它默认配置了JSX转译，确保package.json的构建命令为wp-scripts build，开发环境用wp-scripts start
• 若自定义webpack配置，需确保@babel/preset-react已安装并加入presets数组：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      }
    ]
  }
};

2. 验证编辑组件的渲染逻辑 #

检查块注册代码中edit函数的返回值：

• 确保edit函数返回有效的React元素，不能是null或未定义值
• 确认Gutenberg组件（如TextControl、PanelBody）已正确导入：

import { TextControl } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';

const Edit = () => {
  const blockProps = useBlockProps();
  return (
    <div {...blockProps}>
      <TextControl label="输入内容" value="" onChange={() => {}} />
    </div>
  );
};

• 若使用useState等状态钩子，检查状态初始化是否正确，避免因状态异常导致组件不渲染

3. 排查静默语法错误 #

即使脚本加载正常，也可能存在未触发明显报错的语法问题：

• 打开Chrome DevTools的Sources面板，在块脚本文件中设置断点，逐行追踪执行流程
• 切换Console面板的日志级别到全部，查看是否有未捕获的JS错误或警告
• 确认react、react-dom依赖与WordPress内置版本兼容，避免版本冲突

4. 核对块注册的脚本依赖配置 #

检查PHP注册块时的脚本依赖是否完整：

• 确保register_block_type的editor_script依赖包含wp-blocks、wp-element、wp-editor等核心包：

register_block_type( 'your-namespace/your-block', array(
  'editor_script' => 'your-block-editor-script',
) );

• 在wp_enqueue_script中，依赖数组需包含必要的Gutenberg核心模块：

wp_enqueue_script(
  'your-block-editor-script',
  plugins_url( 'build/index.js', __FILE__ ),
  array( 'wp-blocks', 'wp-element', 'wp-editor', 'wp-components' ),
  filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' )
);

5. 检查条件渲染逻辑 #

如果字段是通过条件渲染显示的，确认条件表达式是否正确：

• 例如if ( props.content )这类判断，需确保初始状态下条件能满足（比如给content设置默认空字符串而非undefined）
• 排查是否因状态值未更新导致条件不成立，进而隐藏了字段

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