Modules do not load or work in the full site editor (FSE)

[Zealth57]

Description

When using scripts as modules, there does not seem to be a way to register them in a way that they load with blocks in the Site Editor. I have tried registering the module, enqueuing the module, setting the handle int he script, editorScript, viewScriptModule, everything. The most it will do it load outside the iframe of the Site Editor, but the blocks load inside the iframe so the module JS is never fired. The modules seem to load and work fine when editing a page or viewing it on the frontend. But blocks don't work when going to Appearance -> Editor and viewing a page in the Site Editor context.

Step-by-step reproduction instructions

• Create a block that relies on a script module (output the JS using wp_enqueue_script_module or wp_register_script_module)
• Observe the JS is loaded when editing a page, viewing a page, and outside the blocks iframe tag in the FSE

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[RamirezCID]

Can confirm that this is still happening.

[Zealth57]

Also confirmed still happening on WP 6.8 beta 3 release

[annelyse]

Still have this bug

[USERSATOSHI]

Hi there, I also found this issue, and started working on it.

Though I found one issue: if the view module is loaded in the iframe, there is a gap between the module being loaded/executed and React loading the content.

After researching the Iframe code, I found that:

The iframe is built from a blob URL containing the resolved assets (styles + scripts). The browser loads and executes those scripts immediately when the blob URL loads.

But block content is injected into the iframe via createPortal after that, so any DOM scan the module does on load runs against an empty body.

To fix this issue, I used custom events ( I also tried MutationObserver but the perf overhead seems too much):

wp-block-editor:content-ready: fired once after React's first render of block content into the iframe.

We might also need to introduce a content-updated event since stuff like classes added via classlist don't survive the update from my testing.

I used that in View Modules to listen instead of on load and got this working.

Screenshots

Front-End

Site Editor

Page Editor

Plugin code used for test

gb-script-module-probe.php

<?php
/**
 * Plugin Name: Gutenberg Script Module Probe
 * Description: Static block probe for testing viewScriptModule loading in frontend, post editor, and Site Editor canvases.
 * Version: 0.1.0
 * Author: Local Test
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

function gb_script_module_probe_register_block() {
    register_block_type( __DIR__ . '/blocks/probe' );
}
add_action( 'init', 'gb_script_module_probe_register_block' );

function gb_script_module_probe_get_block_markup() {
    return '<!-- wp:gb-script-module-probe/probe -->
<div class="wp-block-gb-script-module-probe-probe gb-script-module-probe" data-gb-script-module-probe="true"><p class="gb-script-module-probe__eyebrow">Script module probe</p><p class="gb-script-module-probe__status" data-gb-script-module-probe-status>Module not loaded</p><p class="gb-script-module-probe__details">Expected result: this box turns green and says "Module loaded".</p></div>
<!-- /wp:gb-script-module-probe/probe -->';
}

function gb_script_module_probe_activate() {
    $page = get_page_by_path( 'script-module-probe' );
    $content =
        '<!-- wp:paragraph --><p>This page is used to verify that a block viewScriptModule loads in the frontend, the post editor canvas, and the Site Editor canvas.</p><!-- /wp:paragraph -->'
        . "\n\n"
        . gb_script_module_probe_get_block_markup();

    if ( $page instanceof WP_Post ) {
        wp_update_post(
            array(
                'ID'           => $page->ID,
                'post_content' => $content,
            )
        );
        update_option( 'gb_script_module_probe_page_id', (int) $page->ID );
        return;
    }

    $post_id = wp_insert_post(
        array(
            'post_type'    => 'page',
            'post_status'  => 'publish',
            'post_title'   => 'Script Module Probe',
            'post_name'    => 'script-module-probe',
            'post_content' => $content,
        )
    );

    if ( ! is_wp_error( $post_id ) ) {
        update_option( 'gb_script_module_probe_page_id', (int) $post_id );
    }
}
register_activation_hook( __FILE__, 'gb_script_module_probe_activate' );

---

blocks/probe/block.json

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "gb-script-module-probe/probe",
    "title": "Script Module Probe",
    "category": "widgets",
    "icon": "visibility",
    "description": "Probe block for testing viewScriptModule loading across canvases.",
    "supports": {
        "html": false
    },
    "textdomain": "gb-script-module-probe",
    "editorScript": "file:./editor.js",
    "style": "file:./style.css",
    "editorStyle": "file:./style.css",
    "viewScriptModule": "file:./view.js"
}

---

blocks/probe/render.php

<div
    class="gb-script-module-probe"
    data-gb-script-module-probe="true"
>
    <p class="gb-script-module-probe__eyebrow">Script module probe</p>
    <p class="gb-script-module-probe__status" data-gb-script-module-probe-status>
        Module not loaded
    </p>
    <p class="gb-script-module-probe__details">
        Expected result: this box turns green and says "Module loaded".
    </p>
</div>

---

blocks/probe/editor.js

(function (blocks, element, blockEditor) {
    const el = element.createElement;
    const registerBlockType = blocks.registerBlockType;
    const useBlockProps = blockEditor.useBlockProps;

    function ProbeMarkup(blockProps) {
        return el(
            'div',
            blockProps,
            el(
                'p',
                { className: 'gb-script-module-probe__eyebrow' },
                'Script module probe'
            ),
            el(
                'p',
                {
                    className: 'gb-script-module-probe__status',
                    'data-gb-script-module-probe-status': true,
                },
                'Module not loaded'
            ),
            el(
                'p',
                { className: 'gb-script-module-probe__details' },
                'Expected result: this box turns green and says "Module loaded".'
            )
        );
    }

    registerBlockType('gb-script-module-probe/probe', {
        edit: function () {
            return ProbeMarkup(
                useBlockProps({
                    className: 'gb-script-module-probe',
                    'data-gb-script-module-probe': 'true',
                })
            );
        },
        save: function () {
            return null;
        },
    });
})(window.wp.blocks, window.wp.element, window.wp.blockEditor);

---

blocks/probe/view.js

const PROBE_SELECTOR = '[data-gb-script-module-probe]';
const STATUS_SELECTOR = '[data-gb-script-module-probe-status]';

console.log('Running probe viewScriptModule', {
    runs: window.gbScriptModuleProbeRuns || 0,
});

function scan( doc ) {
    doc.querySelectorAll( PROBE_SELECTOR ).forEach( ( el ) => {
        el.dataset.moduleLoaded = 'true';

        const status = el.querySelector( STATUS_SELECTOR );
        if ( status ) {
            status.textContent = 'Module loaded';
        }
    } );
}

scan( document ); // frontend

document.addEventListener( 'wp-block-editor:content-ready',
    () => scan( document ), { once: true } );

---

blocks/probe/style.css

.gb-script-module-probe {
    border: 2px solid #b42318;
    background: #fef3f2;
    color: #7a271a;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.gb-script-module-probe[data-module-loaded="true"] {
    border-color: #027a48;
    background: #ecfdf3;
    color: #05603a;
}

.gb-script-module-probe__eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.8;
}

.gb-script-module-probe__status {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
}

.gb-script-module-probe__details {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

before we start working on this event Approach for the issue I mentioned, I want some review if we even want to introduce any events in first place.

I did see customEvents in waveform-utils.js so it can be a viable option.

I prepared a draft PR of the current solution so everyone can review how it works and help decide whether to move forward with it or refine it further.

cc: @t-hamano