From 294b98e600c20d78d8a80f5fb59b7b5ee0a56167 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9ctor?= <27339341+priethor@users.noreply.github.com>
Date: Mon, 15 Jul 2024 13:22:03 +0200
Subject: [PATCH] Query Loop block: Convert the post content type setting to a
 ToggleGroupControl if there are few items (#63375)

Co-authored-by: priethor <priethor@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
---
 .../edit/inspector-controls/author-control.js |  1 +
 .../query/edit/inspector-controls/index.js    | 51 ++++++++++++++-----
 .../edit/inspector-controls/order-control.js  |  1 +
 .../edit/inspector-controls/sticky-control.js |  1 +
 .../inspector-controls/taxonomy-controls.js   |  1 +
 5 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/packages/block-library/src/query/edit/inspector-controls/author-control.js b/packages/block-library/src/query/edit/inspector-controls/author-control.js
index 5b154346f0a76..1d33ae96f13e8 100644
--- a/packages/block-library/src/query/edit/inspector-controls/author-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/author-control.js
@@ -76,6 +76,7 @@ function AuthorControl( { value, onChange } ) {
 			suggestions={ authorsInfo.names }
 			onChange={ onAuthorChange }
 			__experimentalShowHowTo={ false }
+			__next40pxDefaultSize
 		/>
 	);
 }
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 e71b2d09af4b8..4c3500f4bd23f 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -7,6 +7,8 @@ import {
 	SelectControl,
 	RangeControl,
 	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Notice,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
@@ -101,6 +103,10 @@ export default function QueryInspectorControls( props ) {
 	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
 		! inherit && isControlAllowed( allowedControls, 'postType' );
+	const postTypeControlLabel = __( 'Content type' );
+	const postTypeControlHelp = __(
+		'WordPress contains different types of content you can filter by. Posts and pages are the default types, but plugins could add more.'
+	);
 	const showColumnsControl = false;
 	const showOrderControl =
 		! inherit && isControlAllowed( allowedControls, 'order' );
@@ -152,22 +158,42 @@ export default function QueryInspectorControls( props ) {
 							}
 						/>
 					) }
-					{ showPostTypeControl && (
-						<SelectControl
-							__nextHasNoMarginBottom
-							options={ postTypesSelectOptions }
-							value={ postType }
-							label={ __( 'Post type' ) }
-							onChange={ onPostTypeChange }
-							help={ __(
-								'WordPress contains different types of content and they are divided into collections called “Post types”. By default there are a few different ones such as blog posts and pages, but plugins could add more.'
-							) }
-						/>
-					) }
+					{ showPostTypeControl &&
+						( postTypesSelectOptions.length > 2 ? (
+							<SelectControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								options={ postTypesSelectOptions }
+								value={ postType }
+								label={ postTypeControlLabel }
+								onChange={ onPostTypeChange }
+								help={ postTypeControlHelp }
+							/>
+						) : (
+							<ToggleGroupControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								isBlock
+								value={ postType }
+								label={ postTypeControlLabel }
+								onChange={ onPostTypeChange }
+								help={ postTypeControlHelp }
+							>
+								{ postTypesSelectOptions.map( ( option ) => (
+									<ToggleGroupControlOption
+										key={ option.value }
+										value={ option.value }
+										label={ option.label }
+									/>
+								) ) }
+							</ToggleGroupControl>
+						) ) }
+
 					{ showColumnsControl && (
 						<>
 							<RangeControl
 								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Columns' ) }
 								value={ displayLayout.columns }
 								onChange={ ( value ) =>
@@ -262,6 +288,7 @@ export default function QueryInspectorControls( props ) {
 						>
 							<TextControl
 								__nextHasNoMarginBottom
+								__next40pxDefaultSize
 								label={ __( 'Keyword' ) }
 								value={ querySearch }
 								onChange={ setQuerySearch }
diff --git a/packages/block-library/src/query/edit/inspector-controls/order-control.js b/packages/block-library/src/query/edit/inspector-controls/order-control.js
index 71ddd29098972..2f6fa0e589d47 100644
--- a/packages/block-library/src/query/edit/inspector-controls/order-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/order-control.js
@@ -28,6 +28,7 @@ function OrderControl( { order, orderBy, onChange } ) {
 	return (
 		<SelectControl
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
 			options={ orderOptions }
diff --git a/packages/block-library/src/query/edit/inspector-controls/sticky-control.js b/packages/block-library/src/query/edit/inspector-controls/sticky-control.js
index d3f29a6638593..98bec75ad933b 100644
--- a/packages/block-library/src/query/edit/inspector-controls/sticky-control.js
+++ b/packages/block-library/src/query/edit/inspector-controls/sticky-control.js
@@ -14,6 +14,7 @@ export default function StickyControl( { value, onChange } ) {
 	return (
 		<SelectControl
 			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Sticky posts' ) }
 			options={ stickyOptions }
 			value={ value }
diff --git a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
index 41f4376d08e47..49b1ca9ec5bef 100644
--- a/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
+++ b/packages/block-library/src/query/edit/inspector-controls/taxonomy-controls.js
@@ -187,6 +187,7 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 				displayTransform={ decodeEntities }
 				onChange={ onTermsChange }
 				__experimentalShowHowTo={ false }
+				__next40pxDefaultSize
 			/>
 		</div>
 	);