Gutenberg服务端渲染(SSR)块编辑器中属性无法更新问题排查

问题现象 #

开发的WordPress服务端渲染（SSR）块，前端能正常展示已保存的属性值，但编辑器中修改属性后始终显示默认值，无法保存修改后的数值。

最小可复现代码 #

客户端注册块及编辑器配置 #

const { __ } = wp.i18n;
const { ServerSideRender } = wp.editor;
const { InspectorControls } = wp.blockEditor;
const { PanelBody, __experimentalNumberControl: NumberControl } = wp.components;

registerBlockType(
    'mysite/trainings',
    {
        title: __( 'Trainings list', 'mysite' ),
        attributes: {
            postsCount: {
                type: 'number',
                default: 9,
            }
        },

        edit: ( { attributes, setAttributes } ) => {
            const { postsCount } = attributes;

            return (
                <>
                    <InspectorControls>
                        <PanelBody
                            title={ __( 'Set number of displayed trainings', 'mysite' ) }
                        >
                            <NumberControl
                                value={ postsCount }
                                onChange={ ( value ) => setAttributes( { postsCount: value } ) }
                                min={ 1 }
                                max={ 9 }
                            />
                        </PanelBody>
                    </InspectorControls>
                    <ServerSideRender
                        block="mysite/trainings"
                        attributes={ {
                            postsCount: 9,
                        } }
                    />
                </>
            );
        },
        save() {
           return null;
        },
    }
);

服务端注册及渲染块 #

add_action( 'init', 'register_trainings_block' );

function register_trainings_block() {

    register_block_type(
        'mysite/trainings',
        array(
            'api_version'     => 2,
            'editor_script'   => 'sm_editor_script',
            'render_callback' => 'render_trainings_block',
            'attributes'      => array(
                'postsCount' => array(
                    'type'    => 'number',
                    'default' => 9,
                ),
            ),
        )
    );
}

function render_trainings_block( $attributes ) {

    $query_args = array(
        'post__in' => array(
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10 // IDs of posts
        ),
        'post_type' => 'sm_training',
        'orderby' => 'post__in',
        'paged' => '1'
    );

    $posts = new WP_Query( $query_args );

    $output = '<section class="wp-block-mysite-trainings">';

    $i = 0;
    foreach ( $posts->posts as $post ) {

        if ( $i < $attributes['postsCount'] ) {
            ob_start();
            $output .= get_template_part( 'template-parts/content/training' );
            $output .= ob_get_clean();
        }

        $i++;
    }

    $output .= '</section>';

    return $output;

}

入队编辑器脚本 #

add_action( 'enqueue_block_editor_assets', 'load_editor_scripts' );

public function load_editor_scripts() {
    wp_enqueue_script( 'sm_editor_script', get_template_directory_uri() . '/assets/dist/js/editor.js', array(
        'wp-blocks',
        'wp-i18n',
        'wp-editor',
        'wp-components',
        'wp-block-editor'
    ), '1.0.0', true );
    wp_localize_script( 'sm_editor_script', 'gutenbergBlocks', array( 'themeUrl' => get_template_directory_uri() ) );
}

问题原因及修复方案 #

1. ServerSideRender硬编码属性值，未同步当前修改 #

在edit函数中，ServerSideRender的attributes被硬编码为{ postsCount: 9 }，导致编辑器预览始终显示默认值，且无法触发属性变更的保存逻辑。

修复： 将硬编码的数值替换为当前属性值：

<ServerSideRender
    block="mysite/trainings"
    attributes={ {
        postsCount: postsCount, // 使用当前属性值而非固定9
    } }
/>

2. NumberControl返回值类型不匹配 #

__experimentalNumberControl的onChange事件返回的是字符串类型，但属性定义的是number类型，类型不匹配会导致Gutenberg无法正确保存属性值。

修复： 在onChange中把值转为数字类型：

<NumberControl
    value={ postsCount }
    onChange={ ( value ) => setAttributes( { postsCount: Number(value) } ) } // 转为数字
    min={ 1 }
    max={ 9 }
/>

3. 可选：确保服务端与客户端属性定义一致 #

虽然当前服务端和客户端的属性定义一致，但需注意：Gutenberg优先以客户端注册的属性定义为准，若两端类型或默认值不一致，也可能导致保存异常。保持两端attributes配置完全相同即可。

修改后的客户端edit函数代码 #

edit: ( { attributes, setAttributes } ) => {
    const { postsCount } = attributes;

    return (
        <>
            <InspectorControls>
                <PanelBody
                    title={ __( 'Set number of displayed trainings', 'mysite' ) }
                >
                    <NumberControl
                        value={ postsCount }
                        onChange={ ( value ) => setAttributes( { postsCount: Number(value) } ) }
                        min={ 1 }
                        max={ 9 }
                    />
                </PanelBody>
            </InspectorControls>
            <ServerSideRender
                block="mysite/trainings"
                attributes={ {
                    postsCount: postsCount,
                } }
            />
        </>
    );
},

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