Navigation block: Setting "hasIcon":false doesn't work if the navigation has "style":{}

[andersnoren]

Description

If you set a navigation block to "hasIcon":false (Show icon button = false), the setting is reset in the editor and ignored on the front-end if the navigation block has anything in the "style":{} blob.

Step-by-step reproduction instructions

1. Open header.html in Twenty Twenty-Four, or any other block theme.
2. Add the following code:

<!-- wp:navigation {"hasIcon":false,"style":{"spacing":{"margin":{"top":"0"}}}} /-->
<!-- wp:navigation {"hasIcon":false} /-->

3. Both are set to show a text label on mobile, but only the first has styles set. If you check the front-end on mobile, the first will have an icon, and the bottom one won't. If you check the editor, the first will be marked as "Show icon button" = true in the block settings, and the bottom one set to false, when both should be false.

Screenshots, screen recording, code snippet

Environment info

WordPress 6.5.2
With or without Gutenberg active

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

[amitraj2203]

Hi @andersnoren, It's happening probably because in the code you mentioned the first nav has a missing ending }.

So the correct one is this:

<!-- wp:navigation {"hasIcon":false,"style":{"spacing":{"margin":{"top":"0"}}}} /-->
<!-- wp:navigation {"hasIcon":false} /-->

[andersnoren]

@amitraj2203 You're entirely correct – thanks for catching that. Closing!