Gutenberg editor content in JavaScript (WordPress) Gutenberg editor content in JavaScript (WordPress) wordpress wordpress

Gutenberg editor content in JavaScript (WordPress)


As of version 3.1. of Gutenberg, try this:

to get the plain block content:

var originalContent = wp.data.select( "core/editor" ).getCurrentPost().content;var editedContent = wp.data.select( "core/editor" ).getEditedPostContent();

to render the post (transform to blocks):

wp.blocks.parse( editedContent );


You may want to explore the window._wpGutenbergPost.content which has both a raw and rendered content. This is, at the moment. Things will probably change :)


You may use selectors it allows us to retrieve data and similarly, For example, to update the title of the post being edited in Gutenberg, you can do:

wp.data.dispatch( 'core/editor' ).editPost( { title: 'New Title' } );

You can check the actions file here https://github.com/WordPress/gutenberg/blob/v2.9.2/editor/store/actions.js , to see the full list of the actions defined by the core/editor namespace.

See more: https://riad.blog/2018/06/07/efficient-client-data-management-for-wordpress-plugins/