如何在Gutenberg中访问插件全局设置以获取API凭证？

别担心，这个需求完全可以实现，而且是Gutenberg开发里的常规操作——你并没有遗漏核心文档，只是需要用正确的方式把插件的全局设置传递到编辑器环境中。下面是具体的实现步骤：

1. 先为插件注册全局设置页面 #

首先你需要用WordPress的Settings API创建一个全局设置页面，用来存储你的第三方API凭证（比如API密钥、密钥等）。这些设置会存在wp_options表中，不需要每个区块重复配置。

举个简单的示例代码（放在你的插件主文件里）：

// 添加设置菜单
add_action('admin_menu', 'my_plugin_add_settings_page');
function my_plugin_add_settings_page() {
    add_options_page(
        '我的插件API设置',
        '插件API设置',
        'manage_options',
        'my-plugin-api-settings',
        'my_plugin_render_settings_page'
    );
}

// 渲染设置页面
function my_plugin_render_settings_page() {
    ?>
    <div class="wrap">
        <h1>插件API设置</h1>
        <form method="post" action="options.php">
            <?php
            settings_fields('my_plugin_api_settings_group');
            do_settings_sections('my-plugin-api-settings');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

// 注册设置字段
add_action('admin_init', 'my_plugin_register_settings');
function my_plugin_register_settings() {
    register_setting(
        'my_plugin_api_settings_group',
        'my_plugin_api_key',
        array('sanitize_callback' => 'sanitize_text_field')
    );

    add_settings_section(
        'my_plugin_api_section',
        'API凭证',
        'my_plugin_api_section_desc',
        'my-plugin-api-settings'
    );

    add_settings_field(
        'my_plugin_api_key_field',
        'API密钥',
        'my_plugin_api_key_field_render',
        'my-plugin-api-settings',
        'my_plugin_api_section'
    );
}

// 字段渲染函数
function my_plugin_api_key_field_render() {
    $api_key = get_option('my_plugin_api_key');
    echo '<input type="text" name="my_plugin_api_key" value="' . esc_attr($api_key) . '" class="regular-text">';
}

function my_plugin_api_section_desc() {
    echo '请输入第三方API的凭证信息';
}

2. 将全局设置传递到Gutenberg编辑器 #

Gutenberg区块的JavaScript代码运行在浏览器环境中，所以需要用PHP把存储在wp_options里的凭证传递到前端。这里推荐用wp_localize_script或者wp_add_inline_script：

方法一：使用wp_localize_script #

在你注册区块脚本的地方，添加如下代码：

function my_plugin_enqueue_block_assets() {
    // 注册区块脚本
    wp_register_script(
        'my-block-script',
        plugins_url('build/index.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(plugin_dir_path(__FILE__) . 'build/index.js')
    );

    // 将全局设置传递到前端
    wp_localize_script(
        'my-block-script',
        'MyPluginGlobalSettings',
        array(
            'apiKey' => get_option('my_plugin_api_key'),
            // 可以添加更多字段，比如API地址等
        )
    );

    wp_enqueue_script('my-block-script');
}
add_action('enqueue_block_editor_assets', 'my_plugin_enqueue_block_assets');

方法二：使用wp_add_inline_script #

如果你觉得wp_localize_script不够灵活，也可以用这个方法直接注入JSON：

function my_plugin_enqueue_block_assets() {
    wp_register_script(
        'my-block-script',
        plugins_url('build/index.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(plugin_dir_path(__FILE__) . 'build/index.js')
    );

    $settings = json_encode(array(
        'apiKey' => get_option('my_plugin_api_key'),
    ));

    wp_add_inline_script(
        'my-block-script',
        'const MyPluginGlobalSettings = ' . $settings . ';',
        'before'
    );

    wp_enqueue_script('my-block-script');
}
add_action('enqueue_block_editor_assets', 'my_plugin_enqueue_block_assets');

3. 在区块JavaScript中使用全局凭证 #

现在你可以在区块的JS代码里直接访问MyPluginGlobalSettings对象了，比如在API请求中使用：

// 示例：在区块编辑器中发起API请求
async function fetchThirdPartyData() {
    if (!MyPluginGlobalSettings.apiKey) {
        alert('请先在插件设置中配置API密钥');
        return;
    }

    try {
        const response = await fetch('https://third-party-api.com/data', {
            headers: {
                'Authorization': `Bearer ${MyPluginGlobalSettings.apiKey}`
            }
        });
        const data = await response.json();
        // 处理返回的数据
        console.log(data);
    } catch (error) {
        console.error('API请求失败:', error);
    }
}

重要安全提醒 #

如果你的区块需要在**前端网站（非编辑器）**显示从第三方API获取的数据，绝对不要把凭证直接暴露给前端用户！这种情况下，你应该：

• 在WordPress中创建一个自定义REST API端点
• 在端点的PHP代码中使用全局凭证调用第三方API
• 然后区块的前端代码请求这个自定义REST端点，获取处理后的数据

这样可以避免敏感的API凭证泄露到浏览器中。

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