Media & Text Focal Point Picker Producing Long Decimal Values

[mrwweb]

Description

When setting a focal point on Media & Text blocks, the background-position value sometimes isn't rounded correctly. For examples:

• 55.00000000000001% 50% for what should be 55% 50%
• 56.99999999999999% 50% for what should be 57%, 50%

It does not impact every number. In my testing, I got the weird long decimals for 55-58% in both the X and Y axes.

This is extremely similar to an issue with Cover blocks in #18665 that was fixed in late 2019.

Step-by-step reproduction instructions

1. Insert Media & Text Block
2. Set at least one focal point value to between 55%-58%

Expected behaviour

Value in code matches value in UI.

Note: Attempting to fix the values in the code editor results in "This block contains unexpected or invalid content."

Actual behaviour

<!-- wp:media-text {"mediaId":8,"mediaLink":"https://playground.local/2012-04-22_11-21-16_856/","mediaType":"image","imageFill":true,"focalPoint":{"x":0.55,"y":"0.50"}} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill"><figure class="wp-block-media-text__media" style="background-image:url(https://playground.local/wp-content/uploads/2020/09/2012-04-22_11-21-16_856-1024x577.jpg);background-position:55.00000000000001% 50%"><img src="https://playground.local/wp-content/uploads/2020/09/2012-04-22_11-21-16_856-1024x577.jpg" alt="" class="wp-image-8 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} -->
<p class="has-large-font-size">This is a block.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

Screenshots or screen recording (optional)

WordPress information

• WordPress version: 5.8
• Gutenberg version: Not installed
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Yes, Twenty Twenty

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Firefox 91