Filter out leading zeros in How-To Block time input fields

[Dieterrr]

Summary

This PR can be summarized in the following changelog entry:

• Leading 0s in the input fields for time in the How-To block are removed automatically.

Relevant technical choices:

• Added id's to the input fields for Hours and Minutes
• Set maximum duration in minutes to 59 (from 60).

Test instructions

This PR can be tested by following these steps:

• Checkout this branch and build.
• Make a new post (with Gutenberg enabled), add a How-To block by clicking the "+" and scrolling down to "Structured data blocks" and selecting the "How-To" block.
• Add a time in hours and minutes, and make sure that when you type leading 0s (for example "00002" hours) the 0s are removed. So it should become "2". Trailing 0s (for example 20000) should work as usual.
• The cursor will jump to the back (right) of the input field when a leading 0 is removed. This is regex and ok for now.
• The max amount of minutes is set to 59. When you set minutes to 59 in your post it will say "one hour", this is the doing of humanize() and will be fixed in a separate issue.
• Entering a single 0 in any of the fields is fine and that should not be removed.
• The format is not localized yet, this needs to be fixed in a separate issue.

Quality assurance

• I have tested this code to the best of my abilities
• I have added unittests to verify the code works as intended

Fixes #10663
Fixes #10668

[jcomack]

CR done 🏗

[jcomack]

I'd vouch for replacing this with a function that strips off leading zeros and allows (optional) parameters to be passed for the min/max values. If the value results into a fully empty string, return null.

Psuedo-implementation:

function formatDuration( duration, maxDuration = null ) {
    const newDuration = duration.replace( /^[0]+/, "" );

    if ( newDuration === "" ) {
        return null;
    }

    if ( maxDuration !== null ) {
        return Math.min( Math.max( 0, newDuration ), maxDuration );
    }

    return Math.max( 0, newDuration );
}

I believe this will also solve the issue that you cannot clear either field without it automatically adding a zero.

[afercia]

I think there's an usability and accessibility issue with this. By using the placeholder attributes, we are asking users to enter hours and minutes in a specific format. The two fields clearly suggest HH and MM format:

Now, what if, as a user, I want to enter a duration of 1 hour? I'll diligently try to follow the instructions and enter 1 in the first field, and 00 in the second field. The result will be a bit confusing:

I'd suggest to consider to allow a double zero 00 as valid value for the minutes.

I'd argue that also the hour field placeholder is asking for a value with 2 digits, so what we're communicating to users is to enter 01 for one hour and so on. But maybe this is for super-technical users.

On a side note:
these two fields are of type number but then we're not using most of the features of the input type number:

• we're resetting the spin-button (the arrows to increase/decrease the value) via CSS
• we're implementing logic in JavaScript to determine the min and max values
• so, why we're using a type="number" in the first place?

I haven't closely followed the development but, unless I'm missing something, at least the minutes 59 max value could be implemented with the max HTML attribute?

[afercia]

One more consideration: what if users enter 0 and 0 as values? Should these values be allowed?

[maartenleenders]

@afercia when the user enters 0 in both, the time duration is not shown in the frontend, so that is not an issue.

[maartenleenders]

CR 👍

[dutchmartin]

Acceptance done, but please fix the merge conflict first.
Short note:
I would like to see that if i type in 100 minutes, it automatically converts it into 1 hour and 40 minutes since the current situation only converts it to 59 and that is not the value a user intended.