From bbf6795cbaa6c555ea98d1d4a714e84cc6a00cca Mon Sep 17 00:00:00 2001
From: ingeniumed <ingeniumed@users.noreply.github.com>
Date: Wed, 4 Jun 2025 15:29:44 +1000
Subject: [PATCH 1/3] Remove the deprecation warnings in the components used

---
 .../components/panels/DataPanel.tsx               | 11 ++++++++---
 .../components/panels/OverridesPanel.tsx          |  1 +
 .../placeholders/ItemSelectQueryType.tsx          | 15 ++++++++++++---
 .../components/PatternEditorSettingsPanel.tsx     |  2 ++
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/blocks/remote-data-container/components/panels/DataPanel.tsx b/src/blocks/remote-data-container/components/panels/DataPanel.tsx
index f812b1fe0..daec97201 100644
--- a/src/blocks/remote-data-container/components/panels/DataPanel.tsx
+++ b/src/blocks/remote-data-container/components/panels/DataPanel.tsx
@@ -1,7 +1,7 @@
 import {
 	__experimentalConfirmDialog as ConfirmDialog,
 	Button,
-	ButtonGroup,
+	__experimentalToggleGroupControl as ToggleGroupControl,
 	PanelBody,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
@@ -44,7 +44,12 @@ export function DataPanel( props: DataPanelProps ) {
 
 	return (
 		<PanelBody title={ __( 'Remote data management', 'remote-data-blocks' ) }>
-			<ButtonGroup>
+			<ToggleGroupControl
+				className="remote-data-blocks-button-group"
+				label={ __( '' ) }
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+			>
 				<Button
 					onClick={ onRefreshRemoteData }
 					style={ {
@@ -77,7 +82,7 @@ export function DataPanel( props: DataPanelProps ) {
 						) }
 					</ConfirmDialog>
 				) }
-			</ButtonGroup>
+			</ToggleGroupControl>
 		</PanelBody>
 	);
 }
diff --git a/src/blocks/remote-data-container/components/panels/OverridesPanel.tsx b/src/blocks/remote-data-container/components/panels/OverridesPanel.tsx
index d6b4dacad..99612b2ac 100644
--- a/src/blocks/remote-data-container/components/panels/OverridesPanel.tsx
+++ b/src/blocks/remote-data-container/components/panels/OverridesPanel.tsx
@@ -53,6 +53,7 @@ export function OverridesPanel( props: OverridesPanelProps ) {
 					key={ override.name }
 					label={ override.display_name || override.name }
 					onChange={ enabled => updateOverrides( override.name, enabled ) }
+					__nextHasNoMarginBottom
 				/>
 			) ) }
 		</PanelBody>
diff --git a/src/blocks/remote-data-container/components/placeholders/ItemSelectQueryType.tsx b/src/blocks/remote-data-container/components/placeholders/ItemSelectQueryType.tsx
index e2d4f158b..007dd3321 100644
--- a/src/blocks/remote-data-container/components/placeholders/ItemSelectQueryType.tsx
+++ b/src/blocks/remote-data-container/components/placeholders/ItemSelectQueryType.tsx
@@ -1,4 +1,8 @@
-import { Button, ButtonGroup } from '@wordpress/components';
+import {
+	Button,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 import { DataViewsModal } from '@/blocks/remote-data-container/components/modals/DataViewsModal';
 import { InputModal } from '@/blocks/remote-data-container/components/modals/InputModal';
@@ -16,7 +20,12 @@ export function ItemSelectQueryType( props: ItemSelectQueryTypeProps ) {
 	} = props;
 
 	return (
-		<ButtonGroup className="remote-data-blocks-button-group">
+		<ToggleGroupControl
+			className="remote-data-blocks-button-group"
+			label={ __( '' ) }
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		>
 			{ selectors.map( selector => {
 				const title = selector.name;
 				const selectorProps = {
@@ -60,6 +69,6 @@ export function ItemSelectQueryType( props: ItemSelectQueryTypeProps ) {
 
 				return null;
 			} ) }
-		</ButtonGroup>
+		</ToggleGroupControl>
 	);
 }
diff --git a/src/pattern-editor/components/PatternEditorSettingsPanel.tsx b/src/pattern-editor/components/PatternEditorSettingsPanel.tsx
index 41933472e..82f899e1a 100644
--- a/src/pattern-editor/components/PatternEditorSettingsPanel.tsx
+++ b/src/pattern-editor/components/PatternEditorSettingsPanel.tsx
@@ -48,6 +48,8 @@ export function PatternEditorSettingsPanel() {
 					options={ [ { label: __( 'Select a block' ), value: '' }, ...options ] }
 					onChange={ updateBlockTypes }
 					value={ blockType }
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 				/>
 			</>
 		</PluginDocumentSettingPanel>

From 4eaa1178cf7602f219513e620f1a6ff2acca5439 Mon Sep 17 00:00:00 2001
From: ingeniumed <ingeniumed@users.noreply.github.com>
Date: Wed, 4 Jun 2025 15:33:48 +1000
Subject: [PATCH 2/3] Fix another input popover that was missed

---
 .../remote-data-container/components/popovers/InputPopover.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/blocks/remote-data-container/components/popovers/InputPopover.tsx b/src/blocks/remote-data-container/components/popovers/InputPopover.tsx
index 2ae411c31..cb34f3657 100644
--- a/src/blocks/remote-data-container/components/popovers/InputPopover.tsx
+++ b/src/blocks/remote-data-container/components/popovers/InputPopover.tsx
@@ -89,6 +89,7 @@ export function InputPopover( props: InputPopoverProps ) {
 							onChange={ ( value: string | undefined ) => onChange( input.slug, value ?? '' ) }
 							help={ getDataSourceLabels( dataSourceType ).helpText }
 							suffix={ <Button icon={ keyboardReturn } label={ __( 'Save' ) } type="submit" /> }
+							__next40pxDefaultSize
 						/>
 					</form>
 				</Popover>

From fbe6fdceac6250e31ed2961a5066b68e530b7ebb Mon Sep 17 00:00:00 2001
From: Shekhar Wagh <shekhar.wagh@automattic.com>
Date: Wed, 4 Jun 2025 15:07:34 +0530
Subject: [PATCH 3/3] fix warnings for SelectControl

---
 .../remote-data-container/components/BlockBindingControls.tsx   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/blocks/remote-data-container/components/BlockBindingControls.tsx b/src/blocks/remote-data-container/components/BlockBindingControls.tsx
index 3360c15f5..26821781c 100644
--- a/src/blocks/remote-data-container/components/BlockBindingControls.tsx
+++ b/src/blocks/remote-data-container/components/BlockBindingControls.tsx
@@ -36,6 +36,8 @@ export function BlockBindingFieldControl( props: BlockBindingFieldControlProps )
 			options={ [ { label: 'Select a field', value: '' }, ...options ] }
 			onChange={ ( field: string ) => updateFieldBinding( target, field ) }
 			value={ value }
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
 		/>
 	);
 }