如何在WordPress前端添加Gutenberg区块编辑器？

核心思路 #

Gutenberg是基于React的编辑器框架，要在前端复刻后台编辑体验，需要加载它的核心脚本、样式，同时借助WordPress REST API完成内容的读取和保存，模拟后台的编辑器数据环境。

手动实现步骤 #

1. 加载Gutenberg依赖资源 #

在主题的functions.php或自定义插件中，添加代码注册并加载Gutenberg的必要资源（仅在需要编辑器的前端页面加载）：

function enqueue_frontend_gutenberg() {
    // 替换成你需要显示编辑器的页面标识，比如页面slug或ID
    if ( ! is_page( 'frontend-edit' ) ) return;

    // 加载Gutenberg核心脚本
    wp_enqueue_script( 'wp-blocks' );
    wp_enqueue_script( 'wp-element' );
    wp_enqueue_script( 'wp-editor' );
    wp_enqueue_script( 'wp-i18n' );
    wp_enqueue_script( 'wp-components' );
    wp_enqueue_script( 'wp-api-fetch' );

    // 加载Gutenberg样式文件
    wp_enqueue_style( 'wp-edit-blocks' );
    wp_enqueue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_frontend_gutenberg' );

2. 初始化编辑器实例 #

在目标前端页面的模板中，添加编辑器容器和初始化脚本：

<div id="frontend-gutenberg-editor" style="max-width: 1200px; margin: 2rem auto; padding: 0 1rem;"></div>

<script type="text/babel">
document.addEventListener('DOMContentLoaded', async () => {
    const { createRoot } = wp.element;
    const { Editor } = wp.editor;
    const { useSelect, useDispatch } = wp.data;
    const { apiFetch } = wp;

    // 替换为你要编辑的页面/文章ID
    const postId = 123;
    let initialContent = '';

    try {
        // 从REST API获取现有内容
        const post = await apiFetch({ path: `/wp/v2/pages/${postId}` });
        initialContent = post.content.raw;

        const FrontendEditor = () => {
            const { editPost } = useDispatch('core/editor');
            const { post } = useSelect(select => ({
                post: select('core/editor').getCurrentPost(),
            }), []);

            // 初始化编辑器内容
            React.useEffect(() => {
                editPost({ content: initialContent });
            }, []);

            return <Editor />;
        };

        const root = createRoot(document.getElementById('frontend-gutenberg-editor'));
        root.render(<FrontendEditor />);
    } catch (error) {
        console.error('加载内容失败:', error);
    }
});
</script>

注意：如果前端环境不支持Babel编译JSX，需要提前将代码编译为纯JavaScript，或者使用WordPress提供的脚本编译工具处理。

3. 添加保存功能 #

在页面中添加保存按钮，并通过REST API提交编辑后的内容：

<button id="save-editor-btn" style="margin: 1rem; padding: 0.5rem 1rem; background: #007cba; color: white; border: none; border-radius: 4px; cursor: pointer;">保存内容</button>

<script>
document.getElementById('save-editor-btn').addEventListener('click', async () => {
    const postId = 123; // 对应编辑的页面/文章ID
    const updatedContent = wp.data.select('core/editor').getEditedPostContent();

    try {
        await apiFetch({
            path: `/wp/v2/pages/${postId}`,
            method: 'POST',
            data: {
                content: updatedContent,
                status: 'publish' // 可选：设置为'draft'保存草稿
            }
        });
        alert('内容保存成功！');
    } catch (error) {
        console.error('保存失败:', error);
        alert('保存失败，请重试');
    }
});
</script>

简化方案：使用Advanced Custom Fields（ACF） #

如果不想手动处理依赖和初始化逻辑，ACF插件的Block Editor字段可以快速实现前端Gutenberg编辑功能：

• 在ACF中创建一个字段组，添加类型为「Block Editor」的字段
• 将字段组关联到需要编辑的页面/文章类型
• 在前端模板中调用the_field('你的字段名')，即可直接加载Gutenberg编辑器，自动处理资源加载和内容存储

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