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

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

  

就我而言，如何获取源和容器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 );

参考：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 );
}

更新

要测试import版的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）上进行了测试并进行了测试。

Answer 3

Here is answer with code

想法是：

• getElementById
• 获取元素的Y坐标
• 使用window.scrollTo

为什么在这里应使用getElementById而不是react refs？

TL; DR window.scrollTo不会修改您的元素。

的确，React并不建议像Aidin所说的那样显式访问DOM元素。但是您应该了解原因，为什么反应不建议这样做。想法是拥有一个可以在页面上更改您的元素的工具。当您只有一种工具并且非常了解它时，您可以轻松找到问题出在哪里并进行修复。检查有关react refs的页面说过：

  

但是，在某些情况下，您需要在典型数据流之外强制修改子级

此处的关键字是修改。 scrollIntoView和window.scrollTo不会修改您的元素。在这种情况下，您可以通过document.getElementById('yourElement');安全地访问元素。