古腾堡编辑器滚动块进入视图

Question

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

我正在创建块

const nextBlock = createBlock( 'core/paragraph' );
wp.data.dispatch( 'core/editor' ).insertBlock( nextBlock );
//scroll the block into the view

我还看到古腾堡使用 dom-scroll-into-view 包，例如here.

他们的文档说：

var scrollIntoView = require('dom-scroll-into-view');
scrollIntoView(source,container,config);

但是我怎样才能让它在我的情况下工作，如何获取源和容器 DOM 元素？

Answer 1

dom-scroll-into-view 本身就是一个 NPM 包，位于 https://github.com/yiminghe/dom-scroll-into-view

他们在http://yiminghe.me/dom-scroll-into-view/examples/demo.html 有一个演示版

他们的主要源码是https://github.com/yiminghe/dom-scroll-into-view/blob/master/src/dom-scroll-into-view.js

---

简答：

• source 是您想要显示的 HTML 元素。

• container 是它的容器元素，或者如果你没有一个特定的容器来包装你的元素，你可以简单地把它写成window。

• 最后，config 是一个可选对象，如果您不希望它正好碰到浏览器的上边框，它可以让您配置一些微调，例如左上角的一点边距。您现在可以先将{} 传递给它。

Answer 2

在我的情况下，如何获取源和容器 DOM 元素？

其实很简单.. 只需使用document.querySelector() 获取块节点，然后使用wp.dom.getScrollContainer() 获取该节点的容器：

const nextBlock = wp.blocks.createBlock( 'core/paragraph' );
wp.data.dispatch( 'core/editor' ).insertBlock( nextBlock );

const source = document.querySelector( '[data-block="' + nextBlock.clientId + '"]' );
const container = wp.dom.getScrollContainer( source );

参考：OneTwo

这是我的代码：

/**
 * External dependencies
 */
import scrollIntoView from 'dom-scroll-into-view';

/**
 * WordPress dependencies
 */
import { createBlock } from '@wordpress/blocks';     // wp.blocks.createBlock
import { dispatch } from '@wordpress/data';          // wp.data.dispatch
import { getScrollContainer } from '@wordpress/dom'; // wp.dom.getScrollContainer

function getBlockDOMNode( clientId ) {
    return document.querySelector( '[data-block="' + clientId + '"]' );
}

const nextBlock = createBlock( 'core/paragraph' );
dispatch( 'core/editor' ).insertBlock( nextBlock );

const source = getBlockDOMNode( nextBlock.clientId );
const container = source ? getScrollContainer( source ) : null;
if ( source && container ) {
    scrollIntoView( source, container );
}

更新

要测试imported scrollIntoView()，试试这个：

function scrollBlockIntoView( block ) {
    const source = getBlockDOMNode( block.clientId );
    const container = source ? getScrollContainer( source ) : null;
    if ( source && container ) {
        console.log( source, container );
        scrollIntoView( source, container );
    }
}

window.scrollBlockIntoView = function( block ) {
    scrollBlockIntoView( block || {} );
};

然后从浏览器控制台运行：

scrollBlockIntoView( wp.data.select('core/editor').getBlocks()[1] )

但请确保您在编辑器中至少有两个块 - 例如一个内容很长的段落和一个图像块。

在 Chrome (Windows 10) 上经过测试和测试。