Add height & font-size scaling for Progress Bar

[Soare-Robert-Daniel]

Closes #1776

Summary

The Progress Bar can be tiny but not too big on Mobile.

For Mobile (viewport with less than 600px width), the height will be between 0px and 64px instead of the fixed 30px.

Screenshots

Desktop

Mobile

---

Test instructions

1. Create a Progress Bar.
2. Add some colossal height.
3. On the Desktop should be the same size but on the Mobile should be smaller.
4. Now make a smaller Progress Bar (height less than 64px).
5. It should look the same on both Desktop and Mobile

ℹ️ Progress Bar does not have responsive options; thus, the constrain is implemented.

---

Checklist before the final review

• Included E2E or unit tests for the changes in this PR.
• Visual elements are not affected by independent changes.
• It is at least compatible with the minimum WordPress version.
• It loads additional script in frontend only if it is required.
• Does not impact the Core Web Vitals.
• In case of deprecation, old blocks are safely migrated.
• It is usable in Widgets and FSE.
• Copy/Paste is working if the attributes are modified.
• PR is following the best practices

[pirate-bot]

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	270.78 KB	270.78 KB	0 B (0.00%)
Blocks	1.41 MB	1.41 MB	0 B (0.00%)
CSS	85.28 KB	85.28 KB	0 B (0.00%)
Dashboard	122.49 KB	122.49 KB	0 B (0.00%)
Export Import	83.17 KB	83.17 KB	0 B (0.00%)
Pro	302.52 KB	302.52 KB	0 B (0.00%)

[pirate-bot]

Plugin build for f80bc45 is ready 🛎️!

• Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
• Download Otter Pro - Production ~ Development
• Download Blocks Animation - Production ~ Development
• Download Blocks CSS - Production ~ Development
• Download Blocks Export Import - Production ~ Development

[pirate-bot]

E2E Summary

Typing

Test	Average Time (ms)	Standard Deviation (ms)	Median Time (ms)	Quantile for soft limit (%)	Quantile for hard limit (%)
Typing	75.46	6.09	74.27	0 (60ms)	84.21 (80ms)

Values above 60ms

"0 - 72.13, 1 - 76.47, 2 - 65.03, 3 - 67.22, 4 - 73.50, 5 - 72.13, 6 - 75.35, 7 - 81.18, 8 - 74.27, 9 - 91.14, 10 - 71.26, 11 - 74.68, 12 - 72.35, 13 - 78.50, 14 - 72.52, 15 - 71.44, 16 - 87.14, 17 - 77.60, 18 - 79.73"

[Soare-Robert-Daniel]

@mghenciu, are the new values ok for Progress Bar dimensions?

[mghenciu]

@mghenciu, are the new values ok for Progress Bar dimensions?

Did some testing, and the Height of the Progress bar on Mobile is consistent with the one from Desktop. So the the issue I reported is fixed ✅

I am not 100% sure I understand the values, or what was the solution. But essentially the idea was to have the same height on All Devices - since there's no device based control, and on live the height will be bigger on Mobile compared to desktop.

Thank you.

[rodica-andronache]

@Soare-Robert-Daniel everything's working well 👍

[pirate-bot]

🎉 This PR is included in version 2.3.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