I'am doing custom WP plugin that work with Gutenberg editor. One of functionality is that user select part of text in editor. Click on button. JS take selected text, process it and replace selected code with custom shortcode line. E.g. we have text

Lorem ipsum Custom Word and other words

User select "Custom Word" click on button and JS dynamically replace it like this:

Lorem ipsum [custom_shortcode title="Custom Word"] and other words

I set block content with edited content with jQuery like this:

var all_content =    tinyMCE.activeEditor.getContent();
all_content = all_content.replace( string_to_replace, shortcode_string );
tinymce.activeEditor.setContent( all_content )

I think that's not the right way to apply content to block.

SO that all works fine. Problem is when I click on Save or on Preview.

The final result doesn't store my inserted shortcode code. As I understand as basically block content was not rendered by Gutenberg and I just make visual insertion in HTML.

I am new to Gutenberg and not sure how I can make it to re-render edited block so changes are applied.

Iv tried after doing all replacements resave Gutenberg content with:

var editedContent = wp.data.select( "core/editor" ).getEditedPostContent().content;
wp.data.dispatch( 'core/editor' ).editPost( { content: editedContent } );

But with no luck. Can anyone help me?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.