RangeControl: tweak mark and label absolute positioning

[ramonjd]

What?

Resolves: #64481

This commit tweaks the position of the range control marks and labels to fit the original 2020 design.

Why?

I can't find the regression, but there seems to be one.

How?

Tweaky tweaky.

Testing Instructions

The easiest way to test is to run story book locally — npm run storybook:dev — and head to http://localhost:50240/?path=/story/components-rangecontrol--with-integer-step-and-marks

Check that that the marks and labels sit neat behind, and under the range control bar.

Compare with trunk: https://wordpress.github.io/gutenberg/?path=/story/components-rangecontrol--with-integer-step-and-marks

I also added some marks to existing block editor controls to check for side-effects.

Here's the Cover block opacity range control:

2024-08-14.12.34.04.mp4

Diff for the above cover block test

diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
index 5f93df58ad..54e1a7489a 100644
--- a/packages/block-library/src/cover/edit/inspector-controls.js
+++ b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -291,8 +291,34 @@ export default function CoverInspectorControls( {
 							}
 							min={ 0 }
 							max={ 100 }
-							step={ 10 }
+							step={ 20 }
 							required
+							marks={ [
+								{
+									value: 0,
+									label: '0',
+								},
+								{
+									value: 20,
+									label: '20',
+								},
+								{
+									value: 40,
+									label: '40',
+								},
+								{
+									value: 60,
+									label: '60',
+								},
+								{
+									value: 80,
+									label: '80',
+								},
+								{
+									value: 100,
+									label: '100',
+								},
+							] }
 							__next40pxDefaultSize
 						/>
 					</ToolsPanelItem>

Screenshots or screencast

Before	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: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>

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

[mirka]

Thank you for the tweaky tweak!

Funny how this was so obviously broken for years and now that it's fixed I can't unsee this border radius detail 😂 It's definitely a separate issue though, since we'll have to detect whether there is a mark at each end point, which is not always true.

[ramonjd]

Thank you @mirka !