Faust.js自定义区块在WordPress区块编辑器中无法编辑求助

1. 先查浏览器控制台错误 #

打开WordPress区块编辑器，按F12调出控制台，切换到Console标签，添加区块时留意红色报错。如果存在JS错误（比如组件未定义、props未传递、语法错误），这大概率是区块消失的直接原因，优先解决这类错误。

2. 检查block.json核心配置 #

确保wp-blocks目录下的block.json包含必要字段：

• attributes：必须为区块的可编辑属性指定type（如string、object），必要时添加default值，示例：

  "attributes": {
    "name": {
      "type": "string",
      "default": ""
    },
    "avatarUrl": {
      "type": "string",
      "default": ""
    }
  }
  

• 确认title、category、icon等基础字段无拼写错误，category需选择WordPress内置分类（如common、widgets）或已注册的自定义分类。
• 若手动修改过editorScript或style路径，需确保指向blockset命令生成的正确资源。

3. 检查Edit.tsx逻辑正确性 #

• 必须让组件正确接收attributes和setAttributes props，示例：

  import { BlockEditProps } from '@wordpress/blocks';
  
  type LeadershipPersonCardAttributes = {
    name: string;
  };
  
  export default function Edit({ attributes, setAttributes }: BlockEditProps<LeadershipPersonCardAttributes>) {
    return (
      <div>
        <input
          value={attributes.name}
          onChange={(e) => setAttributes({ name: e.target.value })}
          placeholder="输入姓名"
        />
      </div>
    );
  }
  

• 避免编写错误JSX（如未闭合标签、使用未定义变量），这类问题会直接导致组件崩溃，区块随之消失。

4. 验证save函数实现 #

index.ts中的save函数必须返回静态JSX，不能包含动态逻辑或依赖客户端状态，示例：

import { BlockSaveProps } from '@wordpress/blocks';
import LeadershipPersonCardAttributes from './types';

export function save({ attributes }: BlockSaveProps<LeadershipPersonCardAttributes>) {
  return (
    <div className="leadership-person-card">
      <h3>{attributes.name}</h3>
    </div>
  );
}

若save函数返回null或结构错误，区块保存后无法渲染，编辑器内也会因预览失败而消失。

5. 确认Faust区块生成流程 #

• 重新执行npx faust blockset，查看终端是否有报错，确保命令成功生成区块资源。
• 检查WordPress后台是否启用Faust插件，且Next.js开发服务器处于运行状态（Faust编辑器区块依赖Next.js提供组件服务）。
• 清除浏览器缓存（Ctrl+Shift+R），刷新编辑器页面后再次测试。

6. 排查区块注册代码 #

确保index.ts中的registerBlockType调用参数正确，示例：

import { registerBlockType } from '@wordpress/blocks';
import metadata from './block.json';
import Edit from './Edit';
import { save } from './save';

registerBlockType(metadata.name, {
  edit: Edit,
  save,
});

确认metadata正确导入，edit和save函数无拼写错误。

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