@wordpress/global-styles-ui 1.14.1 → 1.15.1

package/src/font-library/font-card.tsx

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { _n, sprintf, isRTL } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
 import {
 	useNavigator,
 	__experimentalText as WCText,
@@ -22,11 +23,13 @@ function FontCard( {
 	onClick,
 	variantsText,
 	navigatorPath,
+	shouldFocus,
 }: {
 	font: FontFamily;
 	onClick: () => void;
 	variantsText?: string;
 	navigatorPath?: string;
+	shouldFocus?: boolean;
 } ) {
 	const variantsCount = font.fontFace?.length || 1;
 
@@ -35,9 +38,17 @@ function FontCard( {
 	};
 
 	const navigator = useNavigator();
+	const ref = useRef< HTMLButtonElement >( null );
+
+	useEffect( () => {
+		if ( shouldFocus ) {
+			ref.current?.focus();
+		}
+	}, [ shouldFocus ] );
 
 	return (
 		<Button
+			ref={ ref }
 			__next40pxDefaultSize
 			onClick={ () => {
 				onClick();

package/src/font-library/font-collection.tsx

@@ -76,6 +76,9 @@ function FontCollection( { slug }: { slug: string } ) {
 	const [ selectedFont, setSelectedFont ] = useState< FontFamily | null >(
 		null
 	);
+	const [ lastSelectedFontSlug, setLastSelectedFontSlug ] = useState<
+		string | undefined
+	>( undefined );
 	const [ notice, setNotice ] = useState< {
 		type: 'success' | 'error' | 'info';
 		message: string;
@@ -361,6 +364,11 @@ function FontCollection( { slug }: { slug: string } ) {
 													font.font_family_settings
 												}
 												navigatorPath="/fontFamily"
+												shouldFocus={
+													font.font_family_settings
+														.slug ===
+													lastSelectedFontSlug
+												}
 												onClick={ () => {
 													setSelectedFont(
 														font.font_family_settings
@@ -382,6 +390,9 @@ function FontCollection( { slug }: { slug: string } ) {
 									}
 									size="small"
 									onClick={ () => {
+										setLastSelectedFontSlug(
+											selectedFont?.slug
+										);
 										setSelectedFont( null );
 										setNotice( null );
 									} }

package/src/font-library/installed-fonts.tsx

@@ -18,7 +18,7 @@ import {
 } from '@wordpress/components';
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useContext, useEffect, useState } from '@wordpress/element';
+import { useContext, useEffect, useMemo, useState } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import type {
@@ -42,6 +42,34 @@ import {
 } from './utils';
 import { useSetting } from '../hooks';
 
+/**
+ * Comparison key for font families. Sorts families by slug and faces
+ * by style+weight so order differences don't produce false positives.
+ *
+ * @param fontFamilies Font families record keyed by source (e.g. "theme", "custom").
+ */
+function getFontFamiliesKey(
+	fontFamilies: Record< string, FontFamilyPreset[] > | undefined
+): string {
+	if ( ! fontFamilies ) {
+		return '';
+	}
+	const normalized: Record< string, unknown[] > = {};
+	for ( const source of Object.keys( fontFamilies ).sort() ) {
+		normalized[ source ] = ( fontFamilies[ source ] ?? [] )
+			.map( ( family ) => ( {
+				slug: family.slug,
+				fontFace: ( family.fontFace ?? [] )
+					.map(
+						( face ) => `${ face.fontStyle }-${ face.fontWeight }`
+					)
+					.sort(),
+			} ) )
+			.sort( ( a, b ) => a.slug.localeCompare( b.slug ) );
+	}
+	return JSON.stringify( normalized );
+}
+
 function InstalledFonts() {
 	const {
 		baseCustomFonts,
@@ -57,6 +85,10 @@ function InstalledFonts() {
 	const [ fontFamilies, setFontFamilies ] = useSetting<
 		Record< string, FontFamilyPreset[] > | undefined
 	>( 'typography.fontFamilies' );
+	const [ lastSelectedFontSlug, setLastSelectedFontSlug ] = useState<
+		string | undefined
+	>( undefined );
+
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] =
 		useState< boolean >( false );
 	const [ notice, setNotice ] = useState< {
@@ -75,8 +107,19 @@ function InstalledFonts() {
 		'globalStyles',
 		globalStylesId
 	);
-	const fontFamiliesHasChanges =
-		!! globalStyles?.edits?.settings?.typography?.fontFamilies;
+	const editedFontFamilies =
+		globalStyles?.edits?.settings?.typography?.fontFamilies;
+	const savedFontFamilies =
+		globalStyles?.record?.settings?.typography?.fontFamilies;
+	const fontFamiliesHasChanges = useMemo( () => {
+		if ( editedFontFamilies === undefined ) {
+			return false;
+		}
+		return (
+			getFontFamiliesKey( editedFontFamilies ) !==
+			getFontFamiliesKey( savedFontFamilies )
+		);
+	}, [ editedFontFamilies, savedFontFamilies ] );
 
 	const themeFonts = fontFamilies?.theme
 		? fontFamilies.theme
@@ -288,6 +331,10 @@ function InstalledFonts() {
 														variantsText={ getFontCardVariantsText(
 															font
 														) }
+														shouldFocus={
+															font.slug ===
+															lastSelectedFontSlug
+														}
 														onClick={ () => {
 															setNotice( null );
 															handleSetLibraryFontSelected(
@@ -329,6 +376,10 @@ function InstalledFonts() {
 														variantsText={ getFontCardVariantsText(
 															font
 														) }
+														shouldFocus={
+															font.slug ===
+															lastSelectedFontSlug
+														}
 														onClick={ () => {
 															setNotice( null );
 															handleSetLibraryFontSelected(
@@ -366,6 +417,9 @@ function InstalledFonts() {
 									}
 									size="small"
 									onClick={ () => {
+										setLastSelectedFontSlug(
+											libraryFontSelected?.slug
+										);
 										handleSetLibraryFontSelected(
 											undefined
 										);

package/src/style.scss

@@ -188,27 +188,23 @@
 	flex-direction: column;
 	margin: 16px;
 
-	.components-v-stack {
+	.block-editor-global-styles-advanced-panel {
 		flex: 1 1 auto;
+	}
+
+	.block-editor-global-styles-advanced-panel__custom-css-input {
+		flex: 1 1 auto;
+		display: flex;
+		flex-direction: column;
 
-		.block-editor-global-styles-advanced-panel__custom-css-input {
+		.components-base-control__field {
 			flex: 1 1 auto;
 			display: flex;
 			flex-direction: column;
+		}
 
-			.components-base-control__field {
-				flex: 1 1 auto;
-				display: flex;
-				flex-direction: column;
-
-				.components-textarea-control__input {
-					flex: 1 1 auto;
-					// CSS input is always LTR regardless of language.
-
-					/*rtl:ignore*/
-					direction: ltr;
-				}
-			}
+		textarea {
+			flex: 1 1 auto;
 		}
 	}
 }

package/src/variations/variation.tsx

@@ -3,10 +3,6 @@
  */
 import clsx from 'clsx';
 
-/**
- * WordPress dependencies
- */
-import { Tooltip as WCTooltip } from '@wordpress/components';
 import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { _x, sprintf } from '@wordpress/i18n';
@@ -14,11 +10,14 @@ import {
 	areGlobalStylesEqual,
 	mergeGlobalStyles,
 } from '@wordpress/global-styles-engine';
+// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.
+import { Tooltip } from '@wordpress/ui';
 
 /**
  * Internal dependencies
  */
 import { GlobalStylesContext } from '../context';
+
 import { filterObjectByProperties } from '../utils';
 
 interface VariationProps {
@@ -107,7 +106,10 @@ export default function Variation( {
 	return (
 		<GlobalStylesContext.Provider value={ context }>
 			{ showTooltip ? (
-				<WCTooltip text={ variation?.title }>{ content }</WCTooltip>
+				<Tooltip.Root>
+					<Tooltip.Trigger render={ content } />
+					<Tooltip.Popup>{ variation?.title }</Tooltip.Popup>
+				</Tooltip.Root>
 			) : (
 				content
 			) }