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

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

8 голосов
/ 09 июня 2019

Как прокрутить вновь вставленный блок в представление в редакторе WordPress Gutenberg?

Я создаю блок с 

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

Я также видел, что Гутенберг использует пакет dom-scroll-into-view, например, здесь .

Их документация гласит: 

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

но как мне заставить его работать в моем случае, как получить исходные и контейнерные элементы DOM?

Ответы [ 3 ]

1 голос
/ 27 июня 2019

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

UPDATE

Для тестирования import ed 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] )

Но убедитесь, что у вас есть как минимум два блока в редакторе & mdash; например абзац с длинным содержимым и блоком изображения.

Пробовал и тестировал работу на Chrome (Windows 10).

1 голос
/ 23 июня 2019

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

0 голосов
/ 27 июня 2019

Вот ответ с кодом

Идея такова:

  • Просто getElementById
  • Получите Y координату вашего элемента
  • Используйте window.scrollTo

Почему вы должны использовать getElementById вместо реагирующих ссылок здесь?

TL; DR window.scrollToне изменяет ваш элемент.

Это правда, что React не советует обращаться к элементам DOM явно, как сказал Айдин.Но вы должны понимать причину , почему реакция не советует.Идея состоит в том, чтобы иметь один инструмент, который изменит ваших элементов на странице.Когда у вас есть только один инструмент, и вы хорошо его знаете, вы легко можете найти, где что-то пошло не так, и исправить их.Проверьте, на какой странице о реагируют ссылки сказано:

Однако есть несколько случаев, когда вам необходимо обязательно изменить дочернего элемента вне типичного потока данных

Ключевое слово здесь изменить .scrollIntoView и window.scrollTo не изменяют ваш элемент.В этом случае вы можете безопасно получить доступ к элементу по document.getElementById('yourElement');.

...