WordPress编辑器自定义区块自动滚动聚焦问题的解决方法

你遇到的问题是Gutenberg编辑器的默认行为：当编辑区块时，编辑器会自动将选中的区块滚动到可视区域内。对于横向布局的父子区块，这个行为会干扰正常编辑体验。以下是两种可行的解决方法：

方法一：禁用区块的自动滚动聚焦 #

在子区块的注册配置中，添加supports选项，明确禁用scrollIntoViewOnFocus属性，告诉编辑器不要在区块获得焦点时自动滚动：

registerBlockType('spa/child-block', {
    // ... 其他原有配置
    supports: {
        html: true,
        inserter: false,
        reusable: false,
        scrollIntoViewOnFocus: false // 新增该行配置
    },
    // ... 其余代码
});

方法二：覆盖InnerBlocks的默认滚动行为 #

如果方法一效果不佳，可以在子区块的编辑组件中，通过事件监听阻止内部段落区块的默认滚动行为。修改子区块的EditContainer函数：

function EditContainer() {
    const innerBlocksProps = useInnerBlocksProps(useBlockProps(), {
        template: [['core/paragraph']],
        className: "block-slider-inner",
        templateLock: false,
        renderAppender: false,
        orientation: "horizontal",
        // 新增：阻止焦点事件冒泡，避免触发默认滚动
        __experimentalOnFocus: (event) => {
            event.stopPropagation();
        }
    });

    return <section {...innerBlocksProps} />;
}

额外提示 #

检查父、子区块的CSS样式，确保横向滚动容器的overflow-x: auto属性设置正确，避免因容器布局异常触发不必要的滚动行为。

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