Global Styles: Fetch the variations inside the component (#59588)

* Global Styles: Fetch the variations inside the component * catch the case where the variations are null Co-authored-by: scruffian <[email protected]> Co-authored-by: ramonjd <[email protected]>
WordPress · Mar 7, 2024 · a781580 · a781580
1 parent 20c45c6
commit a781580
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 26 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -12,7 +12,6 @@ import ScreenHeader from './header';
 import Palette from './palette';
 import { unlock } from '../../lock-unlock';
 import ColorVariations from './variations/variations-color';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 const {
 	useGlobalStyle,
@@ -31,12 +30,6 @@ function ScreenColors() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 
-	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
-		property: 'color',
-		filter: ( variation ) =>
-			variation?.settings?.color &&
-			Object.keys( variation?.settings?.color ).length,
-	} );
 	return (
 		<>
 			<ScreenHeader
@@ -47,12 +40,8 @@ function ScreenColors() {
 			/>
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 3 }>
-					{ !! colorVariations?.length && (
-						<ColorVariations variations={ colorVariations } />
-					) }
-
+					<ColorVariations />
 					<Palette />
-
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }
 						value={ style }

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -13,22 +13,13 @@ import TypographyElements from './typography-elements';
 import TypographyVariations from './variations/variations-typography';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 function ScreenTypography() {
 	const fontLibraryEnabled = useSelect(
 		( select ) =>
 			select( editorStore ).getEditorSettings().fontLibraryEnabled,
 		[]
 	);
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( {
-			property: 'typography',
-			filter: ( variation ) =>
-				variation?.settings?.typography?.fontFamilies &&
-				Object.keys( variation?.settings?.typography?.fontFamilies )
-					.length,
-		} );
 
 	return (
 		<>
@@ -40,9 +31,7 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen-typography">
 				<VStack spacing={ 6 }>
-					{ !! typographyVariations?.length && (
-						<TypographyVariations />
-					) }
+					<TypographyVariations />
 					{ ! window.__experimentalDisableFontLibrary && (
 						<VStack spacing={ 3 }>
 							{ fontLibraryEnabled && <FontFamilies /> }

diff --git a/packages/edit-site/src/components/global-styles/variations/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js
@@ -13,13 +13,25 @@ import { __ } from '@wordpress/i18n';
 import Subtitle from '../subtitle';
 import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+
+export default function ColorVariations() {
+	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
+		property: 'color',
+		filter: ( variation ) =>
+			variation?.settings?.color &&
+			Object.keys( variation?.settings?.color ).length,
+	} );
+
+	if ( ! colorVariations?.length ) {
+		return null;
+	}
 
-export default function ColorVariations( { variations } ) {
 	return (
 		<VStack spacing={ 3 }>
 			<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>
 			<Grid columns={ 3 }>
-				{ variations.map( ( variation, index ) => (
+				{ colorVariations.map( ( variation, index ) => (
 					<Variation key={ index } variation={ variation }>
 						{ () => <StylesPreviewColors /> }
 					</Variation>

diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -35,6 +35,10 @@ export default function TypographyVariations() {
 
 	const { base } = useContext( GlobalStylesContext );
 
+	if ( ! typographyVariations?.length ) {
+		return null;
+	}
+
 	/*
 	 * Filter duplicate variations based on the font families used in the variation.
 	 */