WordPress 6.8 Compatibility: Replace ButtonGroup usage.

projects/js-packages/components/changelog/replace-buttongroup-usage

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Split Button: Increase compatibility of components, preventing console warnings.

projects/js-packages/components/components/split-button/index.tsx

@@ -1,4 +1,4 @@
-import { ButtonGroup, Button, DropdownMenu } from '@wordpress/components';
+import { Button, Flex, DropdownMenu } from '@wordpress/components';
 import styles from './style.module.scss';
 import { SplitButtonProps } from './types.js';
 import type React from 'react';
@@ -22,17 +22,19 @@ const SplitButton: React.FC< SplitButtonProps > = ( {
 	...buttonProps
 } ) => {
 	return (
-		<ButtonGroup className={ styles[ 'split-button' ] }>
-			<Button variant={ variant } { ...buttonProps } className={ styles.button } />
-			<DropdownMenu
-				toggleProps={ { variant, className: styles.button, ...toggleProps } }
-				popoverProps={ { noArrow: false, ...popoverProps } }
-				icon={ <DownIcon /> }
-				disableOpenOnArrowDown={ true }
-				controls={ controls }
-				label={ label }
-			/>
-		</ButtonGroup>
+		<Flex className={ styles[ 'split-button' ] }>
+			<div role="group" className="components-button-group">
+				<Button variant={ variant } { ...buttonProps } className={ styles.button } />
+				<DropdownMenu
+					toggleProps={ { variant, className: styles.button, ...toggleProps } }
+					popoverProps={ { noArrow: false, ...popoverProps } }
+					icon={ <DownIcon /> }
+					disableOpenOnArrowDown={ true }
+					controls={ controls }
+					label={ label }
+				/>
+			</div>
+		</Flex>
 	);
 };
 

projects/js-packages/components/components/split-button/style.module.scss

@@ -4,6 +4,11 @@
     height: var(--actions-size);
     border-radius: var(--jp-border-radius);
 
+	:global(.components-button-group) {
+		display: flex;
+		height: 100%;
+	}
+
     & > .button:first-child {
         border-radius: var(--jp-border-radius) 0 0 var(--jp-border-radius);
     }

projects/plugins/jetpack/changelog/replace-buttongroup-usage

@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Map block: Increase compatibility of components, preventing console warnings.

projects/plugins/jetpack/extensions/blocks/map/controls.js

@@ -1,7 +1,5 @@
 import { BlockAlignmentToolbar, PanelColorSettings } from '@wordpress/block-editor';
 import {
-	Button,
-	ButtonGroup,
 	ExternalLink,
 	PanelBody,
 	TextControl,
@@ -15,6 +13,10 @@ import {
 	Path,
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
 	__experimentalNumberControl as NumberControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import Locations from './locations';
@@ -181,23 +183,24 @@ export default ( {
 						value={ apiKeyControl }
 						onChange={ onKeyChange }
 					/>
-					<ButtonGroup>
-						<Button
-							type="button"
-							onClick={ updateAPIKey }
-							disabled={ ! apiKeyControl || apiKeyControl === apiKey }
-						>
-							{ __( 'Update Token', 'jetpack' ) }
-						</Button>
-						<Button
-							type="button"
-							onClick={ removeAPIKey }
-							disabled={ 'wpcom' === apiKeySource }
-							variant="secondary"
-						>
-							{ __( 'Remove Token', 'jetpack' ) }
-						</Button>
-					</ButtonGroup>
+					<div className="jetpack-map-token-settings">
+						<ToggleGroupControl isBlock __next40pxDefaultSize __nextHasNoMarginBottom>
+							<ToggleGroupControlOption
+								className="components-button jetpack-update-token-button"
+								label={ __( 'Update Token', 'jetpack' ) }
+								value="update"
+								onClick={ updateAPIKey }
+								disabled={ ! apiKeyControl || apiKeyControl === apiKey }
+							/>
+							<ToggleGroupControlOption
+								className="components-button is-secondary"
+								label={ __( 'Remove Token', 'jetpack' ) }
+								value="remove"
+								onClick={ removeAPIKey }
+								disabled={ 'wpcom' === apiKeySource }
+							/>
+						</ToggleGroupControl>
+					</div>
 				</PanelBody>
 			) : null }
 		</>

projects/plugins/jetpack/extensions/blocks/map/edit.js

@@ -74,7 +74,7 @@ const MapEdit = ( {
 		const { getSettings } = select( blockEditorStore );
 		const settings = getSettings();
 		return {
-			isPreviewMode: settings.__unstableIsPreviewMode,
+			isPreviewMode: settings.isPreviewMode,
 		};
 	}, [] );
 

projects/plugins/jetpack/extensions/blocks/map/editor.scss

@@ -76,3 +76,26 @@
 		}
 	}
 }
+
+.jetpack-map-token-settings {
+	.jetpack-update-token-button {
+		box-shadow: inset 0 0 0 1px #1e1e1e;
+		border-radius: 3px 0 0 2px;
+	}
+
+	.components-button.is-secondary {
+		border-radius: 0 2px 2px 0;
+		margin-left: -1px;
+	}
+
+	.components-toggle-group-control {
+		border: none;
+		outline: none;
+		box-shadow: none;
+
+		&:focus, &:focus-within {
+			outline: none;
+			box-shadow: none;
+		}
+	}
+}