Gutenberg editor scroll block into view

user_947040 0
Viewed 1340

How can I scroll a newly inserted block into the view in the wordpress gutenberg editor?

I am creating the block with

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

I have also seen that gutenberg uses the dom-scroll-into-view package like e.g. here.

Their documentation says:

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

but how can I get it working in my case, how to get the source and container DOM elements?

gutenberg-blocks wordpress-gutenberg reactjs wordpress javascript
2 Answers

dom-scroll-into-view is an NPM package by itself at https://github.com/yiminghe/dom-scroll-into-view

They have a demo available at http://yiminghe.me/dom-scroll-into-view/examples/demo.html

And their main source code is https://github.com/yiminghe/dom-scroll-into-view/blob/master/src/dom-scroll-into-view.js

Short answer:

  • source is the HTML element you want to be brought into view.

  • container is its container element, or you can simply put it to be window if you don't have a particular container wrapping your element.

  • Finally config is an optional object that lets you configurate some fine tuning like a little bit of margin to top of left if you don't want this to hit the exact top border of the browser. You can start by passing {} to it for now.

user_23215940

in my case, how to get the source and container DOM elements?

It's actually quite easy.. just use document.querySelector() to get the block node and then wp.dom.getScrollContainer() to get that node's container:

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

References: One Two

And here's my 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 );
}

UPDATE

For testing the imported scrollIntoView(), try this:

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

And then from the browser console, run this:

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

But make sure that you have at least two blocks in the editor — e.g. a paragraph with a lengthy content and an image block.

Tried and tested working on Chrome (Windows 10).

user_92177600
Related