Improve Heading typo component

[Soare-Robert-Daniel]

Closes #1882

Summary

Moved the old typo component to the new one.

Development notes: It was not a smooth experience, but I was glad to find a new trick to tackle the responsive option.

Screenshots

Before

After

---

Test instructions

⚠️ Before using this build, make some Heading blocks with the current version and customize them with Typography.

Switching to the PR build and checking if the options are the same as before and if they are working like before.

---

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	274.81 KB	274.81 KB	0 B (0.00%)
Blocks	1.47 MB	1.47 MB	593 B (0.04%)
CSS	89.3 KB	89.3 KB	0 B (0.00%)
Dashboard	131.23 KB	131.23 KB	0 B (0.00%)
Export Import	87.19 KB	87.19 KB	0 B (0.00%)
Pro	346.75 KB	346.75 KB	0 B (0.00%)

[pirate-bot]

Plugin build for c2143ff 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	96.56	14.53	91.87	0 (60ms)	5.26 (80ms)

Values above 60ms

"0 - 135.85, 1 - 86.28, 2 - 89.34, 3 - 102.21, 4 - 110.84, 5 - 87.32, 6 - 95.98, 7 - 76.27, 8 - 81.38, 9 - 89.99, 10 - 99.56, 11 - 125.86, 12 - 85.32, 13 - 109.73, 14 - 88.94, 15 - 95.09, 16 - 91.87, 17 - 90.92, 18 - 91.90"

[HardeepAsrani]

Looks good, for QA we should make sure that each control is tested with how it works with existing patterns.

[irinelenache]

@Soare-Robert-Daniel Tested and everything's fine regarding the PR, found a single issue that was also happening before, maybe we can fix it here:

• If i use the unitless option for line height, it will work fine in editor for values lower or equal to 3 (in frontend is fine). Here is a video with the behaviour https://vertis.d.pr/v/SvTUi1

[Soare-Robert-Daniel]

@irinelenache, thanks for the catch. I think i missed updating that editor condition.

Here is a little context on that thing. Before the new components, the heading used a slider in which after you crossed the value 3 it will use pixels as units -- on the idea that you do not need more than 3, which translates to 300%.

Now with new components, we can choose the unit and not be limited by this. But, we still need to maintain backward compatibility, thus some conditions are creeping around.

Here is a video

2023-10-05_14-16-52.mp4

Notice how it behaves when you remove the " around the number -- this is the old value type used at the start of plugin.

[irinelenache]

@Soare-Robert-Daniel Tested again and everything's fine now 👍

[pirate-bot]

🎉 This PR is included in version 2.4.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