Make WordPress Core

Opened 3 weeks ago

Closed 3 weeks ago

Last modified 3 weeks ago

#64649 closed enhancement (fixed)

Interactivity API: Initialize router's `state.url` on the server

Reported by: luisherranz's profile luisherranz Owned by: luisherranz's profile luisherranz
Milestone: 7.0 Priority: normal
Severity: normal Version:
Component: Interactivity API Keywords: has-patch has-unit-tests
Focuses: Cc:

Description

The Interactivity API router currently initializes state.url on the client using window.location.href. With the changes in Gutenberg PR #70882, this initialization was moved to a fallback pattern (state.url = state.url || window.location.href) so that the server can populate it first.

This ticket adds the server-side initialization of state.url in the core/router namespace. The URL is set during the processing of the data-wp-router-region directive, using the same pattern that WordPress core uses internally to construct the current request URL (see redirect_canonical() and get_self_link()):

wp_interactivity_state(
    'core/router',
    array(
        'url' => set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . wp_unslash( $_SERVER['REQUEST_URI'] ) ),
    )
);

This enables proper server-side rendering of directives that reference state.url in the core/router store.

Change History (3)

This ticket was mentioned in PR #10944 on WordPress/wordpress-develop by @luisherranz.


3 weeks ago
#1

  • Keywords has-patch has-unit-tests added

### What

This PR populates state.url in the core/router Interactivity API namespace on the server, inside the data-wp-router-region directive processor.

Trac ticket: https://core.trac.wordpress.org/ticket/64649

### Why

After Gutenberg PR https://github.com/WordPress/gutenberg/pull/70882, state.url in the interactivity router is no longer unconditionally set to window.location.href on the client. Instead, it falls back to window.location.href only if the server hasn't already provided a value:

state.url = state.url || window.location.href;

This PR provides that server-side value by calling wp_interactivity_state( 'core/router', ... ) during directive processing, following the same URL construction pattern used by redirect_canonical() and get_self_link().

### How

  • Adds a wp_interactivity_state( 'core/router', array( 'url' => ... ) ) call inside data_wp_router_region_processor() in WP_Interactivity_API.
  • The URL is constructed using set_url_scheme(), $_SERVER['HTTP_HOST'], and $_SERVER['REQUEST_URI'].

### Testing

  1. Create a page with a Query Loop block using enhanced pagination (which uses data-wp-router-region).
  2. View the page source and verify the interactivity script module data JSON includes "core/router" with the "url" property matching the current page URL.
  3. Verify client-side navigation still works correctly.

### Use of AI tools

Claude Code was used to research the best way to construct the URL and how other internal WordPress functions do it, and assist in creating the tests.

#2 @luisherranz
3 weeks ago

  • Owner set to luisherranz
  • Resolution set to fixed
  • Status changed from new to closed

In 61659:

Interactivity API: populate router's state.url in the server

Set the core/router state url property with the current page URL using get_self_link() when the first data-wp-router-region directive is processed, so that the stores subscribing to that property already have the correct value on page load.

Props westonruter.
Fixes #64649.

@luisherranz commented on PR #10944:


3 weeks ago
#3

Thanks (as always), Weston! Committed 🙏

Note: See TracTickets for help on using tickets.