Navigation: Custom font size outputs pxpx instead of px on the frontend

[jasmussen]

Description

When you set a custom font size on a navigation menu, everything works, editor and frontend. But the frontend outputs invalid inline font size properties:

<li style="font-size: 65pxpx;" class=" wp-block-navigation-item wp-block-navigation-link">
...
</li>

This issue was originally discovered here, where it was suggested that the following code could be related:

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/navigation/index.php#L122

Step-by-step reproduction instructions

1. Insert a nav menu
2. Set a custom non-preset font size
3. Save and preview on the frontend
4. Use the web inspector to look at the code

Screenshots, screen recording, code snippet

[jasmussen]

Note that if a theme uses rem or another unit to size items, these are output as rempx, so there's a hardcoded px value somewhere:

[ntsekouras]

This seems to be a bit more convoluted as I'm not so familiar with Navigation block. I'd appreciate some thoughts from @tellthemachines as this is also related to these changes: https://github.com/WordPress/gutenberg/pull/28868/files#diff-96cfb99105116cdbf48eface8e7ac4dff062da11f291996bf5748d5a8b90f3e0R75

[tellthemachines]

The original line is, I think, this one, but the same issue can now be found in Navigation Link, Submenu, Home Link and Page List blocks. It's essentially the same function that has been copied over to the other blocks, so perhaps we should extract it and put it somewhere where it can be used by all blocks. In the meantime, can we just remove that hardcoded px from all the files?

[aristath]

Related: #26762. There was an identical issue there, so I assume the fix would be similar 👍