Fatal Error on Saving Navigation Block with URL Containing Array-Like Query Parameters

[mreishus]

Description

When attempting to save a navigation block in the Gutenberg editor that contains a custom link with a URL having array-like query parameters (e.g., param[0]=value), a fatal error occurs, preventing the save operation.

The line that crashes is:

gutenberg/packages/block-library/src/navigation-link/index.php

Line 135 in 7105a03

if ( rawurldecode( $query_param ) !== $query_param ) {

$query_param is an array:

    [query_param] => Array
        (
            [0] => value
        )

And the fatal error is:

Fatal error: Uncaught TypeError: rawurldecode(): Argument #1 ($string) must be of type string, array given

Step-by-step reproduction instructions

1. Navigate to http://localhost:8888/wp-admin in a WordPress environment set up with wp-env.
2. Go to Appearance > Editor.
3. Click on Navigation.
4. Click the pencil icon on the left side to edit.
5. Click on the words "Sample Page" in the block. A toolbar popup will appear.
6. In the toolbar, click the icon for the Page List block on the left side.
7. Select "Transform to Custom Link."
8. In the "Search or type URL" box, type https://example.com/page?param[0]=value and press enter.
9. Attempt to save the changes.

Screenshots, screen recording, code snippet

Environment info

Fresh wp-env as of 2024-01-19.

WP 6.4.2 (bundled Gutenberg editor)
Theme: Twenty Twenty-Four

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

[ghost]

I am working on this bug.

[ghost]

I can see the same error for theme Twenty Twenty-Four but it works fine on Twenty Twenty-One.

[ghost]

It seems my errors have different file paths.

Warning: rawurldecode() expects parameter 1 to be string, array given in /var/www/src/wp-includes/blocks/navigation-link.php on line 135

Warning: rawurldecode() expects parameter 1 to be string, array given in /var/www/src/wp-includes/blocks/navigation-link.php on line 135

[mreishus]

Ah, I think there are two different failure modes

• (1) Saving a new navigation block update in PHP >= 8 as in my instructions
• (2) Having a site with the https://example.com/page?param[0]=value value in navigation already saved (because it was saved in PHP 7, where it's not a fatal error), and then rendering it in PHP >= 8.

I gave instructions to reproduce (1) but my error lines stated were actually from (2). My apologies.

[ghost]

It seems like a PHP issue instead of ReactJS. Still working on it. Not sure why it works fine on Twenty Twenty-One.

[ghost]

After I npm run build and dev, the error show in Warning: rawurldecode() expects parameter 1 to be string, array given in /var/www/src/wp-content/plugins/gutenberg/build/block-library/blocks/navigation-link.php on line 135

[mreishus]

In PHP 7 and earlier, it's a warning, but in PHP 8 or later, it's a fatal error: Example w/ output.

[ghost]

Thanks.

[ghost]

Can deactive the Gutenberg to see if you get the same error?

[ghost]

Can you add a more complex custom url? Like this: example.com/page?param[0]=value&param[1]=value1

[ghost]

Using param[0] is not a proper way to write querystring. It should be like this: example.com/page?id=1&name=John

I also found that the custom link value saved and the hyperlink are not matched. It could be the Gutenberg redux didn't get updated and saved correctly. It can also be the default themes are not up-to-date. I'll check both tomorrow. Here is an example:

Text displays 'example.com/page?id=1&name=John' but the hyperlink is previous the saved value 'https://example.com/page?param%5B0%5D=value'

https://help.marketruler.com/wiki/What_is_the_correct_syntax_for_query_strings%3F

[ghost]

I work with premium themes like Elegant Divi themes. It has no problem with Gutenberg. I think the current default themes are not up-to-date. I tested some other default themes. I got errors messages saying themes are not compatible with Gutenberg. Why don't you try out with a premium theme to see if it has the same problem. On my end, I looked at almost every codes.

[ironprogrammer]

Reproduction Report

Environment

• Hardware: MacBook Pro Apple M1 Pro
• OS: macOS 14.3
• Browser: Safari 17.3
• Server: nginx/1.25.3
• PHP: 8.3.2
• WordPress: 6.5-alpha-56966-src
• Theme: twentytwentyfour v1.0
• Active Plugins:
  • gutenberg v17.6.0-rc.2

Actual Results

• ✅ Using Add Link in site Navigation editor causes fatal when saved.
• ✅ Adding Custom Link in Navigation block on Post causes fatal when attempting to publish post.

PHP Fatal error: Uncaught TypeError: rawurldecode(): Argument #1 ($string) must be of type string, array given in .../gutenberg/build/block-library/blocks/navigation-link.php:135

Additional Notes

• With Gutenberg trunk active, the "Transform to" menu options were not available, so I used the Add Link option instead.
• 🚨 After attempting to save/publish site navigation or a post with a link containing array query params, if the problematic link is not deleted and the navigation re-saved before exiting the editor, then the fatal will recur in the following situations:
  • navigating to the site's frontend
  • navigating to Appearance > Editor
  • navigating into a post with the Navigation block
• If the above happens, check the wp_posts table where post_type="wp_navigation" to isolate and remove the navigation with the broken link. The wp:navigation-link block can be removed directly, or delete the navigation post itself. E.g. the post_content might include the following:

<!-- wp:navigation-link {"label":"example.com/page?param[0]=value","url":"https://example.com/page?param%5B0%5D=value","kind":"custom","isTopLevelLink":true} /-->

Screenshots

Figure 1: Site editor error displayed upon save.

Figure 2: Post editor errors displayed upon save/publish.