diff --git a/packages/edit-site/src/components/global-styles/screen-color-palette.js b/packages/edit-site/src/components/global-styles/screen-color-palette.js
index 0e5b9c5d960fc..587373324f0ff 100644
--- a/packages/edit-site/src/components/global-styles/screen-color-palette.js
+++ b/packages/edit-site/src/components/global-styles/screen-color-palette.js
@@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { TabPanel } from '@wordpress/components';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
/**
* Internal dependencies
@@ -10,6 +10,9 @@ import { TabPanel } from '@wordpress/components';
import ColorPalettePanel from './color-palette-panel';
import GradientPalettePanel from './gradients-palette-panel';
import ScreenHeader from './header';
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
function ScreenColorPalette( { name } ) {
return (
@@ -20,31 +23,18 @@ function ScreenColorPalette( { name } ) {
'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
) }
/>
-
- { ( tab ) => (
- <>
- { tab.value === 'solid' && (
-
- ) }
- { tab.value === 'gradient' && (
-
- ) }
- >
- ) }
-
+
+
+ Solid
+ Gradient
+
+
+
+
+
+
+
+
>
);
}