如何限制WordPress Gutenberg的core-columns区块列数不超过3列？

实现思路 #

通过修改核心columns区块的属性定义，将列数最大值设为3，同时处理已存在的超量列区块，自动重置为3列。无需完全替换RangeController，仅通过区块过滤器修改属性并做值校验即可。

具体步骤 #

1. 在主题的functions.php中添加脚本注册代码，加载自定义编辑器脚本：

function restrict_core_columns_max() {
    wp_enqueue_script(
        'restrict-columns-limit',
        get_stylesheet_directory_uri() . '/js/restrict-columns.js',
        array( 'wp-blocks', 'wp-element', 'wp-editor' ),
        wp_get_theme()->get('Version'),
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'restrict_core_columns_max' );

2. 在主题目录下创建js/restrict-columns.js文件，写入以下代码：

// 修改columns区块属性，设置列数最大值为3
wp.hooks.addFilter( 'blocks.registerBlockType', 'custom/restrict-columns-max', ( settings, blockName ) => {
    if ( blockName === 'core/columns' ) {
        settings.attributes.columns.max = 3;
        // 确保默认值不超限
        if ( settings.attributes.columns.default > 3 ) {
            settings.attributes.columns.default = 3;
        }
    }
    return settings;
} );

// 处理已存在的超量列区块，自动重置为3列
wp.hooks.addFilter( 'editor.BlockEdit', 'custom/force-columns-limit', ( BlockEditComponent, props ) => {
    if ( props.name !== 'core/columns' ) {
        return <BlockEditComponent { ...props } />;
    }

    const { attributes, setAttributes } = props;
    if ( attributes.columns > 3 ) {
        setAttributes( { columns: 3 } );
    }

    return <BlockEditComponent { ...props } />;
} );

3. 保存文件后进入后台编辑器，添加core-columns区块时，RangeControl最大值会变为3，无法选择超过3列；已存在的超量列区块会自动重置为3列。

补充说明 #

• 这种方法无需替换原BlockEdit组件，仅通过过滤器修改属性和校验值，简洁且不易与核心代码冲突。
• 若主题更新，建议备份自定义js文件，或把代码封装成独立插件，避免功能受主题更新影响。

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