Filtering results

packages/edit-site/src/components/global-styles/color-palette-panel.js

@@ -49,6 +49,9 @@ export default function ColorPalettePanel( { name } ) {
 	);
 	const colorVariations = useThemeStyleVariationsByProperty( {
 		styleProperty: 'color',
+		filter: ( variation ) =>
+			variation?.settings?.color &&
+			Object.keys( variation?.settings?.color ).length,
 	} );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
@@ -94,7 +97,9 @@ export default function ColorPalettePanel( { name } ) {
 				popoverProps={ popoverProps }
 			/>
 			{ /* @TODO: pass down variations to component? */ }
-			{ !! colorVariations.length && <ColorVariations /> }
+			{ !! colorVariations.length && (
+				<ColorVariations variations={ colorVariations } />
+			) }
 		</VStack>
 	);
 }

packages/edit-site/src/components/global-styles/screen-typography.js

@@ -30,7 +30,11 @@ function ScreenTypography() {
 	);
 	const typographyVariations = useThemeStyleVariationsByProperty( {
 		styleProperty: 'typography',
+		filter: ( variation ) =>
+			variation?.settings?.typography?.fontFamilies &&
+			Object.keys( variation?.settings?.typography?.fontFamilies ).length,
 	} );
+
 	return (
 		<>
 			<ScreenHeader

packages/edit-site/src/components/global-styles/use-theme-style-variations-by-property.js

@@ -87,7 +87,10 @@ export const getVariationsByProperty = ( user, variations, property ) => {
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
-export default function useThemeStyleVariationsByProperty( { styleProperty } ) {
+export default function useThemeStyleVariationsByProperty( {
+	styleProperty,
+	filter,
+} ) {
 	const variations = useSelect( ( select ) => {
 		return select(
 			coreStore
@@ -107,12 +110,16 @@ export default function useThemeStyleVariationsByProperty( { styleProperty } ) {
 			Test with 2022 - typography font families bork for some reason
 
 		 */
-		const styleVariations = getVariationsByProperty(
+		let styleVariations = getVariationsByProperty(
 			user,
 			variations,
 			styleProperty
 		);
 
-		return styleVariations.length ? styleVariations : [];
-	}, [ styleProperty, variations ] );
+		if ( 'function' === typeof filter ) {
+			styleVariations = styleVariations.filter( filter );
+		}
+
+		return styleVariations;
+	}, [ styleProperty, variations, filter ] );
 }

packages/edit-site/src/components/global-styles/variations-color.js

@@ -24,7 +24,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import { unlock } from '../../lock-unlock';
 import ColorIndicatorWrapper from './color-indicator-wrapper';
-import useThemeStyleVariationsByProperty from './use-theme-style-variations-by-property';
 import Subtitle from './subtitle';
 
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
@@ -118,27 +117,19 @@ function ColorVariation( { variation } ) {
 	);
 }
 
-export default function ColorVariations() {
-	const colorVariations = useThemeStyleVariationsByProperty( {
-		styleProperty: 'color',
-	} );
-
+export default function ColorVariations( { variations } ) {
 	return (
 		<VStack spacing={ 3 }>
 			<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>
 			<Grid
 				columns={ 2 }
 				className="edit-site-global-styles-color-variations"
 			>
-				{ colorVariations &&
-					colorVariations.map( ( variation, index ) => {
-						return (
-							<ColorVariation
-								key={ index }
-								variation={ variation }
-							/>
-						);
-					} ) }
+				{ variations.map( ( variation, index ) => {
+					return (
+						<ColorVariation key={ index } variation={ variation } />
+					);
+				} ) }
 			</Grid>
 		</VStack>
 	);

packages/edit-site/src/components/global-styles/variations-typography.js

@@ -168,6 +168,9 @@ function TypographyVariation( { variation } ) {
 export default function TypographyVariations() {
 	const typographyVariations = useThemeStyleVariationsByProperty( {
 		styleProperty: 'typography',
+		filter: ( variation ) =>
+			variation?.settings?.typography?.fontFamilies &&
+			Object.keys( variation?.settings?.typography?.fontFamilies ).length,
 	} );
 
 	const { base } = useContext( GlobalStylesContext );