search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.48k stars 4.18k forks source link

Interactivity API page restoring breaks embedded SPA apps with routing #60455

Open esamattis opened 6 months ago

esamattis commented 6 months ago

Description

Interactivity API forces a page reload when it sees an unknown page for its pages cache in the popstate event.

The relevant code is here https://github.com/WordPress/gutenberg/blob/250c5b1dc92cc020a172e0835a59b984dcb62bf5/packages/interactivity-router/src/index.js#L91-L103

This unfortunately breaks navigation in many single-page apps embedded in WordPress that use routers which manipulate the URL using the browser History API. For example search views commonly save the search filters to the query string using it. This happens for example with React and React Router when using the BrowserRouter. But I believe this affects any framework using the History API (Vue, Svelte, Solid, Angular etc.) and any manual History API usage.

This is unfortunate because it discards any state the SPA app might have. Like text typed in a textarea etc.

Not sure how this should be fixed. Maybe a hook which could be used to prevent the reloads on certain cases. For example we could store a flag to history.state and skip the reload based on that.

Step-by-step reproduction instructions

  1. Go to any WordPress site with the Interactivity API
  2. Open devtools and type history.pushState({}, "", "?ding=dong");
  3. Press the browser back button
  4. Press the browser forward button

The browser unexpectedly reloads the page because an url with ?ding=dong is emitted from the popstate event which is not in the pages cache.

Screenshots, screen recording, code snippet

No response

Environment info

Using WordPress 6.4.2 and Gutenberg bundled with it. This affects any newer versions as well because the same code is in trunk.

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

luisherranz commented 3 months ago

It makes sense to fix this.

@darerodz we could include a state object in the push/replace to signal that the navigation was made with the Interactivity API.

DAreRodz commented 3 months ago

We could include a state object in the push/replace to signal that the navigation was made with the Interactivity API.

Yes, I agree it makes sense. 👍