@elementor/editor-controls 4.0.0-510 → 4.0.0-512

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.0.0-510",
+  "version": "4.0.0-512",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,22 +40,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.0.0-510",
-    "@elementor/editor-elements": "4.0.0-510",
-    "@elementor/editor-props": "4.0.0-510",
-    "@elementor/editor-responsive": "4.0.0-510",
-    "@elementor/editor-ui": "4.0.0-510",
-    "@elementor/editor-v1-adapters": "4.0.0-510",
-    "@elementor/env": "4.0.0-510",
-    "@elementor/http-client": "4.0.0-510",
+    "@elementor/editor-current-user": "4.0.0-512",
+    "@elementor/editor-elements": "4.0.0-512",
+    "@elementor/editor-props": "4.0.0-512",
+    "@elementor/editor-responsive": "4.0.0-512",
+    "@elementor/editor-ui": "4.0.0-512",
+    "@elementor/editor-v1-adapters": "4.0.0-512",
+    "@elementor/env": "4.0.0-512",
+    "@elementor/http-client": "4.0.0-512",
     "@elementor/icons": "^1.63.0",
-    "@elementor/locations": "4.0.0-510",
-    "@elementor/mixpanel": "4.0.0-510",
-    "@elementor/query": "4.0.0-510",
-    "@elementor/session": "4.0.0-510",
+    "@elementor/locations": "4.0.0-512",
+    "@elementor/mixpanel": "4.0.0-512",
+    "@elementor/query": "4.0.0-512",
+    "@elementor/session": "4.0.0-512",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.0.0-510",
-    "@elementor/wp-media": "4.0.0-510",
+    "@elementor/utils": "4.0.0-512",
+    "@elementor/wp-media": "4.0.0-512",
     "@wordpress/i18n": "^5.13.0",
     "@monaco-editor/react": "^4.7.0",
     "dayjs": "^1.11.18",

package/src/control-replacements.tsx

@@ -54,3 +54,5 @@ export const createControlReplacementsRegistry = () => {
 
 	return { registerControlReplacement, getControlReplacements };
 };
+
+export const { registerControlReplacement, getControlReplacements } = createControlReplacementsRegistry();

package/src/hooks/use-font-families.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { getElementorConfig, type SupportedFonts } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
+
+import { type FontCategory } from '../controls/font-family-control/font-family-control';
+
+const supportedCategories: Record< SupportedFonts, string > = {
+	system: __( 'System', 'elementor' ),
+	custom: __( 'Custom Fonts', 'elementor' ),
+	googlefonts: __( 'Google Fonts', 'elementor' ),
+};
+
+const getFontFamilies = () => {
+	const { controls } = getElementorConfig();
+
+	const options = controls?.font?.options;
+
+	if ( ! options ) {
+		return null;
+	}
+
+	return options;
+};
+
+export const useFontFamilies = () => {
+	const fontFamilies = getFontFamilies();
+
+	return useMemo( () => {
+		const categoriesOrder: SupportedFonts[] = [ 'system', 'custom', 'googlefonts' ];
+
+		return Object.entries( fontFamilies || {} )
+			.reduce< FontCategory[] >( ( acc, [ font, category ] ) => {
+				if ( ! supportedCategories[ category as SupportedFonts ] ) {
+					return acc;
+				}
+
+				const categoryIndex = categoriesOrder.indexOf( category );
+
+				if ( ! acc[ categoryIndex ] ) {
+					acc[ categoryIndex ] = {
+						label: supportedCategories[ category as SupportedFonts ],
+						fonts: [],
+					};
+				}
+
+				acc[ categoryIndex ].fonts.push( font );
+
+				return acc;
+			}, [] )
+			.filter( Boolean );
+	}, [ fontFamilies ] );
+};

package/src/index.ts

@@ -67,6 +67,8 @@ export type { FontCategory } from './controls/font-family-control/font-family-co
 // providers
 export {
 	createControlReplacementsRegistry,
+	registerControlReplacement,
+	getControlReplacements,
 	ControlReplacementsProvider,
 	useControlReplacement,
 	type ControlReplacement,
@@ -86,3 +88,4 @@ export {
 // hooks
 export { useSyncExternalState } from './hooks/use-sync-external-state';
 export { useElementCanHaveChildren } from './hooks/use-element-can-have-children';
+export { useFontFamilies } from './hooks/use-font-families';