Adding Gutenberg to bbpress

Hi Gutenberg

I could use some assistance from someone with Gutenberg insight. So I am building a plugin that:

1. Provide admin settings to activate Gutenberg ad blocks for bbpres (Working)
2. Render block structure for topics and posts – (working)
3. Removes TinyMCE entirely in source code, when block editor is activated – (Working)
4. Creates a textarea html structure as required by Gutenberg – (Working)
5. Load frontend Gutenberg w. toolbar etc. – (Does not work)

I invite you to take it for a spin ad review in developer tools. Please note, I am not a code champion at all. bbpress has been stuck with an ancient Gutenberg for years, and my intent is to build a plugin that complies with latest Gutenberg. Core focus is block themes, but should be compatible with legacy themes.

Below is my frontend.php

<?php
defined( 'ABSPATH' ) || exit;

/**
 * Frontend Gutenberg integration for bbPress
 * Minimal block editor, toolbar, blocks. Site CSS preserved.
 */

/* ----------------------------------------------------
 * Only run if bbPress is active
 * ---------------------------------------------------- */
if ( ! function_exists( 'bbp_get_topic_post_type' ) ) {
    return;
}

/* ----------------------------------------------------
 * Disable bbPress TinyMCE if frontend block editor is enabled
 * ---------------------------------------------------- */
add_filter( 'bbp_use_wp_editor', function ( $use ) {
    if ( ! function_exists( 'bbpbb_get_options' ) ) {
        return $use;
    }

    $opts = bbpbb_get_options();

    if ( ! empty( $opts['frontend_block_editor'] ) ) {
        return false; // force plain textarea
    }

    return $use;
});

/* ----------------------------------------------------
 * Enqueue Gutenberg frontend + plugin scripts/styles
 * ---------------------------------------------------- */
add_action( 'wp_enqueue_scripts', function () {

    if ( ! function_exists( 'bbpbb_get_options' ) ) return;
    $opts = bbpbb_get_options();
    if ( empty( $opts['frontend_block_editor'] ) ) return;

    // Gutenberg runtime
    wp_enqueue_script( 'wp-element' );
    wp_enqueue_script( 'wp-blocks' );
    wp_enqueue_script( 'wp-i18n' );
    wp_enqueue_script( 'wp-data' );
    wp_enqueue_script( 'wp-compose' );
    wp_enqueue_script( 'wp-components' );
    wp_enqueue_script( 'wp-block-editor' );

    // Minimal frontend CSS
    wp_enqueue_style( 'dashicons' );             // toolbar icons
    wp_enqueue_style( 'wp-block-library' );      // block layout
    wp_enqueue_style( 'bbpbb-block-editor' );    // plugin toolbar/controls

    // Plugin bootstrap
    $bootstrap_file = plugin_dir_path( __FILE__ ) . 'editor/bootstrap.js';
    if ( file_exists( $bootstrap_file ) ) {
        wp_enqueue_script(
            'bbpbb-block-editor-bootstrap',
            plugin_dir_url( __FILE__ ) . 'editor/bootstrap.js',
            [
                'wp-element',
                'wp-blocks',
                'wp-i18n',
                'wp-data',
                'wp-compose',
                'wp-components',
                'wp-block-editor',
            ],
            filemtime( $bootstrap_file ),
            true
        );
    }

}, 20 );

/* ----------------------------------------------------
 * Wrap bbPress content for block styles
 * ---------------------------------------------------- */
add_action( 'bbp_before_main_content', function () {
    echo '<div class="wp-site-blocks bbpbb-frontend">';
}, 1 );

add_action( 'bbp_after_main_content', function () {
    echo '</div>';
}, 999 );

/* ----------------------------------------------------
 * Debug footer
 * ---------------------------------------------------- */
add_action( 'wp_footer', function () {
    if ( defined( 'WP_DEBUG' ) && WP_DEBUG ) {
        echo '<script>console.log("BBPBB DEBUG: frontend.php loaded");</script>';
    }
});

and here my bootstrap.js

(function () {

    if (!window.wp || !wp.element || !wp.blocks || !wp.data || !wp.blockEditor) {
        console.warn('BBPBB: Gutenberg scripts not available.');
        return;
    }

    const { createElement, render } = wp.element;
    const { parse, serialize, createBlock } = wp.blocks;
    const { dispatch, select } = wp.data;
    const {
        BlockEditorProvider,
        BlockList,
        BlockTools,
        WritingFlow,
        ObserveTyping
    } = wp.blockEditor;

    function initEditor(textarea) {
        if (!textarea || textarea.dataset.bbpbbInit) return;
        textarea.dataset.bbpbbInit = '1';

        // Hide the original textarea
        textarea.style.display = 'none';

        // Create wrapper
        const wrapper = document.createElement('div');
        wrapper.className = 'bbpbb-block-editor-wrapper';
        textarea.parentNode.insertBefore(wrapper, textarea);

        // Parse existing content
        let blocks = parse(textarea.value || '');
        if (!blocks.length) {
            // Add a default paragraph block if empty
            blocks = [createBlock('core/paragraph', { content: '' })];
        }

        // Reset blocks in store
        dispatch('core/block-editor').resetBlocks(blocks);

        // Render Gutenberg editor
        render(
            createElement(BlockEditorProvider, {
                value: blocks,
                onInput: (newBlocks) => dispatch('core/block-editor').resetBlocks(newBlocks),
                onChange: (newBlocks) => dispatch('core/block-editor').resetBlocks(newBlocks)
            },
                createElement('div', { className: 'editor-styles-wrapper' },
                    createElement(BlockTools, null),
                    createElement(WritingFlow, null,
                        createElement(ObserveTyping, null,
                            createElement(BlockList, { className: 'is-root-container' })
                        )
                    )
                )
            ),
            wrapper
        );

        // Save blocks back to textarea on form submit
        const form = textarea.closest('form');
        if (form) {
            form.addEventListener('submit', function () {
                const blocks = select('core/block-editor').getBlocks();
                textarea.value = blocks.map(b => serialize(b)).join('');
            });
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        // Topic editor
        initEditor(document.querySelector('#bbp_topic_form textarea[name="bbp_topic_content"]'));

        // Reply editor
        initEditor(document.querySelector('#bbp_reply_form textarea[name="bbp_reply_content"]'));
    });

})();

Any ideas or stuff I missed. Why does Gutenberg UX Toolbar not load?

The page I need help with: [log in to see the link]