Make usage of the settings icon more consistent (WordPress#63020)

* Move Query block Display settings from block toolbar to inspector. * Replace dataviews View options icon with the cog icon. * Remove no longer necessary test. * Revert changes to the Query loop block. * Fix typo. * Add back test. * Remove unnecessary BaseControl and fix aria-describedby. Co-authored-by: afercia <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: priethor <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: mtias <[email protected]>
carstingaxion · Jul 4, 2024 · 9fbbc46 · 9fbbc46
1 parent 32f12ad
commit 9fbbc46
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 74 deletions.
diff --git 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 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>
+								/>
 							</>
 						) }
 					/>

diff --git 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 {

diff --git 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' ) }
 				/>
 			}