Gutenberg 편집기 화면 스크롤 블록

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 요소를 어떻게 하면 될까요?

소스와 컨테이너의 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] )

단, 에디터에 적어도2개의 블록이 있는 것을 확인해 주세요.예를 들어, 장황한 내용이 있는 단락과 이미지 블록이 있는 단락입니다.

Chrome(Windows 10)로 동작 테스트를 실시.

dom-scroll-into-viewhttps://github.com/yiminghe/dom-scroll-into-view에 있는 자체 NPM 패키지입니다.

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는 옵션의 오브젝트입니다.브라우저 상단의 테두리에 정확하게 닿지 않도록 왼쪽 상단의 여백과 같은 미세 조정을 설정할 수 있습니다.합격으로 시작할 수 있습니다.{}지금으로서는요.

언급URL : https://stackoverflow.com/questions/56514195/gutenberg-editor-scroll-block-into-view