Theme: Restore public ThemeProvider export

packages/boot/src/components/root/index.tsx

@@ -20,7 +20,7 @@ import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Page, getAdminThemeColors } from '@wordpress/admin-ui';
 import { Tooltip } from '@wordpress/ui';
-import { privateApis as themePrivateApis } from '@wordpress/theme';
+import { ThemeProvider } from '@wordpress/theme';
 
 /**
  * Internal dependencies
@@ -34,7 +34,6 @@ import type { CanvasData } from '../../store/types';
 import './style.scss';
 
 const { useLocation, useMatches, Outlet } = unlock( routePrivateApis );
-const { ThemeProvider } = unlock( themePrivateApis );
 
 export default function Root() {
 	const matches = useMatches();

packages/boot/src/components/root/single-page.tsx

@@ -11,7 +11,7 @@ import { SnackbarNotices } from '@wordpress/notices';
 import { SlotFillProvider } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { getAdminThemeColors } from '@wordpress/admin-ui';
-import { privateApis as themePrivateApis } from '@wordpress/theme';
+import { ThemeProvider } from '@wordpress/theme';
 
 /**
  * Internal dependencies
@@ -24,7 +24,6 @@ import './style.scss';
 import useRouteTitle from '../app/use-route-title';
 
 const { useMatches, Outlet } = unlock( routePrivateApis );
-const { ThemeProvider } = unlock( themePrivateApis );
 
 /**
  * Root component for single page mode (no sidebar).

packages/edit-site/src/components/layout/index.js

@@ -28,7 +28,7 @@ import {
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as themePrivateApis } from '@wordpress/theme';
+import { ThemeProvider } from '@wordpress/theme';
 import { PluginArea } from '@wordpress/plugins';
 import { SnackbarNotices, store as noticesStore } from '@wordpress/notices';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -50,7 +50,6 @@ import SavePanel from '../save-panel';
 
 const { useLocation } = unlock( routerPrivateApis );
 const { useStyle, UploadProgressSnackbar } = unlock( editorPrivateApis );
-const { ThemeProvider } = unlock( themePrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 const CONTENT_COLOR = { background: '#ffffff' };

packages/theme/CHANGELOG.md

@@ -2,14 +2,14 @@
 
 ## Unreleased
 
-### Breaking Changes
-
--   Remove `ThemeProvider` from the public package exports and restore access through `privateApis` ([#79594](https://github.com/WordPress/gutenberg/pull/79594)).
-
 ### New Features
 
 -   Export `@wordpress/theme/utils` with a generated `var()` Sass function for compile-time design token fallback injection ([#79470](https://github.com/WordPress/gutenberg/pull/79470)).
 
+### Deprecations
+
+-   Temporarily restore previously removed private APIs to allow for an easier consumer migration. These private APIs are deprecated and scheduled for deletion as `@wordpress/theme` approaches stabilization ([#79594](https://github.com/WordPress/gutenberg/pull/79594), [#79620](https://github.com/WordPress/gutenberg/pull/79620)).
+
 ### Bug Fixes
 
 -   Mark the published `design-tokens.css` file as side-effectful so downstream bundlers preserve the documented CSS import ([#79551](https://github.com/WordPress/gutenberg/pull/79551)).

packages/theme/package.json

@@ -89,6 +89,7 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/style-runtime": "file:../style-runtime",
+		"@wordpress/warning": "file:../warning",
 		"colorjs.io": "^0.6.0",
 		"memize": "^2.1.0"
 	},

packages/theme/src/index.ts

@@ -1,4 +1,11 @@
+import type { CornerRadiusPreset as InternalCornerRadiusPreset } from './types';
+
 export { privateApis } from './private-apis';
+export { ThemeProvider } from './theme-provider';
 export type * from './prebuilt/ts/token-types';
-export { type ThemeProvider } from './theme-provider';
-export type { CornerRadiusPreset } from './types';
+
+/**
+ * @deprecated This type is not part of the intended public API and is scheduled
+ * for deletion as `@wordpress/theme` approaches stabilization.
+ */
+export type CornerRadiusPreset = InternalCornerRadiusPreset;

