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

Posted 2023-02-19

【中文标题】古腾堡编辑器滚动块进入视图

【英文标题】：Gutenberg editor scroll block into view

【发布时间】：2019-10-24 03:13:22

【问题描述】：

如何将新插入的块滚动到 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 元素？

【问题讨论】：

想知道您是否可以像MultiSelectScrollIntoView 一样使用const blockNode = getBlockDOMNode( blockId ) 和const scrollContainer = getScrollContainer( blockNode )。也许像 scrollIntoView( blockNode, scrollContainer, onlyScrollIfNeeded: true, ); 。我们是否有来自nextBlock.id 或带有'block-' 前缀的块ID？

您可以为此创建一个 JSFiddle 以便我们重现您的问题吗？

好吧，我猜不是。它是带有许多 wordpress 特定 js 和 css 文件的默认 wordpress 安装。要重现，必须设置一个 wordpress > 5.0 的 wordpress 环境......但也许我会在某个地方在线找到一个 wordpress 游乐场？

【参考方案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 是一个可选对象，如果您不希望它正好碰到浏览器的上边框，它可以让您配置一些微调，例如左上角的一点边距。您现在可以先将 传递给它。

【讨论】：

我知道，但我想不出古腾堡的具体用法。

@niklas scrollIntoView 需要 DOM 元素，因为它是纯 DOM 操作。 React 不建议显式访问 DOM 元素。唯一的解决方法是使用ref，这正是最后一个将scrollIntoView 添加到gutenberg 的人所做的。这是您可以关注的 PR：github.com/WordPress/gutenberg/commit/…。基本上，只需将 ref 添加到您创建的块中，然后使用该 ref 获取 DOM 并将其传递给 scrollIntoView。

以及如何将引用添加到“块编辑器容器”？

@niklas 您可以将其保留为 window 并查看它是如何工作的。否则，您可以在我分享的 PR 中关注this.inserterResults。

【参考方案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) 上经过测试和测试。

【讨论】：

它对你有用吗？源和容器是有效的，并且似乎是正确的元素，但它不能滚动。

您的解决方案仅适用于 safari，但我认为答案是完整且正确的，并且最接近我的需要。猜猜这是dom-scroll-into-view 的问题？还是我们用错了？

所以我使用的是 WordPress 5.2.2。实际上，insertBlock() 调用实际上将插入的块自动滚动到视图中，而无需调用scrollIntoView()。是的，我的代码中的scrollIntoView() 确实可以正常工作。