Fix deprecation warnings in the editor

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
 		/>
 	);
 }

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>
 	);
 }

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>

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>
 	);
 }

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>

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>