packages/theme/src/private-apis.ts

@@ -1,9 +1,27 @@
+import warning from '@wordpress/warning';
 import { lock } from './lock-unlock';
 import { ThemeProvider } from './theme-provider';
 import { useThemeProviderStyles } from './use-theme-provider-styles';
 
+function warnPrivateApi( apiName: string ) {
+	warning(
+		`\`@wordpress/theme\`: Accessing \`${ apiName }\` through private APIs is deprecated. Import \`ThemeProvider\` from \`@wordpress/theme\` instead; this private export is scheduled for deletion as \`@wordpress/theme\` approaches stabilization.`
+	);
+}
+
+/**
+ * @deprecated Private `@wordpress/theme` APIs are scheduled for deletion as the
+ * package approaches stabilization. Import public APIs from `@wordpress/theme`
+ * instead.
+ */
 export const privateApis = {};
 lock( privateApis, {
-	ThemeProvider,
-	useThemeProviderStyles,
+	get ThemeProvider() {
+		warnPrivateApi( 'ThemeProvider' );
+		return ThemeProvider;
+	},
+	get useThemeProviderStyles() {
+		warnPrivateApi( 'useThemeProviderStyles' );
+		return useThemeProviderStyles;
+	},
 } );

packages/theme/src/test/private-apis.test.ts

@@ -0,0 +1,44 @@
+import { unlock } from '../lock-unlock';
+import { privateApis } from '../private-apis';
+import { ThemeProvider } from '../theme-provider';
+import { useThemeProviderStyles } from '../use-theme-provider-styles';
+
+describe( 'privateApis', () => {
+	it( 'warns when accessing useThemeProviderStyles through private APIs', () => {
+		const warn = jest
+			.spyOn( console, 'warn' )
+			.mockImplementation( () => {} );
+
+		const unlockedPrivateApis = unlock< {
+			useThemeProviderStyles: typeof useThemeProviderStyles;
+		} >( privateApis );
+
+		expect( unlockedPrivateApis.useThemeProviderStyles ).toBe(
+			useThemeProviderStyles
+		);
+
+		expect( warn ).toHaveBeenCalledWith(
+			'`@wordpress/theme`: Accessing `useThemeProviderStyles` through private APIs is deprecated. Import `ThemeProvider` from `@wordpress/theme` instead; this private export is scheduled for deletion as `@wordpress/theme` approaches stabilization.'
+		);
+
+		warn.mockRestore();
+	} );
+
+	it( 'warns when accessing ThemeProvider through private APIs', () => {
+		const warn = jest
+			.spyOn( console, 'warn' )
+			.mockImplementation( () => {} );
+
+		const unlockedPrivateApis = unlock< {
+			ThemeProvider: typeof ThemeProvider;
+		} >( privateApis );
+
+		expect( unlockedPrivateApis.ThemeProvider ).toBe( ThemeProvider );
+
+		expect( warn ).toHaveBeenCalledWith(
+			'`@wordpress/theme`: Accessing `ThemeProvider` through private APIs is deprecated. Import `ThemeProvider` from `@wordpress/theme` instead; this private export is scheduled for deletion as `@wordpress/theme` approaches stabilization.'
+		);
+
+		warn.mockRestore();
+	} );
+} );

packages/theme/tsconfig.src.json

@@ -11,6 +11,7 @@
 		{ "path": "../compose" },
 		{ "path": "../element" },
 		{ "path": "../private-apis" },
-		{ "path": "../style-runtime" }
+		{ "path": "../style-runtime" },
+		{ "path": "../warning" }
 	]
 }

packages/ui/CHANGELOG.md

@@ -8,7 +8,6 @@
 
 ### Internal
 
