Title: Adding Gutenberg to bbpress
Last modified: January 30, 2026

---

# Adding Gutenberg to bbpress

 *  [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [2 months, 2 weeks ago](https://wordpress.org/support/topic/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
 *     ```wp-block-code
       <?phpdefined( '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
 *     ```wp-block-code
       (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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fadding-gutenberg-to-bbpress%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [Pouya](https://wordpress.org/support/users/pouyaebrhm/)
 * (@pouyaebrhm)
 * [2 months, 1 week ago](https://wordpress.org/support/topic/adding-gutenberg-to-bbpress/#post-18814927)
 * Hi,
   You’re very close — the issue isn’t bbPress or parsing blocks, it’s the missing
   editor context. The Gutenberg toolbar won’t appear unless the full editor environment
   is present. In your setup, a few required pieces are missing:
    - `SlotFillProvider` (toolbar relies on it)
    - editor styles (`wp-edit-post` / `wp-editor` styles)
    - editor keyboard shortcuts / notices context
 * Right now you’re rendering `BlockTools`, but without the surrounding providers
   it has nothing to attach to.
 * In practice, you’ll need to:
    - Wrap the editor in `SlotFillProvider`
    - Enqueue `wp-edit-post` (scripts + styles), not just `wp-block-editor`
    - Ensure editor styles are loaded (`wp-editor` / `wp-edit-post` CSS)
 * Without those, the block list renders, but the UX toolbar won’t. So this isn’t
   a bug in your logic — it’s just an incomplete editor bootstrap.
 *  Thread Starter [hebhansen](https://wordpress.org/support/users/hebhansen/)
 * (@hebhansen)
 * [2 months, 1 week ago](https://wordpress.org/support/topic/adding-gutenberg-to-bbpress/#post-18814968)
 * [@pouyaebrhm](https://wordpress.org/support/users/pouyaebrhm/)
 * Thx for your input. I will give it a revisit.
 * I had the impression in the process, that Gutenberg will never load in frontend
   and this is the reason blocks everywhere got stuck on an antique Gutenberg!?
 * If this is the case, further work is a waste. But let me know.
 *  [Pouya](https://wordpress.org/support/users/pouyaebrhm/)
 * (@pouyaebrhm)
 * [2 months, 1 week ago](https://wordpress.org/support/topic/adding-gutenberg-to-bbpress/#post-18815029)
 * Thanks for the clarification, that helps.
 * So if I understand correctly, Gutenberg _can_ run on the frontend, but only when
   the full editor context is recreated (providers, slots, editor assets, etc.),
   and not just by rendering `BlockTools` and `BlockEditorProvider` in isolation.
 * That clears up my confusion — I was under the impression that Gutenberg was fundamentally
   admin-only, which would indeed make further work pointless. Knowing that it’s
   a matter of missing context rather than a hard limitation, I’ll revisit the setup
   with that in mind.
 * Appreciate the guidance.

Viewing 3 replies - 1 through 3 (of 3 total)

You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fadding-gutenberg-to-bbpress%2F%3Foutput_format%3Dmd&locale=en_US)
to reply to this topic.

 * ![](https://ps.w.org/gutenberg/assets/icon-256x256.jpg?rev=1776042)
 * [Gutenberg](https://wordpress.org/plugins/gutenberg/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gutenberg/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gutenberg/)
 * [Active Topics](https://wordpress.org/support/plugin/gutenberg/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gutenberg/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gutenberg/reviews/)

## Tags

 * [frontend](https://wordpress.org/support/topic-tag/frontend/)
 * [gutenberg](https://wordpress.org/support/topic-tag/gutenberg/)

 * 3 replies
 * 2 participants
 * Last reply from: [Pouya](https://wordpress.org/support/users/pouyaebrhm/)
 * Last activity: [2 months, 1 week ago](https://wordpress.org/support/topic/adding-gutenberg-to-bbpress/#post-18815029)
 * Status: not resolved