From e976272c699fe189f8dd9b84faea0274002cf9e8 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 1 Jul 2024 12:25:39 +0200
Subject: [PATCH 1/7] Move Query block Display settings from block toolbar to
 inspector.

---
 .../query/edit/inspector-controls/index.js    |  65 +++++++++++
 .../src/query/edit/query-toolbar.js           | 103 +-----------------
 2 files changed, 66 insertions(+), 102 deletions(-)

diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
index e71b2d09af4b81..1d25680b31df78 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -10,6 +10,7 @@ import {
 	Notice,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
@@ -190,6 +191,70 @@ export default function QueryInspectorControls( props ) {
 							) }
 						</>
 					) }
+					{ ! inherit && (
+						<>
+							<NumberControl
+								__unstableInputWidth="60px"
+								label={ __( 'Items per Page' ) }
+								labelPosition="edge"
+								min={ 1 }
+								max={ 100 }
+								onChange={ ( value ) => {
+									if (
+										isNaN( value ) ||
+										value < 1 ||
+										value > 100
+									) {
+										return;
+									}
+									setQuery( {
+										perPage: value,
+									} );
+								} }
+								step="1"
+								value={ query.perPage }
+								isDragEnabled={ false }
+							/>
+							<NumberControl
+								__unstableInputWidth="60px"
+								label={ __( 'Offset' ) }
+								labelPosition="edge"
+								min={ 0 }
+								max={ 100 }
+								onChange={ ( value ) => {
+									if (
+										isNaN( value ) ||
+										value < 0 ||
+										value > 100
+									) {
+										return;
+									}
+									setQuery( { offset: value } );
+								} }
+								step="1"
+								value={ query.offset }
+								isDragEnabled={ false }
+							/>
+							<NumberControl
+								__unstableInputWidth="60px"
+								label={ __( 'Max pages to show' ) }
+								labelPosition="edge"
+								min={ 0 }
+								onChange={ ( value ) => {
+									if ( isNaN( value ) || value < 0 ) {
+										return;
+									}
+									setQuery( { pages: value } );
+								} }
+								step="1"
+								value={ query.pages }
+								isDragEnabled={ false }
+								help={ __(
+									'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
+								) }
+							/>
+						</>
+					) }
 					{ showOrderControl && (
 						<OrderControl
 							{ ...{ order, orderBy } }
diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
index 7b02290ae4c76c..cc2d62a54d529f 100644
--- a/packages/block-library/src/query/edit/query-toolbar.js
+++ b/packages/block-library/src/query/edit/query-toolbar.js
@@ -1,16 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	ToolbarGroup,
-	Dropdown,
-	ToolbarButton,
-	BaseControl,
-	__experimentalNumberControl as NumberControl,
-} from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { settings } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -18,107 +10,14 @@ import { settings } from '@wordpress/icons';
 import { usePatterns } from '../utils';
 
 export default function QueryToolbar( {
-	attributes: { query },
-	setQuery,
 	openPatternSelectionModal,
 	name,
 	clientId,
 } ) {
 	const hasPatterns = !! usePatterns( clientId, name ).length;
-	const maxPageInputId = useInstanceId(
-		QueryToolbar,
-		'blocks-query-pagination-max-page-input'
-	);
 
 	return (
 		<>
-			{ ! query.inherit && (
-				<ToolbarGroup>
-					<Dropdown
-						contentClassName="block-library-query-toolbar__popover"
-						renderToggle={ ( { onToggle } ) => (
-							<ToolbarButton
-								icon={ settings }
-								label={ __( 'Display settings' ) }
-								onClick={ onToggle }
-							/>
-						) }
-						renderContent={ () => (
-							<>
-								<BaseControl>
-									<NumberControl
-										__unstableInputWidth="60px"
-										label={ __( 'Items per Page' ) }
-										labelPosition="edge"
-										min={ 1 }
-										max={ 100 }
-										onChange={ ( value ) => {
-											if (
-												isNaN( value ) ||
-												value < 1 ||
-												value > 100
-											) {
-												return;
-											}
-											setQuery( {
-												perPage: value,
-											} );
-										} }
-										step="1"
-										value={ query.perPage }
-										isDragEnabled={ false }
-									/>
-								</BaseControl>
-								<BaseControl>
-									<NumberControl
-										__unstableInputWidth="60px"
-										label={ __( 'Offset' ) }
-										labelPosition="edge"
-										min={ 0 }
-										max={ 100 }
-										onChange={ ( value ) => {
-											if (
-												isNaN( value ) ||
-												value < 0 ||
-												value > 100
-											) {
-												return;
-											}
-											setQuery( { offset: value } );
-										} }
-										step="1"
-										value={ query.offset }
-										isDragEnabled={ false }
-									/>
-								</BaseControl>
-								<BaseControl
-									id={ maxPageInputId }
-									help={ __(
-										'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
-									) }
-								>
-									<NumberControl
-										id={ maxPageInputId }
-										__unstableInputWidth="60px"
-										label={ __( 'Max page to show' ) }
-										labelPosition="edge"
-										min={ 0 }
-										onChange={ ( value ) => {
-											if ( isNaN( value ) || value < 0 ) {
-												return;
-											}
-											setQuery( { pages: value } );
-										} }
-										step="1"
-										value={ query.pages }
-										isDragEnabled={ false }
-									/>
-								</BaseControl>
-							</>
-						) }
-					/>
-				</ToolbarGroup>
-			) }
 			{ hasPatterns && (
 				<ToolbarGroup className="wp-block-template-part__block-control-group">
 					<ToolbarButton onClick={ openPatternSelectionModal }>

From 2884323cae0d644f57b2030db8a8894438f1ff72 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 1 Jul 2024 13:20:53 +0200
Subject: [PATCH 2/7] Replace dataviews View options icon with the cog icon.

---
 packages/dataviews/src/view-actions.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/view-actions.tsx b/packages/dataviews/src/view-actions.tsx
index f83a5887065ec3..ff3041b1077337 100644
--- a/packages/dataviews/src/view-actions.tsx
+++ b/packages/dataviews/src/view-actions.tsx
@@ -12,7 +12,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { memo } from '@wordpress/element';
-import { settings } from '@wordpress/icons';
+import { cog } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -314,7 +314,7 @@ function _ViewActions< Item >( {
 			trigger={
 				<Button
 					size="compact"
-					icon={ settings }
+					icon={ cog }
 					label={ __( 'View options' ) }
 				/>
 			}

From 6e1a9e19be6a9ad38a54b678e4cd40bc3e5be099 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Mon, 1 Jul 2024 14:49:38 +0200
Subject: [PATCH 3/7] Remove no longer necessary test.

---
 .../specs/editor/various/is-typing.spec.js    | 32 -------------------
 1 file changed, 32 deletions(-)

diff --git a/test/e2e/specs/editor/various/is-typing.spec.js b/test/e2e/specs/editor/various/is-typing.spec.js
index 8063f688409c4e..3083a0c7b0248f 100644
--- a/test/e2e/specs/editor/various/is-typing.spec.js
+++ b/test/e2e/specs/editor/various/is-typing.spec.js
@@ -36,36 +36,4 @@ test.describe( 'isTyping', () => {
 		// Toolbar Popover is hidden again
 		await expect( blockToolbarPopover ).toBeHidden();
 	} );
-
-	test( 'should not close the dropdown when typing in it', async ( {
-		editor,
-		page,
-	} ) => {
-		// Add a block with a dropdown in the toolbar that contains an input.
-		await editor.insertBlock( { name: 'core/query' } );
-
-		await editor.canvas
-			.getByRole( 'document', { name: 'Block: Query Loop' } )
-			.getByRole( 'button', { name: 'Start blank' } )
-			.click();
-
-		await editor.canvas
-			.getByRole( 'button', { name: 'Title & Date' } )
-			.click();
-
-		// Moving the mouse shows the toolbar.
-		await editor.showBlockToolbar();
-		// Open the dropdown.
-		const displaySettings = page.getByRole( 'button', {
-			name: 'Display settings',
-		} );
-		await displaySettings.click();
-		const itemsPerPageInput = page.getByLabel( 'Items per Page' );
-		// Make sure we're where we think we are
-		await expect( itemsPerPageInput ).toBeFocused();
-		// Type inside the dropdown's input
-		await page.keyboard.type( '00' );
-		// The input should still be visible.
-		await expect( itemsPerPageInput ).toBeVisible();
-	} );
 } );

From b6a5d2b25095c0d935d8412bd169dfb03b800f1b Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 4 Jul 2024 10:17:28 +0200
Subject: [PATCH 4/7] Revert changes to the Query loop block.

---
 .../query/edit/inspector-controls/index.js    |  65 -----------
 .../src/query/edit/query-toolbar.js           | 103 +++++++++++++++++-
 2 files changed, 102 insertions(+), 66 deletions(-)

diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
index 1d25680b31df78..e71b2d09af4b81 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -10,7 +10,6 @@ import {
 	Notice,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
@@ -191,70 +190,6 @@ export default function QueryInspectorControls( props ) {
 							) }
 						</>
 					) }
-					{ ! inherit && (
-						<>
-							<NumberControl
-								__unstableInputWidth="60px"
-								label={ __( 'Items per Page' ) }
-								labelPosition="edge"
-								min={ 1 }
-								max={ 100 }
-								onChange={ ( value ) => {
-									if (
-										isNaN( value ) ||
-										value < 1 ||
-										value > 100
-									) {
-										return;
-									}
-									setQuery( {
-										perPage: value,
-									} );
-								} }
-								step="1"
-								value={ query.perPage }
-								isDragEnabled={ false }
-							/>
-							<NumberControl
-								__unstableInputWidth="60px"
-								label={ __( 'Offset' ) }
-								labelPosition="edge"
-								min={ 0 }
-								max={ 100 }
-								onChange={ ( value ) => {
-									if (
-										isNaN( value ) ||
-										value < 0 ||
-										value > 100
-									) {
-										return;
-									}
-									setQuery( { offset: value } );
-								} }
-								step="1"
-								value={ query.offset }
-								isDragEnabled={ false }
-							/>
-							<NumberControl
-								__unstableInputWidth="60px"
-								label={ __( 'Max pages to show' ) }
-								labelPosition="edge"
-								min={ 0 }
-								onChange={ ( value ) => {
-									if ( isNaN( value ) || value < 0 ) {
-										return;
-									}
-									setQuery( { pages: value } );
-								} }
-								step="1"
-								value={ query.pages }
-								isDragEnabled={ false }
-								help={ __(
-									'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
-								) }
-							/>
-						</>
-					) }
 					{ showOrderControl && (
 						<OrderControl
 							{ ...{ order, orderBy } }
diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
index cc2d62a54d529f..7b02290ae4c76c 100644
--- a/packages/block-library/src/query/edit/query-toolbar.js
+++ b/packages/block-library/src/query/edit/query-toolbar.js
@@ -1,8 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import {
+	ToolbarGroup,
+	Dropdown,
+	ToolbarButton,
+	BaseControl,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { settings } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -10,14 +18,107 @@ import { __ } from '@wordpress/i18n';
 import { usePatterns } from '../utils';
 
 export default function QueryToolbar( {
+	attributes: { query },
+	setQuery,
 	openPatternSelectionModal,
 	name,
 	clientId,
 } ) {
 	const hasPatterns = !! usePatterns( clientId, name ).length;
+	const maxPageInputId = useInstanceId(
+		QueryToolbar,
+		'blocks-query-pagination-max-page-input'
+	);
 
 	return (
 		<>
+			{ ! query.inherit && (
+				<ToolbarGroup>
+					<Dropdown
+						contentClassName="block-library-query-toolbar__popover"
+						renderToggle={ ( { onToggle } ) => (
+							<ToolbarButton
+								icon={ settings }
+								label={ __( 'Display settings' ) }
+								onClick={ onToggle }
+							/>
+						) }
+						renderContent={ () => (
+							<>
+								<BaseControl>
+									<NumberControl
+										__unstableInputWidth="60px"
+										label={ __( 'Items per Page' ) }
+										labelPosition="edge"
+										min={ 1 }
+										max={ 100 }
+										onChange={ ( value ) => {
+											if (
+												isNaN( value ) ||
+												value < 1 ||
+												value > 100
+											) {
+												return;
+											}
+											setQuery( {
+												perPage: value,
+											} );
+										} }
+										step="1"
+										value={ query.perPage }
+										isDragEnabled={ false }
+									/>
+								</BaseControl>
+								<BaseControl>
+									<NumberControl
+										__unstableInputWidth="60px"
+										label={ __( 'Offset' ) }
+										labelPosition="edge"
+										min={ 0 }
+										max={ 100 }
+										onChange={ ( value ) => {
+											if (
+												isNaN( value ) ||
+												value < 0 ||
+												value > 100
+											) {
+												return;
+											}
+											setQuery( { offset: value } );
+										} }
+										step="1"
+										value={ query.offset }
+										isDragEnabled={ false }
+									/>
+								</BaseControl>
+								<BaseControl
+									id={ maxPageInputId }
+									help={ __(
+										'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
+									) }
+								>
+									<NumberControl
+										id={ maxPageInputId }
+										__unstableInputWidth="60px"
+										label={ __( 'Max page to show' ) }
+										labelPosition="edge"
+										min={ 0 }
+										onChange={ ( value ) => {
+											if ( isNaN( value ) || value < 0 ) {
+												return;
+											}
+											setQuery( { pages: value } );
+										} }
+										step="1"
+										value={ query.pages }
+										isDragEnabled={ false }
+									/>
+								</BaseControl>
+							</>
+						) }
+					/>
+				</ToolbarGroup>
+			) }
 			{ hasPatterns && (
 				<ToolbarGroup className="wp-block-template-part__block-control-group">
 					<ToolbarButton onClick={ openPatternSelectionModal }>

From a2aec25f4d09cbd9f7ff1270392f97f1a11c539c Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 4 Jul 2024 10:18:10 +0200
Subject: [PATCH 5/7] Fix typo.

---
 packages/block-library/src/query/edit/query-toolbar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
index 7b02290ae4c76c..fe96c30036b30d 100644
--- a/packages/block-library/src/query/edit/query-toolbar.js
+++ b/packages/block-library/src/query/edit/query-toolbar.js
@@ -100,7 +100,7 @@ export default function QueryToolbar( {
 									<NumberControl
 										id={ maxPageInputId }
 										__unstableInputWidth="60px"
-										label={ __( 'Max page to show' ) }
+										label={ __( 'Max pages to show' ) }
 										labelPosition="edge"
 										min={ 0 }
 										onChange={ ( value ) => {

From deb650226b20299eb127ecd47264baed50a46977 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 4 Jul 2024 13:41:44 +0200
Subject: [PATCH 6/7] Add back test.

---
 .../specs/editor/various/is-typing.spec.js    | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/test/e2e/specs/editor/various/is-typing.spec.js b/test/e2e/specs/editor/various/is-typing.spec.js
index 3083a0c7b0248f..8063f688409c4e 100644
--- a/test/e2e/specs/editor/various/is-typing.spec.js
+++ b/test/e2e/specs/editor/various/is-typing.spec.js
@@ -36,4 +36,36 @@ test.describe( 'isTyping', () => {
 		// Toolbar Popover is hidden again
 		await expect( blockToolbarPopover ).toBeHidden();
 	} );
+
+	test( 'should not close the dropdown when typing in it', async ( {
+		editor,
+		page,
+	} ) => {
+		// Add a block with a dropdown in the toolbar that contains an input.
+		await editor.insertBlock( { name: 'core/query' } );
+
+		await editor.canvas
+			.getByRole( 'document', { name: 'Block: Query Loop' } )
+			.getByRole( 'button', { name: 'Start blank' } )
+			.click();
+
+		await editor.canvas
+			.getByRole( 'button', { name: 'Title & Date' } )
+			.click();
+
+		// Moving the mouse shows the toolbar.
+		await editor.showBlockToolbar();
+		// Open the dropdown.
+		const displaySettings = page.getByRole( 'button', {
+			name: 'Display settings',
+		} );
+		await displaySettings.click();
+		const itemsPerPageInput = page.getByLabel( 'Items per Page' );
+		// Make sure we're where we think we are
+		await expect( itemsPerPageInput ).toBeFocused();
+		// Type inside the dropdown's input
+		await page.keyboard.type( '00' );
+		// The input should still be visible.
+		await expect( itemsPerPageInput ).toBeVisible();
+	} );
 } );

From 20c2ea3cccbbfd42f405b965e4de39e0dd657eab Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 4 Jul 2024 14:01:21 +0200
Subject: [PATCH 7/7] Remove unnecessary BaseControl and fix aria-describedby.

---
 .../src/query/edit/query-toolbar.js           | 132 ++++++++----------
 packages/block-library/src/query/editor.scss  |   4 +
 2 files changed, 64 insertions(+), 72 deletions(-)

diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js
index fe96c30036b30d..ff670d7c001a6b 100644
--- a/packages/block-library/src/query/edit/query-toolbar.js
+++ b/packages/block-library/src/query/edit/query-toolbar.js
@@ -5,10 +5,8 @@ import {
 	ToolbarGroup,
 	Dropdown,
 	ToolbarButton,
-	BaseControl,
 	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 
@@ -25,10 +23,6 @@ export default function QueryToolbar( {
 	clientId,
 } ) {
 	const hasPatterns = !! usePatterns( clientId, name ).length;
-	const maxPageInputId = useInstanceId(
-		QueryToolbar,
-		'blocks-query-pagination-max-page-input'
-	);
 
 	return (
 		<>
@@ -45,75 +39,69 @@ export default function QueryToolbar( {
 						) }
 						renderContent={ () => (
 							<>
-								<BaseControl>
-									<NumberControl
-										__unstableInputWidth="60px"
-										label={ __( 'Items per Page' ) }
-										labelPosition="edge"
-										min={ 1 }
-										max={ 100 }
-										onChange={ ( value ) => {
-											if (
-												isNaN( value ) ||
-												value < 1 ||
-												value > 100
-											) {
-												return;
-											}
-											setQuery( {
-												perPage: value,
-											} );
-										} }
-										step="1"
-										value={ query.perPage }
-										isDragEnabled={ false }
-									/>
-								</BaseControl>
-								<BaseControl>
-									<NumberControl
-										__unstableInputWidth="60px"
-										label={ __( 'Offset' ) }
-										labelPosition="edge"
-										min={ 0 }
-										max={ 100 }
-										onChange={ ( value ) => {
-											if (
-												isNaN( value ) ||
-												value < 0 ||
-												value > 100
-											) {
-												return;
-											}
-											setQuery( { offset: value } );
-										} }
-										step="1"
-										value={ query.offset }
-										isDragEnabled={ false }
-									/>
-								</BaseControl>
-								<BaseControl
-									id={ maxPageInputId }
+								<NumberControl
+									__unstableInputWidth="60px"
+									className="block-library-query-toolbar__popover-number-control"
+									label={ __( 'Items per Page' ) }
+									labelPosition="edge"
+									min={ 1 }
+									max={ 100 }
+									onChange={ ( value ) => {
+										if (
+											isNaN( value ) ||
+											value < 1 ||
+											value > 100
+										) {
+											return;
+										}
+										setQuery( {
+											perPage: value,
+										} );
+									} }
+									step="1"
+									value={ query.perPage }
+									isDragEnabled={ false }
+								/>
+								<NumberControl
+									__unstableInputWidth="60px"
+									className="block-library-query-toolbar__popover-number-control"
+									label={ __( 'Offset' ) }
+									labelPosition="edge"
+									min={ 0 }
+									max={ 100 }
+									onChange={ ( value ) => {
+										if (
+											isNaN( value ) ||
+											value < 0 ||
+											value > 100
+										) {
+											return;
+										}
+										setQuery( { offset: value } );
+									} }
+									step="1"
+									value={ query.offset }
+									isDragEnabled={ false }
+								/>
+								<NumberControl
+									__unstableInputWidth="60px"
+									className="block-library-query-toolbar__popover-number-control"
+									label={ __( 'Max pages to show' ) }
+									labelPosition="edge"
+									min={ 0 }
+									onChange={ ( value ) => {
+										if ( isNaN( value ) || value < 0 ) {
+											return;
+										}
+										setQuery( { pages: value } );
+									} }
+									step="1"
+									value={ query.pages }
+									isDragEnabled={ false }
 									help={ __(
 										'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
 									) }
-								>
-									<NumberControl
-										id={ maxPageInputId }
-										__unstableInputWidth="60px"
-										label={ __( 'Max pages to show' ) }
-										labelPosition="edge"
-										min={ 0 }
-										onChange={ ( value ) => {
-											if ( isNaN( value ) || value < 0 ) {
-												return;
-											}
-											setQuery( { pages: value } );
-										} }
-										step="1"
-										value={ query.pages }
-										isDragEnabled={ false }
-									/>
-								</BaseControl>
+								/>
 							</>
 						) }
 					/>
diff --git a/packages/block-library/src/query/editor.scss b/packages/block-library/src/query/editor.scss
index 9b9db430a81a65..67d98f88359ef6 100644
--- a/packages/block-library/src/query/editor.scss
+++ b/packages/block-library/src/query/editor.scss
@@ -1,5 +1,9 @@
 .block-library-query-toolbar__popover .components-popover__content {
 	min-width: 230px;
+
+	.block-library-query-toolbar__popover-number-control {
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .wp-block-query__create-new-link {