WordPress 6插件开发：如何在块编辑器中获取API密钥设置

问题原因 #

你之前的代码失效有两个核心原因：

1. register_setting('my-plugin', 'api_key_setting')里，第二个参数api_key_setting才是数据库中存储的option名称，你用getEntityRecord('options', 'my-plugin')是去读取名为my-plugin的option，和实际存储的option名不匹配。
2. WordPress默认不会将自定义option暴露给REST API，必须显式配置允许访问。

方法一：通过REST API异步获取（适合动态更新场景） #

第一步：修正PHP的注册设置代码 #

更新register_setting，添加show_in_rest参数让option可被REST API访问：

register_setting( 
    'my-plugin', 
    'api_key_setting',
    array(
        'show_in_rest' => true, // 关键配置：允许REST API读取
        'type' => 'string',
        'sanitize_callback' => 'sanitize_text_field',
        'default' => '',
    )
);

第二步：在edit.js中正确获取 #

使用useSelect钩子处理异步请求，同时处理加载状态：

import { useSelect } from '@wordpress/data';

const Edit = () => {
    // 获取API密钥
    const apiKey = useSelect( ( select ) => {
        const optionRecord = select('core').getEntityRecord('options', 'api_key_setting');
        return optionRecord ? optionRecord.value : '';
    }, [] );

    // 判断是否还在加载
    const isLoading = useSelect( ( select ) => {
        return !select('core').hasFinishedResolution(
            'getEntityRecord', 
            ['options', 'api_key_setting']
        );
    }, [] );

    if (isLoading) {
        return <div>加载中...</div>;
    }

    // 后续可直接使用apiKey发起请求
    return (
        <div className="my-plugin-edit">
            {/* 你的块编辑器内容 */}
        </div>
    );
};

export default Edit;

方法二：通过本地化脚本传递（更简单，适合静态场景） #

如果不需要动态更新API密钥，直接在PHP中将值传递到前端更高效：

第一步：PHP中本地化脚本 #

在加载你的edit.js脚本时，添加本地化数据：

// 假设你的edit.js脚本注册时的handle是'your-plugin-edit-script'
wp_enqueue_script(
    'your-plugin-edit-script',
    plugins_url('edit.js', __FILE__),
    array('wp-blocks', 'wp-element'),
    filemtime(plugin_dir_path(__FILE__) . 'edit.js')
);

// 传递设置值到前端
wp_localize_script( 
    'your-plugin-edit-script', 
    'MyPluginSettings', 
    array(
        'apiKey' => get_option('api_key_setting', ''),
    )
);

第二步：在edit.js中直接使用 #

无需异步请求，直接访问全局变量：

const Edit = () => {
    const apiKey = MyPluginSettings.apiKey;

    // 直接使用apiKey发起请求
    return (
        <div className="my-plugin-edit">
            {/* 你的块编辑器内容 */}
        </div>
    );
};

export default Edit;

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