Блок прокрутки редактора Гутенберга в поле зрения

в моем случае, как получить элементы 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 );

Ссылки: Один Два

А вот мой код:

/**
 * 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).

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 - это необязательный объект, который позволяет вам настроить некоторую тонкую настройку, например небольшой запас поля в верхнем левом углу, если вы не хотите, чтобы это касалось точной верхней границы браузера. Вы можете начать с передачи ему {}.