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/