Make required opt-in; Add required to existing RangeControl usages.

packages/block-library/src/columns/index.js

@@ -172,6 +172,7 @@ export const settings = {
 							} }
 							min={ 2 }
 							max={ 6 }
+							required
 						/>
 					</PanelBody>
 				</InspectorControls>

packages/block-library/src/cover/edit.js

@@ -214,6 +214,7 @@ class CoverEdit extends Component {
 									min={ 0 }
 									max={ 100 }
 									step={ 10 }
+									required
 								/>
 							</PanelColorSettings>
 						</PanelBody>

packages/block-library/src/gallery/edit.js

@@ -250,6 +250,7 @@ class GalleryEdit extends Component {
 							onChange={ this.setColumnsNumber }
 							min={ 1 }
 							max={ Math.min( MAX_COLUMNS, images.length ) }
+							required
 						/> }
 						<ToggleControl
 							label={ __( 'Crop Images' ) }

packages/block-library/src/latest-comments/edit.js

@@ -85,6 +85,7 @@ class LatestComments extends Component {
 							onChange={ this.setCommentsToShow }
 							min={ MIN_COMMENTS }
 							max={ MAX_COMMENTS }
+							required
 						/>
 					</PanelBody>
 				</InspectorControls>

packages/block-library/src/latest-posts/edit.js

@@ -109,6 +109,7 @@ class LatestPostsEdit extends Component {
 							onChange={ ( value ) => setAttributes( { columns: value } ) }
 							min={ 2 }
 							max={ ! hasPosts ? MAX_POSTS_COLUMNS : Math.min( MAX_POSTS_COLUMNS, latestPosts.length ) }
+							required
 						/>
 					}
 				</PanelBody>

packages/block-library/src/rss/edit.js

@@ -119,6 +119,7 @@ class RSSEdit extends Component {
 							onChange={ ( value ) => setAttributes( { itemsToShow: value } ) }
 							min={ DEFAULT_MIN_ITEMS }
 							max={ DEFAULT_MAX_ITEMS }
+							required
 						/>
 						<ToggleControl
 							label={ __( 'Display author' ) }
@@ -142,6 +143,7 @@ class RSSEdit extends Component {
 								onChange={ ( value ) => setAttributes( { excerptLength: value } ) }
 								min={ 10 }
 								max={ 100 }
+								required
 							/>
 						}
 						{ blockLayout === 'grid' &&
@@ -151,6 +153,7 @@ class RSSEdit extends Component {
 								onChange={ ( value ) => setAttributes( { columns: value } ) }
 								min={ 2 }
 								max={ 6 }
+								required
 							/>
 						}
 					</PanelBody>

packages/block-library/src/text-columns/index.js

@@ -114,6 +114,7 @@ export const settings = {
 							onChange={ ( value ) => setAttributes( { columns: value } ) }
 							min={ 2 }
 							max={ 4 }
+							required
 						/>
 					</PanelBody>
 				</InspectorControls>

packages/components/CHANGELOG.md

@@ -9,6 +9,7 @@
 - `withFilters` has been optimized to avoid binding hook handlers for each mounted instance of the component, instead using a single centralized hook delegator.
 - `withFilters` has been optimized to reuse a single shared component definition for all filtered instances of the component.
 - Make `RangeControl` validate min and max properties.
+- Allow users to choose if `RangeControl` input is required or not. Defaults to not be required.
 
 ### Bug Fixes
 

packages/components/src/query-controls/index.js

@@ -79,6 +79,7 @@ export default function QueryControls( {
 				onChange={ onNumberOfItemsChange }
 				min={ minItems }
 				max={ maxItems }
+				required
 			/>
 		),
 	];

packages/components/src/range-control/README.md

@@ -186,11 +186,11 @@ The maximum value accepted. If higher values are inserted onChange will not be c
 
 #### required
 
-If true having the input field empty is invalid if false having the input field empty is valid.
+If true having the input field empty is invalid. If false having the input field empty is valid.
 
 - Type: `Boolean`
 - Required: Yes
-- Default: true
+- Default: false
 
 ## Related components
 

packages/components/src/range-control/index.js

@@ -30,7 +30,7 @@ function RangeControl( {
 	min,
 	max,
 	setState,
-	required = true,
+	required = false,
 	...props
 } ) {
 	const id = `inspector-range-control-${ instanceId }`;
@@ -60,7 +60,10 @@ function RangeControl( {
 		// The input is valid, reset the local state property used to temporaly save the value,
 		// and call onChange with the new value as a number.
 		resetCurrentInput();
-		onChange( parseFloat( newValue ) );
+		onChange( ( newValue === undefined || newValue === '' ) ?
+			newValue :
+			parseFloat( newValue )
+		);
 	};
 	const initialSliderValue = isFinite( currentInputValue ) ?
 		currentInputValue :

packages/components/src/range-control/test/index.js

@@ -267,7 +267,7 @@ describe( 'RangeControl', () => {
 				}
 			);
 
-			expect( onChange ).toHaveBeenCalled();
+			expect( onChange ).toHaveBeenCalledWith( -50 );
 		} );
 		it( 'takes into account the step starting from min', () => {
 			const onChange = jest.fn();
@@ -304,7 +304,7 @@ describe( 'RangeControl', () => {
 				}
 			);
 
-			expect( onChange ).toHaveBeenCalled();
+			expect( onChange ).toHaveBeenCalledWith( 0.225 );
 		} );
 	} );
 } );