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

Question

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

我正在用

创建块

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

我还看到 gutenberg 使用 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

in my case, how to get the source and container DOM elements?

其实很简单..只需使用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 );

参考文献：One Two

这是我的代码：

/**
 * 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) 上尝试和测试。

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

Gutenberg editor scroll block into view

javascript

wordpress

reactjs

wordpress-gutenberg

gutenberg-blocks

更新