如何在PHP中访问Gutenberg自定义Redux Store的数据？

Redux Store是前端内存中的状态容器，无法直接被PHP后端读取，必须通过前端数据传递到后端的方式实现需求。以下是两种实用方案，适用于不同场景：

方案一：通过Post Meta同步数据（适合与文章绑定的区块） #

将Redux中的CSS数据同步到文章的自定义Meta字段，PHP通过读取Meta字段获取数据。

1. 注册可REST访问的Post Meta字段 #

在主题functions.php或自定义插件中添加：

function register_custom_css_meta() {
    register_post_meta(
        'post', // 替换为你的目标文章类型（如自定义文章类型）
        '_custom_block_css',
        array(
            'show_in_rest' => true,
            'type' => 'string',
            'single' => true,
            'sanitize_callback' => 'sanitize_textarea_field',
            'auth_callback' => function() {
                return current_user_can('edit_posts');
            }
        )
    );
}
add_action('init', 'register_custom_css_meta');

2. 前端同步Redux数据到Post Meta #

在区块的Edit组件中监听Store变化，自动同步到文章Meta：

import { select, dispatch } from '@wordpress/data';
import { useEffect } from '@wordpress/element';

function Edit(props) {
    useEffect(() => {
        // 监听CSS值变化并同步到Meta
        const unsubscribe = select('mystore/css').subscribe(() => {
            const cssValue = select('mystore/css').getCss();
            dispatch('core/editor').editPost({
                meta: {
                    _custom_block_css: cssValue
                }
            });
        });

        return unsubscribe;
    }, []);

    // 区块其他编辑逻辑...
}

3. PHP读取Meta并保存文件 #

在文章保存时触发文件写入：

function save_custom_css_to_file($post_id) {
    // 跳过自动保存和修订版本
    if (wp_is_post_autosave($post_id) || wp_is_post_revision($post_id)) return;
    // 验证用户权限
    if (!current_user_can('edit_post', $post_id)) return;

    // 获取Meta中的CSS数据
    $css_data = get_post_meta($post_id, '_custom_block_css', true);
    if (empty($css_data)) return;

    // 写入文件（确保目录可写）
    $save_path = get_stylesheet_directory() . '/custom-block-output.css';
    file_put_contents($save_path, $css_data);
}
add_action('save_post', 'save_custom_css_to_file');

方案二：通过AJAX直接提交数据（适合独立于文章的场景） #

直接通过AJAX请求将Redux中的CSS数据发送到PHP后端，触发文件保存。

1. 注册AJAX动作与安全验证 #

在PHP中配置AJAX回调并传递验证Nonce：

function enqueue_block_assets() {
    wp_enqueue_script(
        'custom-block-ajax-script',
        get_template_directory_uri() . '/js/custom-block.js',
        array('wp-blocks', 'wp-data', 'wp-ajax'),
        filemtime(get_template_directory() . '/js/custom-block.js'),
        true
    );

    // 传递AJAX配置到前端
    wp_localize_script('custom-block-ajax-script', 'BlockAjaxData', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('save_css_nonce')
    ));
}
add_action('enqueue_block_assets', 'enqueue_block_assets');

// AJAX回调函数
function handle_save_css_request() {
    // 验证Nonce
    if (!wp_verify_nonce($_POST['nonce'], 'save_css_nonce')) {
        wp_send_json_error('无效的验证信息');
    }
    // 验证权限
    if (!current_user_can('edit_posts')) {
        wp_send_json_error('权限不足');
    }

    // 处理CSS数据
    $css_data = sanitize_textarea_field($_POST['css_data']);
    if (empty($css_data)) {
        wp_send_json_error('CSS数据为空');
    }

    // 写入文件
    $save_path = get_stylesheet_directory() . '/custom-block-output.css';
    $write_result = file_put_contents($save_path, $css_data);

    $write_result ? wp_send_json_success('CSS保存成功') : wp_send_json_error('文件写入失败');
}
add_action('wp_ajax_save_custom_css', 'handle_save_css_request');
// 若允许未登录用户提交，添加此行：
// add_action('wp_ajax_nopriv_save_custom_css', 'handle_save_css_request');

2. 前端触发AJAX提交 #

在区块中添加保存按钮或自动触发逻辑：

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

// 提交CSS到后端的函数
function submitCssToServer() {
    const cssValue = select('mystore/css').getCss();
    
    wp.ajax.send('save_custom_css', {
        data: {
            nonce: BlockAjaxData.nonce,
            css_data: cssValue
        },
        success: (res) => console.log(res),
        error: (err) => console.error(err)
    });
}

// 示例：添加保存按钮
function Edit(props) {
    return (
        <div className="custom-block-editor">
            {/* 区块编辑内容 */}
            <button onClick={submitCssToServer}>保存CSS到服务器</button>
        </div>
    );
}

关键注意事项 #

• 权限验证：两种方案都必须添加用户权限校验和Nonce验证，防止恶意请求。
• 目录权限：确保PHP有目标文件目录的写入权限，可通过chmod命令调整目录权限。
• 数据过滤：使用sanitize_textarea_field等函数过滤输入，避免XSS或恶意代码注入。

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