在独立插件中集成完整Gutenberg编辑器的实现方案

Got it, embedding a full Gutenberg editor (not just building custom blocks) into your TargetPop plugin is totally feasible—you just need to leverage WordPress's core editor APIs that power post editing, but adapt them to your plugin's context. Let me walk you through the step-by-step solution:

First, you need to load Gutenberg's core scripts and styles on your plugin's admin page (don't load them globally to avoid conflicts). Use the admin_enqueue_scripts action with a page check:

add_action('admin_enqueue_scripts', 'targetpop_enqueue_gutenberg_assets');
function targetpop_enqueue_gutenberg_assets() {
    // Only load assets on your plugin's settings page
    if (!isset($_GET['page']) || $_GET['page'] !== 'targetpop-settings') {
        return;
    }

    // Enqueue core Gutenberg scripts
    wp_enqueue_script('wp-block-editor');
    wp_enqueue_script('wp-blocks');
    wp_enqueue_script('wp-components');
    wp_enqueue_script('wp-element');
    wp_enqueue_script('wp-i18n');
    wp_enqueue_script('wp-editor');

    // Enqueue core Gutenberg styles
    wp_enqueue_style('wp-block-editor');
    wp_enqueue_style('wp-blocks');
    wp_enqueue_style('wp-components');

    // Localize data for media upload and REST access
    wp_localize_script('wp-editor', 'targetpopEditorData', [
        'nonce' => wp_create_nonce('wp_rest'),
        'restUrl' => get_rest_url()
    ]);
}

In your plugin's admin settings template, add an empty container for the editor and a hidden input to store the content (for form submission):

<div class="targetpop-editor-wrapper">
    <button id="targetpop-toggle-editor-mode" class="button">Toggle Code View</button>
    <div id="targetpop-gutenberg-editor"></div>
    <input type="hidden" id="targetpop-popup-content" name="targetpop_popup_content" 
           value="<?php echo esc_attr(get_option('targetpop_popup_content', '')); ?>">
</div>

Use WordPress's wp.blockEditor.createBlockEditor method to spin up the editor, sync content to the hidden input, and add the visual/code view toggle (like TinyMCE's dual views):

document.addEventListener('DOMContentLoaded', () => {
    const editorContainer = document.getElementById('targetpop-gutenberg-editor');
    const contentInput = document.getElementById('targetpop-popup-content');
    const toggleButton = document.getElementById('targetpop-toggle-editor-mode');

    // Initialize the editor
    const editor = wp.blockEditor.createBlockEditor('targetpop-popup-editor', {
        container: editorContainer,
        initialContent: contentInput.value,
        // Disable post-specific features we don't need
        features: {
            publishSidebar: false,
            postTitle: false,
            mediaUpload: true, // Keep media insertion support
            formatLibrary: true, // Keep text formatting options
            codeEditing: true // Enable code view toggle
        },
        // Sync editor content to hidden input on every change
        onChange: (content) => {
            contentInput.value = content;
        }
    });

    // Add toggle functionality for visual/code view
    toggleButton.addEventListener('click', () => {
        editor.toggleMode();
        toggleButton.textContent = editor.isInCodeMode() ? 'Toggle Visual View' : 'Toggle Code View';
    });
});

When saving your plugin's settings, sanitize and store the editor content. Use wp_kses_post to ensure safe HTML (Gutenberg produces block-based HTML, which needs proper sanitization):

add_action('admin_post_save_targetpop_settings', 'targetpop_save_popup_content');
function targetpop_save_popup_content() {
    if (!current_user_can('manage_options')) {
        wp_die('Unauthorized access.');
    }

    // Verify nonce (add this to your form for security)
    if (!wp_verify_nonce($_POST['targetpop_nonce'], 'targetpop_save_settings')) {
        wp_die('Invalid nonce.');
    }

    if (isset($_POST['targetpop_popup_content'])) {
        update_option(
            'targetpop_popup_content',
            wp_kses_post($_POST['targetpop_popup_content'])
        );
    }

    wp_redirect(admin_url('admin.php?page=targetpop-settings&saved=1'));
    exit;
}

• Limit Asset Loading: Always restrict Gutenberg assets to your plugin's specific admin page to avoid breaking other plugins or the core WordPress admin.
• Customize the Editor Experience: Tweak the features parameter to remove any unnecessary tools (like post titles, publish buttons) so the editor feels purpose-built for your popup content.
• Sanitize Everything: Never skip sanitizing the editor content—wp_kses_post is a solid baseline, but you can add custom allowed tags if needed for your plugin's use case.
• Test Thoroughly: Validate that media uploads, text formatting, and block insertion work exactly like your old TinyMCE setup. Test edge cases like complex layouts or custom blocks if you plan to support them.

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