WordPress插件开发：修改编辑器内容后无法保存问题求助

Alright, let's figure out why your changes aren't sticking when you publish the post. The core issue here is that you're directly manipulating the DOM with jQuery ($('.frc_trim_origin_btn').remove()), but Gutenberg (the WordPress block editor) uses React to manage its internal state. The DOM you see is just a reflection of that state—so modifying the DOM directly won't update the editor's actual content data, which is what gets saved when you hit publish.

Here's how to fix it properly by working with Gutenberg's data API instead of touching the DOM directly:

(function($){
    $('.frc_remove_origin').on('click', function(){
        if(!confirm("origin text will be removed ")){
            return;
        }
        
        // 1. Get the current edited post content from Gutenberg's internal state
        const currentContent = wp.data.select('core/editor').getEditedPostAttribute('content');
        
        // 2. Create a temporary DOM element to safely manipulate the HTML
        const tempContainer = document.createElement('div');
        tempContainer.innerHTML = currentContent;
        
        // 3. Remove the target element from our temporary DOM
        $(tempContainer).find('.frc_trim_origin_btn').remove();
        
        // 4. Extract the updated HTML content
        const updatedContent = tempContainer.innerHTML;
        
        // 5. Update Gutenberg's post content state (this syncs changes to the editor UI)
        wp.data.dispatch('core/editor').editPost({
            content: updatedContent
        });
        
        // 6. Save the post with the modified content
        wp.data.dispatch('core/editor').savePost();
        
        return;
    })
})(jQuery);

Let's break down what's happening here:

• Step 1: We use wp.data.select('core/editor').getEditedPostAttribute('content') to fetch the actual content Gutenberg tracks internally (not just the rendered DOM). This ensures we're working with the most up-to-date version of the post.
• Steps 2-4: We create a temporary DOM element to modify the HTML safely, without interfering with Gutenberg's own rendered UI. This lets us remove the .frc_trim_origin_btn element just like you did before, but now we're editing the source content Gutenberg uses.
• Step 5: editPost({ content: updatedContent }) tells Gutenberg to update its internal state with our modified content. This automatically re-renders the editor to reflect the changes, so you'll see the element disappear from the UI too.
• Step 6: Finally, we call savePost() to persist the updated content to the database.

A couple of extra tips:

• Make sure this code runs after Gutenberg has fully loaded. You can wrap it in wp.domReady() if needed, to avoid errors where wp.data isn't available yet.
• If .frc_trim_origin_btn is part of a custom Gutenberg block, modifying the block's attributes directly is more aligned with Gutenberg's workflow. But if it's just plain HTML in the content, the above approach works perfectly.

内容的提问来源于stack exchange，提问作者user1247907