Commit c8a99b03ef1 for woocommerce
commit c8a99b03ef1cc4fb743b8febbd40eda2363274e9
Author: Daniel Mallory <daniel.mallory@automattic.com>
Date: Wed Jun 17 12:57:04 2026 +0100
Rename @woocommerce/settings-ui-sdk to @woocommerce/settings-ui (#65719)
* fix(settings-ui): use design-approved layout width and spacing
The settings UI container used a 656px max-width carried over from
early CIAB designs, with 24px between stacked fields and 32px between
section cards. The design team has since standardised admin layouts
on WPDS tokens: 720px single-column width (surface-width/xl), 16px
between stacked fields, and 24px between cards, so the SDK surface
did not match the agreed spec.
Update the three layout values in the settings embed stylesheet so
every page rendered through the settings UI SDK picks up the agreed
layout without per-consumer configuration.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* refactor: rename @woocommerce/settings-ui-sdk to @woocommerce/settings-ui
The "SDK" name came out of early planning with no recorded rationale
and has no lineage in WooCommerce: it was the only -sdk package in the
monorepo, and the surface is an extension API of core consumed the
same way as other wc-* packages (script handle + window global via
dependency extraction), not a standalone kit extensions bundle.
WooCommerce 10.9 would have made the npm name, the wc-settings-ui-sdk
script handle, and the window.wc.settingsUiSdk global external
contract, so this is the last cheap moment to rename.
Renames the workspace package and directory, the script handle
(wc-settings-ui), the window global (window.wc.settingsUi), the
dependency-extraction allowlist entry, and the developer docs
(settings-ui.md), and drops remaining "SDK" wording from docs and the
mount diagnostic. The PHP contract (SettingsUIPageInterface,
get_settings_ui_page()) was already SDK-free and is unchanged.
The dependency-extraction plugin shipped 5.0.0 with the old entry two
days ago; that entry was never consumable (package unpublished, no
WooCommerce release registers the handle), so replacing it breaks
nothing real.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
* fix(settings-ui): preserve number spin precision
---------
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
diff --git a/docs/extensions/settings-and-config/registering-settings-ui-components.md b/docs/extensions/settings-and-config/registering-settings-ui-components.md
index c3243995539..08ca5af75db 100644
--- a/docs/extensions/settings-and-config/registering-settings-ui-components.md
+++ b/docs/extensions/settings-and-config/registering-settings-ui-components.md
@@ -31,10 +31,10 @@ The `component` value is a name, not a script handle. It lets the PHP schema say
## Register JavaScript components
-Register components with `registerSettingsExtension()` from `@woocommerce/settings-ui-sdk`:
+Register components with `registerSettingsExtension()` from `@woocommerce/settings-ui`:
```ts
-import { registerSettingsExtension } from '@woocommerce/settings-ui-sdk';
+import { registerSettingsExtension } from '@woocommerce/settings-ui';
import { PaymentMethodPicker } from './payment-method-picker';
registerSettingsExtension( {
@@ -77,12 +77,12 @@ type SettingsFieldComponentProps = {
};
```
-Call `onChange()` with the next field value. The SDK handles hidden input serialization for the field's save adapter.
+Call `onChange()` with the next field value. The settings UI handles hidden input serialization for the field's save adapter.
## Example component
```tsx
-import type { SettingsFieldComponentProps } from '@woocommerce/settings-ui-sdk';
+import type { SettingsFieldComponentProps } from '@woocommerce/settings-ui';
export const PaymentMethodPicker = ( {
field,
@@ -159,7 +159,7 @@ Resolution order is:
1. `field.component`
2. `fieldOverrides[ field.id ]`
3. `typeRenderers[ field.type ]`
-4. Native SDK field renderer
+4. Native field renderer
## Enqueue the component script
@@ -176,4 +176,4 @@ final class My_Plugin_Settings_UI_Page extends LegacySettingsPageAdapter {
}
```
-WooCommerce loads the SDK first, then your script, then mounts the settings app.
+WooCommerce loads the settings UI package first, then your script, then mounts the settings app.
diff --git a/docs/extensions/settings-and-config/settings-ui-sdk.md b/docs/extensions/settings-and-config/settings-ui.md
similarity index 90%
rename from docs/extensions/settings-and-config/settings-ui-sdk.md
rename to docs/extensions/settings-and-config/settings-ui.md
index 633f22e2896..2368629def3 100644
--- a/docs/extensions/settings-and-config/settings-ui-sdk.md
+++ b/docs/extensions/settings-and-config/settings-ui.md
@@ -1,18 +1,18 @@
---
-post_title: Settings UI SDK
-sidebar_label: Settings UI SDK
+post_title: Settings UI
+sidebar_label: Settings UI
sidebar_position: 5
---
-# Settings UI SDK
+# Settings UI
-The settings UI SDK is an opt-in path for rendering WooCommerce settings pages with React while keeping the existing `WC_Settings_Page` registration and save flow.
+The settings UI is an opt-in path for rendering WooCommerce settings pages with React while keeping the existing `WC_Settings_Page` registration and save flow.
It is designed for extension authors who want to migrate incrementally. PHP still owns page registration, settings schema, permissions, script dependencies, and persistence. React owns field rendering and client-side interaction.
## Status
-- The SDK is behind the `settings-ui` feature flag.
+- The settings UI is behind the `settings-ui` feature flag.
- With the flag disabled, settings pages keep the legacy PHP renderer.
- With the flag enabled, a settings page still has to opt in explicitly.
- Saves use the existing WooCommerce settings form POST flow by default.
@@ -104,7 +104,7 @@ array(
Then register that component from JavaScript:
```ts
-import { registerSettingsExtension } from '@woocommerce/settings-ui-sdk';
+import { registerSettingsExtension } from '@woocommerce/settings-ui';
import { PaymentMethodPicker } from './payment-method-picker';
registerSettingsExtension( {
@@ -134,11 +134,11 @@ final class My_Plugin_Settings_UI_Page extends LegacySettingsPageAdapter {
}
```
-The settings embed script depends on the SDK and these handles only for the opted-in page. Other settings pages do not load the SDK.
+The settings embed script depends on the settings UI package and these handles only for the opted-in page. Other settings pages do not load it.
## Save adapters
-The SDK supports two save adapters:
+The settings UI supports two save adapters:
| Adapter | Behavior |
| ----------- | -------------------------------------------------------------------- |
@@ -187,7 +187,7 @@ Descriptions are sanitized with `wp_kses_post()`. Actions are structured data wi
## Reference migration in WooCommerce core
-The Products settings page is the Core reference migration. With `settings-ui` enabled, the Products tab renders through the settings UI SDK. With the flag disabled, it renders through the existing legacy settings UI.
+The Products settings page is the Core reference migration. With `settings-ui` enabled, the Products tab renders through the settings UI. With the flag disabled, it renders through the existing legacy settings UI.
Use this page to verify the native migration path before testing a plugin-specific page such as WooPayments.
@@ -203,10 +203,10 @@ Use this page to verify the native migration path before testing a plugin-specif
## Diagnostics
-In development, the SDK logs warnings for common integration issues:
+In development, the settings UI logs warnings for common integration issues:
- The settings payload is missing.
-- The SDK script is missing for a settings UI mount.
+- The `wc-settings-ui` script is missing for a settings UI mount.
- A field declares a component that is not registered.
- A field type is unsupported.
- A field declares an unknown save adapter.
diff --git a/packages/js/dependency-extraction-webpack-plugin/assets/packages.js b/packages/js/dependency-extraction-webpack-plugin/assets/packages.js
index c7f0aeaebbd..542ad3ab33a 100644
--- a/packages/js/dependency-extraction-webpack-plugin/assets/packages.js
+++ b/packages/js/dependency-extraction-webpack-plugin/assets/packages.js
@@ -13,7 +13,7 @@ module.exports = [
'@woocommerce/experimental',
'@woocommerce/explat',
'@woocommerce/extend-cart-checkout-block',
- '@woocommerce/settings-ui-sdk',
+ '@woocommerce/settings-ui',
'@woocommerce/navigation',
'@woocommerce/notices',
'@woocommerce/number',
diff --git a/packages/js/dependency-extraction-webpack-plugin/changelog/update-rename-settings-ui-entry b/packages/js/dependency-extraction-webpack-plugin/changelog/update-rename-settings-ui-entry
new file mode 100644
index 00000000000..28b15285f52
--- /dev/null
+++ b/packages/js/dependency-extraction-webpack-plugin/changelog/update-rename-settings-ui-entry
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Replace the @woocommerce/settings-ui-sdk dependency-extraction entry with @woocommerce/settings-ui, matching the renamed package. The previous entry was never consumable: the package is unpublished and no WooCommerce release registers its script handle.
diff --git a/packages/js/settings-ui-sdk/changelog/add-settings-ui-sdk b/packages/js/settings-ui-sdk/changelog/add-settings-ui-sdk
deleted file mode 100644
index db0c5e2ffaf..00000000000
--- a/packages/js/settings-ui-sdk/changelog/add-settings-ui-sdk
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add the settings UI SDK package.
diff --git a/packages/js/settings-ui-sdk/changelog/tweak-settings-ui-card-design b/packages/js/settings-ui-sdk/changelog/tweak-settings-ui-card-design
deleted file mode 100644
index ce3e1503b8f..00000000000
--- a/packages/js/settings-ui-sdk/changelog/tweak-settings-ui-card-design
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: tweak
-
-Align Settings UI SDK rendering with the settings card design.
diff --git a/packages/js/settings-ui-sdk/README.md b/packages/js/settings-ui/README.md
similarity index 87%
rename from packages/js/settings-ui-sdk/README.md
rename to packages/js/settings-ui/README.md
index b9ae76b38b8..75834de54a2 100644
--- a/packages/js/settings-ui-sdk/README.md
+++ b/packages/js/settings-ui/README.md
@@ -1,8 +1,8 @@
-# Settings UI SDK
+# Settings UI
React utilities for WooCommerce settings pages that opt in to the settings UI renderer.
-For the full integration guide, see [Settings UI SDK](../../../docs/extensions/settings-and-config/settings-ui-sdk.md).
+For the full integration guide, see [Settings UI](../../../docs/extensions/settings-and-config/settings-ui.md).
## Usage
@@ -11,7 +11,7 @@ PHP settings pages continue to register through `WC_Settings_Page`. A page opts
Custom JavaScript registers scoped components:
```ts
-import { registerSettingsExtension } from '@woocommerce/settings-ui-sdk';
+import { registerSettingsExtension } from '@woocommerce/settings-ui';
import { PaymentMethodPicker } from './payment-method-picker';
registerSettingsExtension( {
diff --git a/packages/js/settings-ui-sdk/build.mjs b/packages/js/settings-ui/build.mjs
similarity index 100%
rename from packages/js/settings-ui-sdk/build.mjs
rename to packages/js/settings-ui/build.mjs
diff --git a/packages/js/settings-ui/changelog/add-settings-ui b/packages/js/settings-ui/changelog/add-settings-ui
new file mode 100644
index 00000000000..0c3bdf6284f
--- /dev/null
+++ b/packages/js/settings-ui/changelog/add-settings-ui
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add the settings UI package.
diff --git a/packages/js/settings-ui/changelog/fix-number-spin-control-scientific-precision b/packages/js/settings-ui/changelog/fix-number-spin-control-scientific-precision
new file mode 100644
index 00000000000..661cf5f5c31
--- /dev/null
+++ b/packages/js/settings-ui/changelog/fix-number-spin-control-scientific-precision
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Clamp NumberSpinControl precision so scientific-notation steps cannot exceed toFixed limits.
diff --git a/packages/js/settings-ui/changelog/tweak-settings-ui-card-design b/packages/js/settings-ui/changelog/tweak-settings-ui-card-design
new file mode 100644
index 00000000000..06e0ce49c0c
--- /dev/null
+++ b/packages/js/settings-ui/changelog/tweak-settings-ui-card-design
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Align Settings UI rendering with the settings card design.
diff --git a/packages/js/settings-ui-sdk/changelog/update-number-spin-control b/packages/js/settings-ui/changelog/update-number-spin-control
similarity index 100%
rename from packages/js/settings-ui-sdk/changelog/update-number-spin-control
rename to packages/js/settings-ui/changelog/update-number-spin-control
diff --git a/packages/js/settings-ui/changelog/update-rename-settings-ui-package b/packages/js/settings-ui/changelog/update-rename-settings-ui-package
new file mode 100644
index 00000000000..cfa9626146c
--- /dev/null
+++ b/packages/js/settings-ui/changelog/update-rename-settings-ui-package
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Rename the package from @woocommerce/settings-ui-sdk to @woocommerce/settings-ui.
diff --git a/packages/js/settings-ui-sdk/jest.config.json b/packages/js/settings-ui/jest.config.json
similarity index 100%
rename from packages/js/settings-ui-sdk/jest.config.json
rename to packages/js/settings-ui/jest.config.json
diff --git a/packages/js/settings-ui-sdk/package.json b/packages/js/settings-ui/package.json
similarity index 97%
rename from packages/js/settings-ui-sdk/package.json
rename to packages/js/settings-ui/package.json
index 43853d8f308..21be19ca6fa 100644
--- a/packages/js/settings-ui-sdk/package.json
+++ b/packages/js/settings-ui/package.json
@@ -1,5 +1,5 @@
{
- "name": "@woocommerce/settings-ui-sdk",
+ "name": "@woocommerce/settings-ui",
"version": "0.1.0",
"description": "React utilities for rendering extensible WooCommerce settings pages.",
"author": "Automattic",
@@ -9,7 +9,7 @@
"woocommerce",
"settings"
],
- "homepage": "https://github.com/woocommerce/woocommerce/tree/trunk/packages/js/settings-ui-sdk/README.md",
+ "homepage": "https://github.com/woocommerce/woocommerce/tree/trunk/packages/js/settings-ui/README.md",
"repository": {
"type": "git",
"url": "https://github.com/woocommerce/woocommerce.git"
diff --git a/packages/js/settings-ui-sdk/src/diagnostics.ts b/packages/js/settings-ui/src/diagnostics.ts
similarity index 100%
rename from packages/js/settings-ui-sdk/src/diagnostics.ts
rename to packages/js/settings-ui/src/diagnostics.ts
diff --git a/packages/js/settings-ui-sdk/src/hidden-inputs.tsx b/packages/js/settings-ui/src/hidden-inputs.tsx
similarity index 100%
rename from packages/js/settings-ui-sdk/src/hidden-inputs.tsx
rename to packages/js/settings-ui/src/hidden-inputs.tsx
diff --git a/packages/js/settings-ui-sdk/src/html.ts b/packages/js/settings-ui/src/html.ts
similarity index 100%
rename from packages/js/settings-ui-sdk/src/html.ts
rename to packages/js/settings-ui/src/html.ts
diff --git a/packages/js/settings-ui-sdk/src/index.ts b/packages/js/settings-ui/src/index.ts
similarity index 100%
rename from packages/js/settings-ui-sdk/src/index.ts
rename to packages/js/settings-ui/src/index.ts
diff --git a/packages/js/settings-ui-sdk/src/native-fields.tsx b/packages/js/settings-ui/src/native-fields.tsx
similarity index 100%
rename from packages/js/settings-ui-sdk/src/native-fields.tsx
rename to packages/js/settings-ui/src/native-fields.tsx
diff --git a/packages/js/settings-ui-sdk/src/number-spin-control.tsx b/packages/js/settings-ui/src/number-spin-control.tsx
similarity index 84%
rename from packages/js/settings-ui-sdk/src/number-spin-control.tsx
rename to packages/js/settings-ui/src/number-spin-control.tsx
index db6b7a864f0..b93dfb34138 100644
--- a/packages/js/settings-ui-sdk/src/number-spin-control.tsx
+++ b/packages/js/settings-ui/src/number-spin-control.tsx
@@ -60,11 +60,24 @@ const toFiniteNumber = ( raw: unknown ): number | undefined => {
return undefined;
};
-const stepDecimals = ( step: number ) => {
- const fraction = String( step ).split( '.' )[ 1 ];
+const decimalPlaces = ( value: number ) => {
+ const normalized = String( value ).toLowerCase();
+
+ if ( normalized.includes( 'e-' ) ) {
+ const [ coefficient, exponent ] = normalized.split( 'e-' );
+ const coefficientDecimals = coefficient.split( '.' )[ 1 ]?.length ?? 0;
+ return Number( exponent ) + coefficientDecimals;
+ }
+
+ const fraction = normalized.split( '.' )[ 1 ];
return fraction ? fraction.length : 0;
};
+const stepDecimals = ( ...values: number[] ) =>
+ Math.max( ...values.map( decimalPlaces ) );
+
+const MAX_TO_FIXED_PRECISION = 100;
+
/**
* A number input with explicit +/- spin buttons, per the settings designs.
*
@@ -102,9 +115,20 @@ export const NumberSpinControl = ( {
next = Math.min( max, next );
}
- const nextValue = String(
- Number( next.toFixed( stepDecimals( step ) ) )
+ const requiredPrecision = stepDecimals(
+ step,
+ current ?? 0,
+ min ?? 0,
+ max ?? 0
+ );
+ const precision = Math.min(
+ Math.max( requiredPrecision, 0 ),
+ MAX_TO_FIXED_PRECISION
);
+ const nextValue =
+ requiredPrecision > MAX_TO_FIXED_PRECISION
+ ? String( next )
+ : String( Number( next.toFixed( precision ) ) );
onChange( nextValue );
// Focus stays on the spin button while the input updates, so the
diff --git a/packages/js/settings-ui-sdk/src/registry.ts b/packages/js/settings-ui/src/registry.ts
similarity index 100%
rename from packages/js/settings-ui-sdk/src/registry.ts
rename to packages/js/settings-ui/src/registry.ts
diff --git a/packages/js/settings-ui-sdk/src/settings-ui-page.tsx b/packages/js/settings-ui/src/settings-ui-page.tsx
similarity index 100%
rename from packages/js/settings-ui-sdk/src/settings-ui-page.tsx
rename to packages/js/settings-ui/src/settings-ui-page.tsx
diff --git a/packages/js/settings-ui-sdk/src/test/hidden-inputs.test.ts b/packages/js/settings-ui/src/test/hidden-inputs.test.ts
similarity index 100%
rename from packages/js/settings-ui-sdk/src/test/hidden-inputs.test.ts
rename to packages/js/settings-ui/src/test/hidden-inputs.test.ts
diff --git a/packages/js/settings-ui-sdk/src/test/html-rendering.test.tsx b/packages/js/settings-ui/src/test/html-rendering.test.tsx
similarity index 100%
rename from packages/js/settings-ui-sdk/src/test/html-rendering.test.tsx
rename to packages/js/settings-ui/src/test/html-rendering.test.tsx
diff --git a/packages/js/settings-ui-sdk/src/test/html.test.ts b/packages/js/settings-ui/src/test/html.test.ts
similarity index 100%
rename from packages/js/settings-ui-sdk/src/test/html.test.ts
rename to packages/js/settings-ui/src/test/html.test.ts
diff --git a/packages/js/settings-ui-sdk/src/test/native-fields.test.tsx b/packages/js/settings-ui/src/test/native-fields.test.tsx
similarity index 81%
rename from packages/js/settings-ui-sdk/src/test/native-fields.test.tsx
rename to packages/js/settings-ui/src/test/native-fields.test.tsx
index cba7507641d..78470af2542 100644
--- a/packages/js/settings-ui-sdk/src/test/native-fields.test.tsx
+++ b/packages/js/settings-ui/src/test/native-fields.test.tsx
@@ -228,6 +228,73 @@ describe( 'NativeSettingsField', () => {
expect( onChange ).toHaveBeenCalledWith( '0.3' );
} );
+ it( 'preserves current value precision when it exceeds step precision', () => {
+ const onChange = jest.fn();
+ const container = render(
+ <NativeSettingsField
+ { ...makeProps(
+ {
+ ...numberField,
+ customAttributes: { min: 0, step: 0.1 },
+ },
+ '0.05',
+ onChange
+ ) }
+ />
+ );
+
+ clickButton(
+ getSpinButton( container, 'Increment Low stock threshold' )
+ );
+
+ expect( onChange ).toHaveBeenCalledWith( '0.15' );
+ } );
+
+ it( 'handles scientific-notation steps', () => {
+ const onChange = jest.fn();
+ const container = render(
+ <NativeSettingsField
+ { ...makeProps(
+ {
+ ...numberField,
+ customAttributes: { min: 0, step: 1e-7 },
+ },
+ '0',
+ onChange
+ ) }
+ />
+ );
+
+ clickButton(
+ getSpinButton( container, 'Increment Low stock threshold' )
+ );
+
+ expect( onChange ).toHaveBeenCalledWith( '1e-7' );
+ } );
+
+ it( 'does not exceed toFixed precision limits for tiny scientific-notation steps', () => {
+ const onChange = jest.fn();
+ const container = render(
+ <NativeSettingsField
+ { ...makeProps(
+ {
+ ...numberField,
+ customAttributes: { min: 0, step: 1e-200 },
+ },
+ '0',
+ onChange
+ ) }
+ />
+ );
+
+ expect( () =>
+ clickButton(
+ getSpinButton( container, 'Increment Low stock threshold' )
+ )
+ ).not.toThrow();
+ expect( onChange ).toHaveBeenCalledWith( '1e-200' );
+ } );
+
it( 'steps onto the minimum from an empty value', () => {
const onChange = jest.fn();
const container = render(
diff --git a/packages/js/settings-ui-sdk/src/test/registry.test.ts b/packages/js/settings-ui/src/test/registry.test.ts
similarity index 100%
rename from packages/js/settings-ui-sdk/src/test/registry.test.ts
rename to packages/js/settings-ui/src/test/registry.test.ts
diff --git a/packages/js/settings-ui-sdk/src/types.ts b/packages/js/settings-ui/src/types.ts
similarity index 100%
rename from packages/js/settings-ui-sdk/src/types.ts
rename to packages/js/settings-ui/src/types.ts
diff --git a/packages/js/settings-ui-sdk/tsconfig.json b/packages/js/settings-ui/tsconfig.json
similarity index 100%
rename from packages/js/settings-ui-sdk/tsconfig.json
rename to packages/js/settings-ui/tsconfig.json
diff --git a/plugins/woocommerce/changelog/update-rename-settings-ui-script-handle b/plugins/woocommerce/changelog/update-rename-settings-ui-script-handle
new file mode 100644
index 00000000000..048c19506dc
--- /dev/null
+++ b/plugins/woocommerce/changelog/update-rename-settings-ui-script-handle
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Rename the settings UI script handle from wc-settings-ui-sdk to wc-settings-ui (never shipped in a release).
diff --git a/plugins/woocommerce/changelog/update-settings-ui-layout-width-spacing b/plugins/woocommerce/changelog/update-settings-ui-layout-width-spacing
new file mode 100644
index 00000000000..ce4f8f790dd
--- /dev/null
+++ b/plugins/woocommerce/changelog/update-settings-ui-layout-width-spacing
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Update settings UI layout to the agreed design values: 720px container width, 16px spacing between stacked fields, and 24px between cards.
diff --git a/plugins/woocommerce/client/admin/client/settings/settings-ui-registry.tsx b/plugins/woocommerce/client/admin/client/settings/settings-ui-registry.tsx
index 7d5cbb238c6..089725a7597 100644
--- a/plugins/woocommerce/client/admin/client/settings/settings-ui-registry.tsx
+++ b/plugins/woocommerce/client/admin/client/settings/settings-ui-registry.tsx
@@ -3,7 +3,7 @@
*/
import { createElement, createRoot } from '@wordpress/element';
import type { ComponentType, ReactNode } from 'react';
-import type { SettingsUISchema } from '@woocommerce/settings-ui-sdk';
+import type { SettingsUISchema } from '@woocommerce/settings-ui';
/**
* Internal dependencies
@@ -13,7 +13,7 @@ import { getAdminSetting } from '~/utils/admin-settings';
declare global {
interface Window {
wc?: {
- settingsUiSdk?: {
+ settingsUi?: {
SettingsUIErrorBoundary: ComponentType< {
children: ReactNode;
} >;
@@ -38,15 +38,17 @@ const getSchema = (
export const registerSettingsUIScreens = () => {
const SettingsUIErrorBoundary =
- window.wc?.settingsUiSdk?.SettingsUIErrorBoundary;
- const SettingsUIPage = window.wc?.settingsUiSdk?.SettingsUIPage;
+ window.wc?.settingsUi?.SettingsUIErrorBoundary;
+ const SettingsUIPage = window.wc?.settingsUi?.SettingsUIPage;
if ( ! SettingsUIErrorBoundary || ! SettingsUIPage ) {
if (
document.querySelector< HTMLElement >( '[data-wc-settings-ui="1"]' )
) {
// eslint-disable-next-line no-console
- console.warn( '[WooCommerce settings UI] SDK script is missing.' );
+ console.warn(
+ '[WooCommerce settings UI] The wc-settings-ui script is missing.'
+ );
}
return;
}
diff --git a/plugins/woocommerce/client/admin/package.json b/plugins/woocommerce/client/admin/package.json
index 9c95f06da61..42b6170d949 100644
--- a/plugins/woocommerce/client/admin/package.json
+++ b/plugins/woocommerce/client/admin/package.json
@@ -65,7 +65,7 @@
"@woocommerce/email-editor": "workspace:*",
"@woocommerce/experimental": "workspace:*",
"@woocommerce/explat": "workspace:*",
- "@woocommerce/settings-ui-sdk": "workspace:*",
+ "@woocommerce/settings-ui": "workspace:*",
"@woocommerce/navigation": "workspace:*",
"@woocommerce/number": "workspace:*",
"@woocommerce/onboarding": "workspace:*",
diff --git a/plugins/woocommerce/client/admin/tsconfig.json b/plugins/woocommerce/client/admin/tsconfig.json
index 1ee9747a3d3..192165783a1 100644
--- a/plugins/woocommerce/client/admin/tsconfig.json
+++ b/plugins/woocommerce/client/admin/tsconfig.json
@@ -75,7 +75,7 @@
"path": "../../../../packages/js/sanitize"
},
{
- "path": "../../../../packages/js/settings-ui-sdk"
+ "path": "../../../../packages/js/settings-ui"
},
{
"path": "../../../../packages/js/tracks"
diff --git a/plugins/woocommerce/client/admin/webpack.config.js b/plugins/woocommerce/client/admin/webpack.config.js
index 866d00a9c26..cae895344a9 100644
--- a/plugins/woocommerce/client/admin/webpack.config.js
+++ b/plugins/woocommerce/client/admin/webpack.config.js
@@ -62,7 +62,7 @@ const wcAdminPackages = [
'tracks',
'onboarding',
'sanitize',
- 'settings-ui-sdk',
+ 'settings-ui',
'remote-logging',
'email-editor',
];
diff --git a/plugins/woocommerce/includes/admin/settings/class-wc-settings-page.php b/plugins/woocommerce/includes/admin/settings/class-wc-settings-page.php
index cc847268411..ec0aac1627c 100644
--- a/plugins/woocommerce/includes/admin/settings/class-wc-settings-page.php
+++ b/plugins/woocommerce/includes/admin/settings/class-wc-settings-page.php
@@ -123,7 +123,7 @@ if ( ! class_exists( 'WC_Settings_Page', false ) ) :
}
/**
- * Add a body class for settings pages rendered through the settings UI SDK.
+ * Add a body class for settings pages rendered through the settings UI.
*
* @since 10.9.0
*
diff --git a/plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php b/plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php
index fc386180067..8b72ea70d92 100644
--- a/plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php
+++ b/plugins/woocommerce/src/Internal/Admin/WCAdminAssets.php
@@ -314,7 +314,7 @@ class WCAdminAssets {
'wc-currency',
'wc-navigation',
'wc-experimental-products-app',
- 'wc-settings-ui-sdk',
+ 'wc-settings-ui',
'wc-remote-logging',
'wc-sanitize',
);
@@ -333,7 +333,7 @@ class WCAdminAssets {
'wc-experimental-products-app',
'wc-experimental',
'wc-navigation',
- 'wc-settings-ui-sdk',
+ 'wc-settings-ui',
WC_ADMIN_APP,
);
@@ -456,7 +456,7 @@ class WCAdminAssets {
* @var mixed[] $extension_handles
*/
$dependencies = array_merge(
- array( 'wc-settings-ui-sdk' ),
+ array( 'wc-settings-ui' ),
array_filter(
$extension_handles,
static function ( $script_handle ): bool {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c6c841f2f81..7c2359c7c0e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2367,7 +2367,7 @@ importers:
specifier: 5.7.x
version: 5.7.3
- packages/js/settings-ui-sdk:
+ packages/js/settings-ui:
dependencies:
'@woocommerce/sanitize':
specifier: workspace:*
@@ -2863,9 +2863,9 @@ importers:
'@woocommerce/sanitize':
specifier: workspace:*
version: link:../../../../packages/js/sanitize
- '@woocommerce/settings-ui-sdk':
+ '@woocommerce/settings-ui':
specifier: workspace:*
- version: link:../../../../packages/js/settings-ui-sdk
+ version: link:../../../../packages/js/settings-ui
'@woocommerce/tracks':
specifier: workspace:*
version: link:../../../../packages/js/tracks
@@ -3052,7 +3052,7 @@ importers:
version: 7.25.7
'@pmmmwh/react-refresh-webpack-plugin':
specifier: ^0.5.11
- version: 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2)(webpack-hot-middleware@2.26.1)(webpack@5.97.1)
+ version: 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2(webpack@5.97.1(@swc/core@1.15.24)))(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.15.24))
'@statelyai/inspect':
specifier: ^0.3.1
version: 0.3.1(ws@8.20.0)(xstate@4.37.1)
@@ -27487,7 +27487,7 @@ snapshots:
webpack-dev-server: 4.15.2(webpack-cli@5.1.4)(webpack@5.97.1)
webpack-hot-middleware: 2.26.1
- '@pmmmwh/react-refresh-webpack-plugin@0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2)(webpack-hot-middleware@2.26.1)(webpack@5.97.1)':
+ '@pmmmwh/react-refresh-webpack-plugin@0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2(webpack@5.97.1(@swc/core@1.15.24)))(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.15.24))':
dependencies:
ansi-html: 0.0.9
core-js-pure: 3.49.0
@@ -29901,7 +29901,7 @@ snapshots:
dependencies:
'@babel/preset-flow': 7.27.1(@babel/core@7.25.7)
'@babel/preset-react': 7.25.7(@babel/core@7.25.7)
- '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2)(webpack-hot-middleware@2.26.1)(webpack@5.97.1)
+ '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2(webpack@5.97.1(@swc/core@1.15.24)))(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.15.24))
'@storybook/core-webpack': 7.6.19(encoding@0.1.13)
'@storybook/docs-tools': 7.6.19(encoding@0.1.13)
'@storybook/node-logger': 7.6.19
@@ -29939,7 +29939,7 @@ snapshots:
dependencies:
'@babel/preset-flow': 7.27.1(@babel/core@7.25.7)
'@babel/preset-react': 7.25.7(@babel/core@7.25.7)
- '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2)(webpack-hot-middleware@2.26.1)(webpack@5.97.1)
+ '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2(webpack@5.97.1(@swc/core@1.15.24)))(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.15.24))
'@storybook/core-webpack': 7.6.19(encoding@0.1.13)
'@storybook/docs-tools': 7.6.19(encoding@0.1.13)
'@storybook/node-logger': 7.6.19
@@ -36469,7 +36469,7 @@ snapshots:
dependencies:
'@babel/core': 7.25.7
'@playwright/test': 1.59.1
- '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2)(webpack-hot-middleware@2.26.1)(webpack@5.97.1)
+ '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2(webpack@5.97.1(@swc/core@1.15.24)))(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.15.24))
'@svgr/webpack': 8.1.0(typescript@5.7.3)
'@wordpress/babel-preset-default': 7.42.0
'@wordpress/browserslist-config': 5.41.0
@@ -36565,7 +36565,7 @@ snapshots:
dependencies:
'@babel/core': 7.25.7
'@playwright/test': 1.59.1
- '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2)(webpack-hot-middleware@2.26.1)(webpack@5.97.1)
+ '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2(webpack@5.97.1(@swc/core@1.15.24)))(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.15.24))
'@svgr/webpack': 8.1.0(typescript@5.7.3)
'@wordpress/babel-preset-default': 8.44.0
'@wordpress/browserslist-config': 6.44.0
@@ -36662,7 +36662,7 @@ snapshots:
dependencies:
'@babel/core': 7.25.7
'@playwright/test': 1.59.1
- '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2)(webpack-hot-middleware@2.26.1)(webpack@5.97.1)
+ '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2(webpack@5.97.1(@swc/core@1.15.24)))(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.15.24))
'@svgr/webpack': 8.1.0(typescript@5.7.3)
'@wordpress/babel-preset-default': 8.44.0
'@wordpress/browserslist-config': 6.44.0
@@ -36758,7 +36758,7 @@ snapshots:
dependencies:
'@babel/core': 7.25.7
'@playwright/test': 1.59.1
- '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2)(webpack-hot-middleware@2.26.1)(webpack@5.97.1)
+ '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@4.41.40)(react-refresh@0.14.2)(type-fest@4.41.0)(webpack-dev-server@4.15.2(webpack@5.97.1(@swc/core@1.15.24)))(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.15.24))
'@svgr/webpack': 8.1.0(typescript@5.7.3)
'@wordpress/babel-preset-default': 8.44.0
'@wordpress/browserslist-config': 6.44.0
@@ -47058,7 +47058,7 @@ snapshots:
dependencies:
hosted-git-info: 6.1.3
proc-log: 3.0.0
- semver: 7.5.4
+ semver: 7.7.4
validate-npm-package-name: 5.0.1
npm-package-arg@8.1.5: