From 6c07e2bae091b23d78490eecc16dc4b9bd6a1b7c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 8 Jul 2021 12:46:26 +0100
Subject: [PATCH] Prevent entering invalid values in the Query Loop block
 config

---
 .../src/query/edit/query-toolbar.js           | 37 ++++++++++++++-----
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
index db4de14f297b1..92db79c7dad7b 100644
--- a/packages/block-library/src/query/edit/query-toolbar.js
+++ b/packages/block-library/src/query/edit/query-toolbar.js
@@ -61,11 +61,18 @@ export default function QueryToolbar( {
 										labelPosition="edge"
 										min={ 1 }
 										max={ 100 }
-										onChange={ ( value ) =>
+										onChange={ ( value ) => {
+											if (
+												isNaN( value ) ||
+												value < 1 ||
+												value > 100
+											) {
+												return;
+											}
 											setQuery( {
-												perPage: +value ?? -1,
-											} )
-										}
+												perPage: value,
+											} );
+										} }
 										step="1"
 										value={ query.perPage }
 										isDragEnabled={ false }
@@ -78,9 +85,16 @@ export default function QueryToolbar( {
 										labelPosition="edge"
 										min={ 0 }
 										max={ 100 }
-										onChange={ ( value ) =>
-											setQuery( { offset: +value } )
-										}
+										onChange={ ( value ) => {
+											if (
+												isNaN( value ) ||
+												value < 0 ||
+												value > 100
+											) {
+												return;
+											}
+											setQuery( { offset: value } );
+										} }
 										step="1"
 										value={ query.offset }
 										isDragEnabled={ false }
@@ -98,9 +112,12 @@ export default function QueryToolbar( {
 										label={ __( 'Max page to show' ) }
 										labelPosition="edge"
 										min={ 0 }
-										onChange={ ( value ) =>
-											setQuery( { pages: +value } )
-										}
+										onChange={ ( value ) => {
+											if ( isNaN( value ) || value < 0 ) {
+												return;
+											}
+											setQuery( { pages: value } );
+										} }
 										step="1"
 										value={ query.pages }
 										isDragEnabled={ false }