Skip to content

WordPress 7.0 block editor does not mount through BrowserSync proxy in my local Bedrock setup #2114

@zfbpb

Description

@zfbpb

Summary

The WordPress 7.0 block editor area is blank when the edit screen is opened through a BrowserSync proxy.
The same local Bedrock/Laragon setup works with WordPress 6.8.3. If I downgrade only WordPress from 7.0 to 6.8.3, the BrowserSync development URL works again.
I am not sure whether the problem is in BrowserSync, in a WordPress 7.0 editor change, or in the interaction between the two.

Environment

  • OS: Windows 11
  • Local server: Laragon 6
  • Browser: latest Firefox / latest Chrome
  • Node: 22.22.3
  • pnpm: 11
  • Gulp: 5.0.1
  • BrowserSync: 3.0.4
  • WordPress package: roots/wordpress
  • Local setup: Bedrock WordPress project

BrowserSync config

bedrock-timber.test is just an example local development domain.

browserSync.init({
  proxy: 'http://bedrock-timber.test',
  port: 3000,
  files: ['bundle/**/*.css', 'bundle/**/*.js', '*.php']
});

WordPress local origin: http://bedrock-timber.test
BrowserSync proxy origin: http://bedrock-timber.test:3000 or http://localhost:3000

What works

With WordPress 6.8.3, the edit screen works through BrowserSync and the block editor mounts correctly through the BrowserSync development URL.

What does not work

With WordPress 7.0, the same edit screen loads through BrowserSync, but the block editor area is blank.
The admin UI loads, the #editor element exists, core editor JS assets return 200, and there is no fatal red console error.
However, the block editor does not mount and the #editor element remains empty.

Direct WordPress URL

When I open the same WordPress 7.0 edit screen directly through the local WordPress URL, the editor mounts.
However, my custom ACF blocks/resources do not appear to load correctly there.

Main difference I found

The same project and same BrowserSync setup behave differently depending on the WordPress version:

  • WordPress 6.8.3 + BrowserSync proxy: editor mounts
  • WordPress 7.0 + BrowserSync proxy: editor area is blank and editor does not mount
  • WordPress 7.0 direct local URL: editor mounts, but custom ACF blocks/resources seem to have a separate issue
    After downgrading only WordPress from 7.0 to 6.8.3, the BrowserSync development URL started working again.

Additional test

I also tested blocking the BrowserSync client script:
http://bedrock-timber.test:3000/browser-sync/browser-sync-client.js?v=3.0.4
The script failed to load, but the editor area was still blank and the editor did not mount.
So this does not appear to be caused only by the injected BrowserSync client script.

Network observations

I attached a screenshot from the direct local WordPress origin on WordPress 7.0. In that case, the editor mounts and normal editor REST/fetch requests are visible.
Through the BrowserSync proxy on WordPress 7.0, the admin page loads and editor-related JS assets return 200, but the editor area is blank and #editor remains empty.

Expected result

The WordPress block editor should mount through the BrowserSync proxy as it does with WordPress 6.8.3.

Additional screenshot

Showing the editor working on the direct local WordPress origin with WordPress 7.0.
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions