From b631e509ef6e5b903b30b18c78df654868f5f4ff Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta.wolny@automattic.com>
Date: Fri, 22 Nov 2024 13:55:13 +0100
Subject: [PATCH] Export StylesColorPanel from private-apis file

[MAILPOET-6319]
---
 .../styles-sidebar/screens/screen-colors.tsx   | 18 ++++++++++++------
 .../js/email-editor/src/private-apis/index.ts  |  6 ++++++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-colors.tsx b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-colors.tsx
index 251f1c944b..27a2b651fb 100644
--- a/packages/js/email-editor/src/components/styles-sidebar/screens/screen-colors.tsx
+++ b/packages/js/email-editor/src/components/styles-sidebar/screens/screen-colors.tsx
@@ -1,16 +1,22 @@
+/**
+ * WordPress dependencies
+ */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import {
-	// @ts-expect-error No types for this exist yet.
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+
+/**
+ * WordPress private dependencies
+ */
+import { StylesColorPanel } from '../../../private-apis';
+
+/**
+ * Internal dependencies
+ */
 import ScreenHeader from './screen-header';
-import { unlock } from '../../../lock-unlock';
 import { useEmailStyles } from '../../../hooks';
 import { storeName } from '../../../store';
 
 export function ScreenColors(): JSX.Element {
-	const { ColorPanel: StylesColorPanel } = unlock( blockEditorPrivateApis );
 	const { styles, defaultStyles, updateStyles } = useEmailStyles();
 	const theme = useSelect( ( select ) => select( storeName ).getTheme(), [] );
 
diff --git a/packages/js/email-editor/src/private-apis/index.ts b/packages/js/email-editor/src/private-apis/index.ts
index 48fe4696a3..1373c0cce6 100644
--- a/packages/js/email-editor/src/private-apis/index.ts
+++ b/packages/js/email-editor/src/private-apis/index.ts
@@ -50,9 +50,15 @@ const unlockGetEnabledClientIdsTree = ( selectHook ) => {
 	return getEnabledClientIdsTree;
 };
 
+/**
+ * We use the ColorPanel component from the block editor to render the color panel in the style settings sidebar.
+ */
+const { ColorPanel: StylesColorPanel } = unlock( blockEditorPrivateApis );
+
 export {
 	BlockCanvas,
 	Tabs,
+	StylesColorPanel,
 	unlockPatternsRelatedSelectorsFromCoreStore,
 	unlockGetEnabledClientIdsTree,
 };