I’m diving into the Gutenberg block editor and it’s a big change! I spent ages trying to find out how to access and grab data from each block using JavaScript.

Here is a short snippet, I might have time to expand on this later.

First up, let’s access the Gutenberg editor data.

// Version > Gutenberg 6.0
const data = wp.data.select('core/editor');
// Version Gutenberg 6.0+
const data = wp.data.select( 'core/block-editor' );

We can then dive into the blocks like so. Remember that Gutenberg Block ID’s are dynamic. The IDs change on every page reload.

// Get the currently selected block.
const selected = data.getSelectedBlock();
// Get a list of all blocks with their ID, content and attributes
const blocks = data.getBlocks();