Scrollblock des Gutenberg-Editors sichtbar

Wie kann ich einen neu eingefügten Block in die Ansicht im WordPress-Gutenberg-Editor scrollen?

Ich erstelle den Block mit

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

Ich habe auch gesehen, dass Gutenberg das nutzt dom-scroll-into-view Paket wie zB hier.

Ihre Dokumentation sagt:

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

aber wie kann ich es in meinem Fall zum Laufen bringen, wie bekomme ich die Quell- und Container-DOM-Elemente?

Wie bekomme ich in meinem Fall die Quell- und Container-DOM-Elemente?

Es ist eigentlich ganz einfach … einfach benutzen document.querySelector() um den Blockknoten zu bekommen und dann wp.dom.getScrollContainer() um den Container dieses Knotens zu erhalten:

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 );

Verweise: Einer Zwei

Und hier ist mein Code:

/**
 * 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 );
}

AKTUALISIEREN

Zum Testen der imported scrollIntoView()Versuche dies:

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 || {} );
};

Führen Sie dann in der Browserkonsole Folgendes aus:

scrollBlockIntoView( wp.data.select('core/editor').getBlocks()[1] )

Achte aber darauf, dass du mindestens zwei Blöcke im Editor hast – zB einen Absatz mit längerem Inhalt und einen Bildblock.

Erprobt und getestet auf Chrome (Windows 10).

dom-scroll-into-view ist ein eigenständiges NPM-Paket unter https://github.com/yiminghe/dom-scroll-into-view

Sie haben eine Demo unter verfügbar http://yiminghe.me/dom-scroll-into-view/examples/demo.html

Und ihr Hauptquellcode ist https://github.com/yiminghe/dom-scroll-into-view/blob/master/src/dom-scroll-into-view.js

Kurze Antwort:

• source ist das HTML-Element, das angezeigt werden soll.

• container ist sein Containerelement, oder Sie können es einfach als sein bezeichnen window wenn Sie keinen bestimmten Container haben, der Ihr Element umhüllt.

• Endlich config ist ein optionales Objekt, mit dem Sie einige Feinabstimmungen konfigurieren können, z. B. einen kleinen Rand oben links, wenn Sie nicht möchten, dass dies genau den oberen Rand des Browsers trifft. Sie können mit dem Passieren beginnen {} dazu erstmal.