Gutenberg编辑器自定义侧边栏添加ToggleControl报错求助

问题核心 #

你遇到的报错是因为**registerPlugin注册的侧边栏插件，其render函数的props不包含attributes和setAttributes**——这两个属性是Gutenberg块（通过registerBlockType注册）的专属操作属性，插件侧边栏无法直接调用。

解决方案 #

根据你要控制的是「文章级设置」还是「选中块的属性」，分两种场景处理：

场景1：控制文章级自定义元字段 #

如果要设置的是全局文章的侧边栏显示状态，需要先在PHP中注册可REST访问的元字段，再通过core-data仓库读写：

第一步：PHP注册元字段（必须）

function register_show_sidebar_meta() {
    register_post_meta( 'page', 'show_sidebar', array(
        'show_in_rest' => true,
        'type' => 'boolean',
        'single' => true,
        'default' => true,
    ) );
}
add_action( 'init', 'register_show_sidebar_meta' );

第二步：修改JSX代码

import { registerPlugin } from "@wordpress/plugins";
import { PluginSidebar } from "@wordpress/edit-post";
import { __ } from "@wordpress/i18n";
import { PanelBody, ToggleControl } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';

registerPlugin( 'page-layout-plugin', {
    icon: 'smiley',
    render: () => {
        // 获取当前文章的元数据
        const showSidebar = useSelect( ( select ) => {
            return select( coreStore ).getEditedPostAttribute( 'meta' )?.show_sidebar ?? true;
        }, [] );

        // 获取更新元数据的方法
        const { editPost } = useDispatch( coreStore );

        return (
            <PluginSidebar 
                name="meta-page-settings" 
                title="Gutenberg Settings Sidebar"
            >
                <PanelBody title="侧边栏设置">
                    <ToggleControl
                        label={__('显示侧边栏?', 'starter')}
                        checked={showSidebar}
                        onChange={(val) => editPost({ meta: { show_sidebar: val } })}
                    />
                </PanelBody>
            </PluginSidebar>
        );
    }
} );

场景2：控制当前选中块的属性 #

如果要针对选中的块设置侧边栏状态，通过block-editor仓库操作块属性：

import { registerPlugin } from "@wordpress/plugins";
import { PluginSidebar } from "@wordpress/edit-post";
import { __ } from "@wordpress/i18n";
import { PanelBody, ToggleControl } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';

registerPlugin( 'page-layout-plugin', {
    icon: 'smiley',
    render: () => {
        // 获取当前选中块的ID
        const selectedBlockId = useSelect( ( select ) => {
            return select( blockEditorStore ).getSelectedBlockClientId();
        }, [] );

        // 获取选中块的目标属性
        const showSidebarAttribute = useSelect( ( select ) => {
            if ( !selectedBlockId ) return false;
            return select( blockEditorStore ).getBlockAttributes( selectedBlockId ).showSidebarAttribute ?? false;
        }, [ selectedBlockId ] );

        // 获取更新块属性的方法
        const { updateBlockAttributes } = useDispatch( blockEditorStore );

        return (
            <PluginSidebar 
                name="meta-page-settings" 
                title="Gutenberg Settings Sidebar"
            >
                <PanelBody title="块侧边栏设置">
                    { selectedBlockId ? (
                        <ToggleControl
                            label={__('显示侧边栏?', 'starter')}
                            checked={showSidebarAttribute}
                            onChange={(val) => updateBlockAttributes( selectedBlockId, { showSidebarAttribute: val } )}
                        />
                    ) : (
                        <p>请选中一个块进行设置</p>
                    ) }
                </PanelBody>
            </PluginSidebar>
        );
    }
} );

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