--   Restore private API access for `@wordpress/theme`'s `ThemeProvider` ([#79594](https://github.com/WordPress/gutenberg/pull/79594)).
 -   Enforce CSS Module class selector naming for component-library packages ([#79504](https://github.com/WordPress/gutenberg/pull/79504)).
 -   Update `@base-ui/react` from `1.5.0` to [`1.6.0`](https://github.com/mui/base-ui/releases/tag/v1.6.0) ([#79408](https://github.com/WordPress/gutenberg/pull/79408)).
 

packages/ui/package.json

@@ -51,7 +51,6 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/primitives": "file:../primitives",
-		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/style-runtime": "file:../style-runtime",
 		"@wordpress/theme": "file:../theme",
 		"clsx": "^2.1.1",

packages/ui/src/alert-dialog/popup.tsx

@@ -3,10 +3,7 @@ import clsx from 'clsx';
 import { forwardRef, useContext } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import {
-	type ThemeProvider as ThemeProviderType,
-	privateApis as themePrivateApis,
-} from '@wordpress/theme';
+import { ThemeProvider } from '@wordpress/theme';
 
 import { renderSlotWithChildren } from '../utils/render-slot-with-children';
 import { Button } from '../button';
@@ -18,17 +15,13 @@ import {
 	SCROLL_CONTAINER_ATTR,
 	useOverlayScrollStateAttributes,
 } from '../utils/use-overlay-scroll-state-attributes';
-import { unlock } from '../lock-unlock';
 import { Stack } from '../stack';
 import { Text } from '../text';
 import { AlertDialogContext } from './context';
 import { Portal } from './portal';
 import alertDialogStyles from './style.module.css';
 import type { PopupProps } from './types';
 
-const ThemeProvider: typeof ThemeProviderType =
-	unlock( themePrivateApis ).ThemeProvider;
-
 const Popup = forwardRef< HTMLDivElement, PopupProps >(
 	function AlertDialogPopup(
 		{

packages/ui/src/dialog/popup.tsx

@@ -2,11 +2,7 @@ import { Dialog as _Dialog } from '@base-ui/react/dialog';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-import {
-	type ThemeProvider as ThemeProviderType,
-	privateApis as themePrivateApis,
-} from '@wordpress/theme';
-import { unlock } from '../lock-unlock';
+import { ThemeProvider } from '@wordpress/theme';
 import { useDeprioritizedInitialFocus } from '../utils/use-deprioritized-initial-focus';
 import { SCROLL_CONTAINER_ATTR } from '../utils/use-overlay-scroll-state-attributes';
 import { renderSlotWithChildren } from '../utils/render-slot-with-children';
@@ -15,9 +11,6 @@ import { Portal } from './portal';
 import styles from './style.module.css';
 import type { PopupProps } from './types';
 
-const ThemeProvider: typeof ThemeProviderType =
-	unlock( themePrivateApis ).ThemeProvider;
-
 const CLOSE_ICON_ATTR = 'data-wp-ui-dialog-close-icon';
 
 /**

packages/ui/src/drawer/popup.tsx

@@ -2,11 +2,7 @@ import { Drawer as _Drawer } from '@base-ui/react/drawer';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-import {
-	type ThemeProvider as ThemeProviderType,
-	privateApis as themePrivateApis,
-} from '@wordpress/theme';
-import { unlock } from '../lock-unlock';
+import { ThemeProvider } from '@wordpress/theme';
 import { useDeprioritizedInitialFocus } from '../utils/use-deprioritized-initial-focus';
 import { SCROLL_CONTAINER_ATTR } from '../utils/use-overlay-scroll-state-attributes';
 import { renderSlotWithChildren } from '../utils/render-slot-with-children';
@@ -15,9 +11,6 @@ import { Portal } from './portal';
 import styles from './style.module.css';
 import type { PopupProps } from './types';
 
-const ThemeProvider: typeof ThemeProviderType =
-	unlock( themePrivateApis ).ThemeProvider;
-
 const CLOSE_ICON_ATTR = 'data-wp-ui-drawer-close-icon';
 
 /**

packages/ui/src/form/primitives/autocomplete/popup.tsx

@@ -1,20 +1,13 @@
 import { Autocomplete as _Autocomplete } from '@base-ui/react/autocomplete';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
-import {
-	type ThemeProvider as ThemeProviderType,
-	privateApis as themePrivateApis,
-} from '@wordpress/theme';
-import { unlock } from '../../../lock-unlock';
+import { ThemeProvider } from '@wordpress/theme';
 import { renderSlotWithChildren } from '../../../utils/render-slot-with-children';
 import itemPopupStyles from '../../../utils/css/item-popup.module.css';
 import { Portal } from './portal';
 import { Positioner } from './positioner';
 import type { AutocompletePopupProps } from './types';
 
-const ThemeProvider: typeof ThemeProviderType =
-	unlock( themePrivateApis ).ThemeProvider;
-
 export const Popup = forwardRef< HTMLDivElement, AutocompletePopupProps >(
 	function Popup( { className, portal, positioner, ...restProps }, ref ) {
 		const popupContent = (

packages/ui/src/form/primitives/combobox/popup.tsx

@@ -1,20 +1,13 @@
 import { Combobox as _Combobox } from '@base-ui/react/combobox';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
-import {
-	type ThemeProvider as ThemeProviderType,
-	privateApis as themePrivateApis,
-} from '@wordpress/theme';
-import { unlock } from '../../../lock-unlock';
+import { ThemeProvider } from '@wordpress/theme';
 import { Portal } from './portal';
 import { Positioner } from './positioner';
 import { renderSlotWithChildren } from '../../../utils/render-slot-with-children';
 import itemPopupStyles from '../../../utils/css/item-popup.module.css';
 import type { ComboboxPopupProps } from './types';
 
-const ThemeProvider: typeof ThemeProviderType =
-	unlock( themePrivateApis ).ThemeProvider;
-
 export const Popup = forwardRef< HTMLDivElement, ComboboxPopupProps >(
 	function Popup( { className, portal, positioner, ...restProps }, ref ) {
 		const popupContent = (

packages/ui/src/form/primitives/select/popup.tsx

@@ -1,20 +1,13 @@
 import { Select as _Select } from '@base-ui/react/select';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
-import {
-	type ThemeProvider as ThemeProviderType,
-	privateApis as themePrivateApis,
-} from '@wordpress/theme';
-import { unlock } from '../../../lock-unlock';
+import { ThemeProvider } from '@wordpress/theme';
 import { Portal } from './portal';
 import { Positioner } from './positioner';
 import { renderSlotWithChildren } from '../../../utils/render-slot-with-children';
 import itemPopupStyles from '../../../utils/css/item-popup.module.css';
 import type { SelectPopupProps } from './types';
 
-const ThemeProvider: typeof ThemeProviderType =
-	unlock( themePrivateApis ).ThemeProvider;
-
 export const Popup = forwardRef< HTMLDivElement, SelectPopupProps >(
 	function Popup(
 		{ className, portal, positioner, children, ...restProps },

packages/ui/src/popover/popup.tsx

@@ -2,11 +2,7 @@ import { Popover as _Popover } from '@base-ui/react/popover';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-import {
-	type ThemeProvider as ThemeProviderType,
-	privateApis as themePrivateApis,
-} from '@wordpress/theme';
-import { unlock } from '../lock-unlock';
+import { ThemeProvider } from '@wordpress/theme';
 import { useDeprioritizedInitialFocus } from '../utils/use-deprioritized-initial-focus';
 import { renderSlotWithChildren } from '../utils/render-slot-with-children';
 import { PopoverValidationProvider } from './context';
@@ -15,9 +11,6 @@ import { Positioner } from './positioner';
 import styles from './style.module.css';
 import type { PopupProps } from './types';
 
-const ThemeProvider: typeof ThemeProviderType =
-	unlock( themePrivateApis ).ThemeProvider;
-
 const CLOSE_ATTR = 'data-wp-ui-popover-close';
 
 /**

packages/ui/src/stack/types.ts

@@ -1,4 +1,4 @@
-import { type GapSize } from '@wordpress/theme';
+import type { GapSize } from '@wordpress/theme';
 import { type ComponentProps } from '../utils/types';
 
 export interface StackProps extends ComponentProps< 'div' > {