[ Navigation block ] Remove unnecessary white spaces.

[kurudrive]

What?

Remove unnecessary white spaces from navigation block's class.

Why?

The navigation block's class name contains unnecessary spaces.

How?

Delete space ( add .trim(); )

Testing Instructions

1. npm run build
2. Please check HTML of the navigation block

Screenshots or screencast

After

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: kurudrive <[email protected]>
Co-authored-by: talldan <[email protected]>
Co-authored-by: luisherranz <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[talldan]

Thanks for the contribution. From what I can tell this change doesn't seem to fix the issue. I think the extra space come from the Interactivity API's data-wp-class directive, which is used on that element:

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

Lines 504 to 505 in 9cba28a

	data-wp-class--has-modal-open="state.isMenuOpen"
	data-wp-class--is-menu-open="state.isMenuOpen"

It seems like a very minor issue, but I'll cc @luisherranz, just in case it's a quick one to fix.

[luisherranz]

Maybe it's the way we are formatting the directives in PHP using line breaks instead of spaces?

[talldan]

Actually, I take it back, sorry for the incorrect ping @luisherranz . It is caused by the navigation block's code. I made a PR for it - #68161. I'll close this one.

Possibly there is still an issue in the interactivity API, hard for me to say. On first process of the directive it trims the class attribute and removes the extra space the nav block was outputting, and assigns the trimmed value back to element.props.class:

gutenberg/packages/interactivity/src/directives.tsx

Lines 370 to 372 in dea955c

	element.props.class = currentClass
	.replace( classFinder, ' ' )
	.trim();

Then on clicking the button the extra space seems to come back again via the currentClass variable:

gutenberg/packages/interactivity/src/directives.tsx

Lines 374 to 376 in dea955c

	element.props.class = currentClass
	? `${ currentClass } ${ className }`
	: className;

It seems like element.props.class isn't updated properly that first time, or perhaps some other code sets it back to the original value.

Anyway, after calling this low priority I've spent time debugging it now 🤦

[kurudrive]

@talldan Thank you for checking and addressing the issue (￣人￣)