控制台报错wp.blocks.blockRegisterType不是函数，求修复Gutenberg区块注册问题

核心错误原因 #

你写错了区块注册的方法名，正确的方法是 wp.blocks.registerBlockType，而非 wp.blocks.blockRegisterType——这是触发该TypeError的直接原因。

完整修复步骤及修正代码 #

1. 修正PHP入队脚本代码 #

• 添加wp-element依赖（JS中使用了React，必须引入该依赖）
• 调整wp_enqueue_script参数顺序（原代码中页脚加载和加载策略的参数顺序颠倒）

修正后的PHP代码：

function include_cta_js()
{
    wp_enqueue_script(
        'custom-cta-script',
        plugin_dir_url(__FILE__) . 'custom-cta-script.js',
        array('wp-blocks', 'wp-editor', 'wp-element'), // 新增wp-element依赖
        '1.0', // 明确版本号便于后续更新
        true // 脚本放到页脚加载，优化编辑器性能
    );
}
add_action('enqueue_block_editor_assets', 'include_cta_js');

2. 修正JS区块注册代码 #

• 替换错误的方法名blockRegisterType为registerBlockType
• 让输入框关联区块属性（原代码输入框未绑定属性值，无法保存用户设置）
• 完善save函数，渲染实际的前端展示内容

修正后的JS代码：

wp.blocks.registerBlockType('custom-cta-script/custom-block', {
    title: 'CTA',
    icon: 'smiley',
    category: 'text',
    attributes: {
        text: { type: 'string', default: '点击按钮' },
        url: { type: 'string', default: '#' },
        backgroundColor: { type: 'string', default: '#007cba' },
        textColor: { type: 'string', default: '#ffffff' }
    },
    edit: function (props) {
        const { attributes, setAttributes } = props;

        return React.createElement("div", { style: { padding: '1rem' } },
            React.createElement("label", null, "Button Text"),
            React.createElement("input", {
                type: "text",
                value: attributes.text,
                placeholder: "Button Text",
                onChange: (e) => setAttributes({ text: e.target.value })
            }),
            React.createElement("label", null, "Button URL"),
            React.createElement("input", {
                type: "text",
                value: attributes.url,
                placeholder: "Button URL",
                onChange: (e) => setAttributes({ url: e.target.value })
            }),
            React.createElement("label", null, "Button Background Color"),
            React.createElement("input", {
                type: "color",
                value: attributes.backgroundColor,
                onChange: (e) => setAttributes({ backgroundColor: e.target.value })
            }),
            React.createElement("label", null, "Button Text Color"),
            React.createElement("input", {
                type: "color",
                value: attributes.textColor,
                onChange: (e) => setAttributes({ textColor: e.target.value })
            }),
            // 实时预览区域
            React.createElement("a", {
                href: attributes.url,
                style: {
                    display: 'inline-block',
                    padding: '0.5rem 1rem',
                    backgroundColor: attributes.backgroundColor,
                    color: attributes.textColor,
                    textDecoration: 'none',
                    marginTop: '1rem'
                }
            }, attributes.text)
        );
    },
    save: function (props) {
        const { attributes } = props;
        return React.createElement("a", {
            href: attributes.url,
            style: {
                display: 'inline-block',
                padding: '0.5rem 1rem',
                backgroundColor: attributes.backgroundColor,
                color: attributes.textColor,
                textDecoration: 'none'
            }
        }, attributes.text);
    }
});

额外优化说明 #

• 把颜色输入改成颜色选择器(type="color")，比文本输入更直观易用
• 给属性添加默认值，避免编辑器出现未定义的异常情况
• 编辑界面增加实时预览区域，用户可以即时看到设置效果

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