如何将WordPress Gutenberg编辑器中新插入的块滚动到视图中？

嘿，这个需求我刚好实践过，给你一步步拆解怎么实现：

步骤1：获取插入后块的唯一标识（clientId） #

当你调用insertBlock时，它会返回插入后的块对象，里面包含了这个块的clientId——这是我们后续获取DOM元素的关键：

const nextBlock = createBlock( 'core/paragraph' );
// 保存插入后的块对象，拿到clientId
const insertedBlock = wp.data.dispatch( 'core/editor' ).insertBlock( nextBlock );

步骤2：获取滚动目标（source元素） #

Gutenberg提供了专门的工具方法wp.dom.getBlockContainer()，可以通过clientId直接拿到对应块的DOM容器，这就是我们要滚动到的source：

const sourceElement = wp.dom.getBlockContainer( insertedBlock.clientId );

步骤3：获取编辑器的滚动容器（container元素） #

编辑器的滚动区域通常是带有.editor-styles-wrapper类的元素，你可以直接通过选择器获取：

const scrollContainer = document.querySelector( '.editor-styles-wrapper' );
// 如果这个容器不对，试试块列表的容器：.editor-block-list__layout
// const scrollContainer = document.querySelector( '.editor-block-list__layout' );

步骤4：调用dom-scroll-into-view完成滚动 #

接下来就可以按照文档调用滚动方法了。注意如果是在ES模块环境下，你需要先导入包；如果是全局脚本环境，Gutenberg已经内置了这个依赖，直接调用即可：

// ES模块环境导入
import scrollIntoView from 'dom-scroll-into-view';

// 调用滚动，可自定义配置
scrollIntoView( sourceElement, scrollContainer, {
  align: 'top', // 对齐方式：top/bottom/center
  offset: 30, // 偏移量，避免被顶部工具栏遮挡
  duration: 400, // 滚动动画时长（毫秒）
  ease: function(t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t; } // 自定义缓动函数（可选）
} );

额外注意事项 #

• 偶尔会遇到DOM还没渲染完成的情况，这时候可以用wp.data.subscribe监听状态变化，确保元素存在后再执行滚动：

const unsubscribe = wp.data.subscribe( () => {
  const sourceElement = wp.dom.getBlockContainer( insertedBlock.clientId );
  if ( sourceElement ) {
    // 执行滚动逻辑
    scrollIntoView( sourceElement, scrollContainer, { align: 'top' } );
    // 取消订阅，避免重复触发
    unsubscribe();
  }
} );

• 顺便提个省心的替代方案：Gutenberg其实已经内置了滚动到块的方法，如果你不需要自定义滚动配置，直接用这个更简单：

wp.data.dispatch( 'core/editor' ).scrollToBlock( insertedBlock.clientId );

它内部就是基于dom-scroll-into-view实现的，省去了自己找元素的步骤。

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