¿Cómo puedo desplazar un bloque recién insertado a la vista en el editor de wordpress gutenberg?

Estoy creando el bloque con

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

También he visto que gutenberg usa el dom-scroll-into-view paquete como por ejemplo aquí.

Su documentación dice:

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

pero, ¿cómo puedo hacer que funcione en mi caso, cómo obtener los elementos DOM de origen y contenedor?

en mi caso, ¿cómo obtener los elementos DOM fuente y contenedor?

En realidad es bastante fácil… solo usa document.querySelector() para obtener el nodo de bloque y luego wp.dom.getScrollContainer() para obtener el contenedor de ese nodo:

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

Referencias: Una Dos

Y aquí está mi código:

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

ACTUALIZAR

Para probar el importeducar scrollIntoView()prueba esto:

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

Y luego desde la consola del navegador, ejecute esto:

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

Pero asegúrese de tener al menos dos bloques en el editor, por ejemplo, un párrafo con un contenido extenso y un bloque de imagen.

Probado y probado trabajando en Chrome (Windows 10).

dom-scroll-into-view es un paquete NPM en sí mismo en https://github.com/yiminghe/dom-scroll-into-view

Tienen una demo disponible en http://yiminghe.me/dom-scroll-into-view/examples/demo.html

Y su código fuente principal es https://github.com/yiminghe/dom-scroll-into-view/blob/master/src/dom-scroll-into-view.js

Respuesta corta:

• source es el elemento HTML que desea mostrar.

• container es su elemento contenedor, o simplemente puede ponerlo para que sea window si no tiene un contenedor particular que envuelva su elemento.

• Finalmente config es un objeto opcional que le permite configurar algunos ajustes finos como un poco de margen en la parte superior izquierda si no desea que esto toque el borde superior exacto del navegador. Puedes empezar pasando {} a eso por ahora.

¿Cómo puedo desplazar un bloque recién insertado a la vista en el editor de wordpress gutenberg?

Estoy creando el bloque con

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

También he visto que gutenberg usa el dom-scroll-into-view paquete como por ejemplo aquí.

Su documentación dice:

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

pero, ¿cómo puedo hacer que funcione en mi caso, cómo obtener los elementos DOM de origen y contenedor?

en mi caso, ¿cómo obtener los elementos DOM fuente y contenedor?

En realidad es bastante fácil… solo usa document.querySelector() para obtener el nodo de bloque y luego wp.dom.getScrollContainer() para obtener el contenedor de ese nodo:

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

Referencias: Una Dos

Y aquí está mi código:

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

ACTUALIZAR

Para probar el importeducar scrollIntoView()prueba esto:

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

Y luego desde la consola del navegador, ejecute esto:

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

Pero asegúrese de tener al menos dos bloques en el editor, por ejemplo, un párrafo con un contenido extenso y un bloque de imagen.

Probado y probado trabajando en Chrome (Windows 10).

dom-scroll-into-view es un paquete NPM en sí mismo en https://github.com/yiminghe/dom-scroll-into-view

Tienen una demo disponible en http://yiminghe.me/dom-scroll-into-view/examples/demo.html

Y su código fuente principal es https://github.com/yiminghe/dom-scroll-into-view/blob/master/src/dom-scroll-into-view.js

Respuesta corta:

• source es el elemento HTML que desea mostrar.

• container es su elemento contenedor, o simplemente puede ponerlo para que sea window si no tiene un contenedor particular que envuelva su elemento.

• Finalmente config es un objeto opcional que le permite configurar algunos ajustes finos como un poco de margen en la parte superior izquierda si no desea que esto toque el borde superior exacto del navegador. Puedes empezar pasando {} a eso por ahora.