Merge pull request #10705 from Yoast/10663-HowToBlock-should-not-allo…

…w-leading-zeroes

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

js/src/structured-data-blocks/how-to/components/HowTo.js

@@ -3,8 +3,10 @@ import PropTypes from "prop-types";
 import HowToStep from "./HowToStep";
 import isUndefined from "lodash/isUndefined";
 import moment from "moment";
+import momentDurationFormatSetup from "moment-duration-format";
 import styled from "styled-components";
 import { __ } from "@wordpress/i18n";
+import toString from "lodash/toString";
 
 /* Internal dependencies */
 import { stripHTML } from "../../../helpers/stringHelpers";
@@ -13,6 +15,8 @@ const { RichText, InspectorControls } = window.wp.editor;
 const { IconButton, PanelBody, TextControl, ToggleControl } = window.wp.components;
 const { Component, renderToString } = window.wp.element;
 
+momentDurationFormatSetup( moment );
+
 /**
  * Modified Text Control to provide a better layout experience.
  *
@@ -284,6 +288,31 @@ export default class HowTo extends Component {
 		} );
 	}
 
+	/**
+	 * Formats the time in the input fields by removing leading zeros.
+	 *
+	 * @param {number} duration    The duration as entered by the user.
+	 * @param {number} maxDuration Optional. The max duration a field can have.
+	 *
+	 * @returns {number} The formatted duration.
+	 */
+	formatDuration( duration, maxDuration = null ) {
+		if ( duration === "" ) {
+			return "";
+		}
+
+		const newDuration = duration.replace( /^[0]+/, "" );
+		if ( newDuration === "" ) {
+			return 0;
+		}
+
+		if ( maxDuration !== null ) {
+			return Math.min( Math.max( 0, parseInt( newDuration, 10 ) ), maxDuration );
+		}
+
+		return Math.max( 0, parseInt( newDuration, 10 ) );
+	}
+
 	/**
 	 * Returns a component to manage this how-to block's duration.
 	 *
@@ -312,15 +341,23 @@ export default class HowTo extends Component {
 					type="number"
 					value={ attributes.hours }
 					onFocus={ () => this.setFocus( "hours" ) }
-					onChange={ ( event ) => setAttributes( { hours: Math.max( 0, event.target.value ) } ) }
+					id="hours-input"
+					onChange={ ( event ) => {
+						const newValue = this.formatDuration( event.target.value );
+						setAttributes( { hours: toString( newValue ) } );
+					} }
 					placeholder="HH"/>
 				<span>:</span>
 				<input
 					className="schema-how-to-duration-input"
 					type="number"
 					value={ attributes.minutes }
 					onFocus={ () => this.setFocus( "minutes" ) }
-					onChange={ ( event ) => setAttributes( { minutes: Math.min( Math.max( 0, event.target.value ), 60 ) } ) }
+					id="minutes-input"
+					onChange={ ( event ) => {
+						const newValue = this.formatDuration( event.target.value, 59 );
+						setAttributes( { minutes: toString( newValue ) } );
+					} }
 					placeholder="MM" />
 				<IconButton
 					className="schema-how-to-duration-button editor-inserter__toggle"
@@ -369,10 +406,16 @@ export default class HowTo extends Component {
 		const listClassNames    = [ "schema-how-to-steps", additionalListCssClasses ].filter( ( item ) => item ).join( " " );
 		const contentHeadingID  = headingID ? headingID : stripHTML( renderToString( title ) ).toLowerCase();
 
-		const timeString = [
-			hours && moment.duration( hours, "hours" ).humanize(),
-			minutes && moment.duration( minutes, "minutes" ).humanize(),
-		].filter( ( item ) => item ).join( " and " );
+		const durationHours = hours ? parseInt( hours, 10 ) : 0;
+		const durationMinutes = minutes ? parseInt( minutes, 10 ) : 0;
+		const durationFormat = ( durationHours === 0 ? "" : "h [hours]" ) +
+							   ( durationHours && durationMinutes ? __( " [and] ", "wordpress-seo" ): "" ) +
+							   ( durationMinutes === 0 ? "" : "m [minutes]" );
+
+		const timeString = moment.duration( {
+			hours: durationHours,
+			minutes: durationMinutes,
+		} ).format( durationFormat );
 
 		return (
 			<div className={ classNames }>
@@ -455,7 +498,7 @@ export default class HowTo extends Component {
 	/**
 	 * Returns the help text for this how-to block"s list type.
 	 *
-	 * @param  {boolean} checked Whether or not the list is unordered.
+	 * @param {boolean} checked Whether or not the list is unordered.
 	 *
 	 * @returns {string} The list type help string.
 	 */

package.json

@@ -128,6 +128,7 @@
     "marked": "^0.3.6",
     "material-ui": "^0.20.0",
     "moment": "2.22.2",
+    "moment-duration-format": "^2.2.2",
     "prop-types": "^15.5.10",
     "react-intl": "^2.4.0",
     "react-redux": "^5.0.6",

yarn.lock

@@ -7280,6 +7280,10 @@ [email protected], "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
   dependencies:
     minimist "0.0.8"
 
+moment-duration-format@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/moment-duration-format/-/moment-duration-format-2.2.2.tgz#b957612de26016c9ad9eb6087c054573e5127779"
+
 [email protected]:
   version "0.5.11"
   resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.11.tgz#9b76c03d8ef514c7e4249a7bbce649eed39ef29f"