Revert "Theme: Promote ThemeProvider to stable API (#78958)"

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 { ThemeProvider } from '@wordpress/theme';
+import { privateApis as themePrivateApis } from '@wordpress/theme';
 
 /**
  * Internal dependencies
@@ -34,6 +34,7 @@ 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 { ThemeProvider } from '@wordpress/theme';
+import { privateApis as themePrivateApis } from '@wordpress/theme';
 
 /**
  * Internal dependencies
@@ -24,6 +24,7 @@ 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 { ThemeProvider } from '@wordpress/theme';
+import { privateApis as themePrivateApis } from '@wordpress/theme';
 import { PluginArea } from '@wordpress/plugins';
 import { SnackbarNotices, store as noticesStore } from '@wordpress/notices';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -50,6 +50,7 @@ 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

@@ -16,11 +16,9 @@
 
 -   Rename the `bg` and `fg` design token groups to `background` and `foreground`. All `--wpds-color-bg-*` custom properties are now `--wpds-color-background-*`, and all `--wpds-color-fg-*` custom properties are now `--wpds-color-foreground-*` ([#79098](https://github.com/WordPress/gutenberg/pull/79098)).
 -   Remove the `--wpds-dimension-base` design token. It was a primitive (the `4px` base unit) and is no longer exposed publicly ([#79254](https://github.com/WordPress/gutenberg/pull/79254)).
--   Remove `privateApis` from the package exports due to API stabilization described in "New Features" ([#78958](https://github.com/WordPress/gutenberg/pull/78958)).
 
 ### New Features
 
--   Add `ThemeProvider` as a public package export ([#78958](https://github.com/WordPress/gutenberg/pull/78958)).
 -   Add `--wpds-color-stroke-surface-caution` and `--wpds-color-stroke-surface-caution-strong` so the `caution` tone has the same stroke-surface coverage as the other status tones ([#79198](https://github.com/WordPress/gutenberg/pull/79198)).
 -   Add `--wpds-border-radius-xl` for page and app shell surfaces so nested cards and notices can stay on `--wpds-border-radius-lg` without matching the parent radius ([#78913](https://github.com/WordPress/gutenberg/pull/78913)).
 -   Add `cornerRadius` prop to `ThemeProvider` for configuring the border-radius preset (`none`, `subtle`, `moderate`, `pronounced`) via prebuilt design token modes. [#78816](https://github.com/WordPress/gutenberg/pull/78816).

packages/theme/package.json

@@ -87,6 +87,7 @@
 	"dependencies": {
 		"@wordpress/compose": "file:../compose",
 		"@wordpress/element": "file:../element",
+		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/style-runtime": "file:../style-runtime",
 		"colorjs.io": "^0.6.0",
 		"memize": "^2.1.0"

packages/theme/src/index.ts

@@ -1,3 +1,4 @@
+export { privateApis } from './private-apis';
 export type * from './prebuilt/ts/token-types';
-export { ThemeProvider } from './theme-provider';
+export { type ThemeProvider } from './theme-provider';
 export type { CornerRadiusPreset } from './types';

packages/theme/src/lock-unlock.ts

@@ -0,0 +1,7 @@
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/theme'
+	);

packages/theme/src/private-apis.ts

@@ -0,0 +1,9 @@
+import { lock } from './lock-unlock';
+import { ThemeProvider } from './theme-provider';
+import { useThemeProviderStyles } from './use-theme-provider-styles';
+
+export const privateApis = {};
+lock( privateApis, {
+	ThemeProvider,
+	useThemeProviderStyles,
+} );

packages/theme/src/stories/index.story.tsx

@@ -22,6 +22,7 @@ const meta: Meta< typeof ThemeProvider > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
+	tags: [ 'status-private' ],
 };
 export default meta;
 

packages/theme/src/theme-provider.tsx

@@ -10,11 +10,6 @@ import styles from './style.module.css';
 // would conflict). Keyed weakly so iframe documents don't leak.
 const rootProviderCountByDocument = new WeakMap< Document, number >();
 
-/**
- * Context provider that generates a theme from a set of seed color values and
- * configuration, producing a set of design token overrides as CSS custom
- * properties.
- */
 export const ThemeProvider = ( {
 	children,
 	color = {},

packages/theme/tsconfig.src.json

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

packages/ui/CHANGELOG.md

@@ -35,7 +35,6 @@
 -   `Popover`: Disable popup transitions when Base UI marks animations as instant ([#79432](https://github.com/WordPress/gutenberg/pull/79432)).
 -   `Button`: Fix `loading` state in forced colors mode ([#78820](https://github.com/WordPress/gutenberg/pull/78820)).
 -   `Button`: Fix `loading` prop affecting `unstyled` variant ([#78820](https://github.com/WordPress/gutenberg/pull/78820)).
--   Remove usage of private APIs, which previously caused conflicts for some consumers ([#78958](https://github.com/WordPress/gutenberg/pull/78958)).
 
 ### Internal
 

packages/ui/package.json

@@ -51,6 +51,7 @@
 		"@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,7 +3,10 @@ import clsx from 'clsx';
 import { forwardRef, useContext } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { ThemeProvider } from '@wordpress/theme';
+import {
+	type ThemeProvider as ThemeProviderType,
+	privateApis as themePrivateApis,
+} from '@wordpress/theme';
 
 import { renderSlotWithChildren } from '../utils/render-slot-with-children';
 import { Button } from '../button';
@@ -15,13 +18,17 @@ 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,7 +2,11 @@ import { Dialog as _Dialog } from '@base-ui/react/dialog';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-import { ThemeProvider } from '@wordpress/theme';
+import {
+	type ThemeProvider as ThemeProviderType,
+	privateApis as themePrivateApis,
+} from '@wordpress/theme';
+import { unlock } from '../lock-unlock';
 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';
@@ -11,6 +15,9 @@ 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,7 +2,11 @@ import { Drawer as _Drawer } from '@base-ui/react/drawer';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-import { ThemeProvider } from '@wordpress/theme';
+import {
+	type ThemeProvider as ThemeProviderType,
+	privateApis as themePrivateApis,
+} from '@wordpress/theme';
+import { unlock } from '../lock-unlock';
 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';
@@ -11,6 +15,9 @@ 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,13 +1,20 @@
 import { Autocomplete as _Autocomplete } from '@base-ui/react/autocomplete';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
-import { ThemeProvider } from '@wordpress/theme';
+import {
+	type ThemeProvider as ThemeProviderType,
+	privateApis as themePrivateApis,
+} from '@wordpress/theme';
+import { unlock } from '../../../lock-unlock';
 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,13 +1,20 @@
 import { Combobox as _Combobox } from '@base-ui/react/combobox';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
-import { ThemeProvider } from '@wordpress/theme';
+import {
+	type ThemeProvider as ThemeProviderType,
+	privateApis as themePrivateApis,
+} from '@wordpress/theme';
+import { unlock } from '../../../lock-unlock';
 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,13 +1,20 @@
 import { Select as _Select } from '@base-ui/react/select';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
-import { ThemeProvider } from '@wordpress/theme';
+import {
+	type ThemeProvider as ThemeProviderType,
+	privateApis as themePrivateApis,
+} from '@wordpress/theme';
+import { unlock } from '../../../lock-unlock';
 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/lock-unlock.ts

@@ -0,0 +1,7 @@
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/ui'
+	);

packages/ui/src/popover/popup.tsx

@@ -2,7 +2,11 @@ import { Popover as _Popover } from '@base-ui/react/popover';
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
-import { ThemeProvider } from '@wordpress/theme';
+import {
+	type ThemeProvider as ThemeProviderType,
+	privateApis as themePrivateApis,
+} from '@wordpress/theme';
+import { unlock } from '../lock-unlock';
 import { useDeprioritizedInitialFocus } from '../utils/use-deprioritized-initial-focus';
 import { renderSlotWithChildren } from '../utils/render-slot-with-children';
 import { PopoverValidationProvider } from './context';
@@ -11,6 +15,9 @@ 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/tooltip/popup.tsx

@@ -1,13 +1,20 @@
 import clsx from 'clsx';
 import { Tooltip as _Tooltip } from '@base-ui/react/tooltip';
 import { forwardRef } from '@wordpress/element';
-import { ThemeProvider } from '@wordpress/theme';
+import {
+	type ThemeProvider as ThemeProviderType,
+	privateApis as themePrivateApis,
+} from '@wordpress/theme';
 import type { PopupProps } from './types';
+import { unlock } from '../lock-unlock';
 import { Portal } from './portal';
 import { Positioner } from './positioner';
 import { renderSlotWithChildren } from '../utils/render-slot-with-children';
 import styles from './style.module.css';
 
+const ThemeProvider: typeof ThemeProviderType =
+	unlock( themePrivateApis ).ThemeProvider;
+
 /*
  * This should ideally use whatever dark color makes sense, and not be
  * hardcoded to #1e1e1e. The solutions would be to:

packages/ui/tsconfig.json

@@ -17,6 +17,7 @@
 		{ "path": "../icons" },
 		{ "path": "../keycodes" },
 		{ "path": "../primitives" },
+		{ "path": "../private-apis" },
 		{ "path": "../style-runtime" },
 		{ "path": "../theme" }
 	],

storybook/decorators/with-design-system-theme.tsx

@@ -1,8 +1,16 @@
 import type { CornerRadiusPreset } from '@wordpress/theme';
-import { ThemeProvider } from '@wordpress/theme';
+import { privateApis as themeApis } from '@wordpress/theme';
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
 import type { StoryContext } from 'storybook/internal/types';
 import { storyIdMatchesDesignSystemTheme } from './utils/design-system-theme-story-matchers';
 
+const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+	'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+	'@wordpress/theme'
+);
+
+const { ThemeProvider } = unlock( themeApis );
+
 /**
  * Decorator that applies Design System theme based on toolbar selections.
  *