From 838c02823a70d27e9fd404b93beb0d9caddb460a Mon Sep 17 00:00:00 2001
From: Karen Attfield <karenlattfield@gmail.com>
Date: Thu, 20 Mar 2025 19:34:42 +0000
Subject: [PATCH 1/4] Replace ButtonGroup usage in Map block
---
.../jetpack/extensions/blocks/map/controls.js | 41 ++++++++++---------
.../jetpack/extensions/blocks/map/editor.scss | 23 +++++++++++
2 files changed, 45 insertions(+), 19 deletions(-)
diff --git a/projects/plugins/jetpack/extensions/blocks/map/controls.js b/projects/plugins/jetpack/extensions/blocks/map/controls.js
index f9c5181ce73f8..75be944130652 100644
--- a/projects/plugins/jetpack/extensions/blocks/map/controls.js
+++ b/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 }
</>
diff --git a/projects/plugins/jetpack/extensions/blocks/map/editor.scss b/projects/plugins/jetpack/extensions/blocks/map/editor.scss
index 983bd42a7824b..f9d2de2c2d59c 100644
--- a/projects/plugins/jetpack/extensions/blocks/map/editor.scss
+++ b/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;
+ }
+ }
+}
From 75663e1c881cb22211ac7036b0dc7a3ffd826abc Mon Sep 17 00:00:00 2001
From: Karen Attfield <karenlattfield@gmail.com>
Date: Thu, 20 Mar 2025 19:40:21 +0000
Subject: [PATCH 2/4] Replace ButtonGroup usage in Split Button component
---
.../components/split-button/index.tsx | 26 ++++++++++---------
.../components/split-button/style.module.scss | 5 ++++
2 files changed, 19 insertions(+), 12 deletions(-)
diff --git a/projects/js-packages/components/components/split-button/index.tsx b/projects/js-packages/components/components/split-button/index.tsx
index 4c541f60fe256..6367507685d7d 100644
--- a/projects/js-packages/components/components/split-button/index.tsx
+++ b/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>
);
};
diff --git a/projects/js-packages/components/components/split-button/style.module.scss b/projects/js-packages/components/components/split-button/style.module.scss
index 42391846779a0..b715c70f6b3b3 100644
--- a/projects/js-packages/components/components/split-button/style.module.scss
+++ b/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);
}
From 5239fcd15db1c689d8dc3fc7bae27727f0af73a9 Mon Sep 17 00:00:00 2001
From: Karen Attfield <karenlattfield@gmail.com>
Date: Thu, 20 Mar 2025 19:42:42 +0000
Subject: [PATCH 3/4] Preventing an additional console error in Map block - use
isPreviewMode instead of __unstableIsPreviewMode
---
projects/plugins/jetpack/extensions/blocks/map/edit.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/projects/plugins/jetpack/extensions/blocks/map/edit.js b/projects/plugins/jetpack/extensions/blocks/map/edit.js
index 496aaff57ae74..bcc8279239acb 100644
--- a/projects/plugins/jetpack/extensions/blocks/map/edit.js
+++ b/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,
};
}, [] );
From c77c755896e1c9f2a1d2a7430d5869e7f69ff621 Mon Sep 17 00:00:00 2001
From: Karen Attfield <karenlattfield@gmail.com>
Date: Thu, 20 Mar 2025 19:56:35 +0000
Subject: [PATCH 4/4] Add changelogs
---
.../components/changelog/replace-buttongroup-usage | 4 ++++
projects/plugins/jetpack/changelog/replace-buttongroup-usage | 4 ++++
2 files changed, 8 insertions(+)
create mode 100644 projects/js-packages/components/changelog/replace-buttongroup-usage
create mode 100644 projects/plugins/jetpack/changelog/replace-buttongroup-usage
diff --git a/projects/js-packages/components/changelog/replace-buttongroup-usage b/projects/js-packages/components/changelog/replace-buttongroup-usage
new file mode 100644
index 0000000000000..979f0f3023df9
--- /dev/null
+++ b/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.
diff --git a/projects/plugins/jetpack/changelog/replace-buttongroup-usage b/projects/plugins/jetpack/changelog/replace-buttongroup-usage
new file mode 100644
index 0000000000000..accebb13e00d9
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/replace-buttongroup-usage
@@ -0,0 +1,4 @@
+Significance: patch
+Type: bugfix
+
+Map block: Increase compatibility of components, preventing console warnings.