Change how empty variation is accounted for so it also picks up custo…

…m CSS
WordPress · May 19, 2024 · e5d6b08 · e5d6b08
1 parent 45cd61a
commit e5d6b08
Showing 1 changed file with 11 additions and 9 deletions.
diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js
@@ -36,15 +36,17 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 		);
 	} );
 
-	multiplePropertyVariations.unshift( {
-		title: __( 'Default' ),
-		settings: {},
-		styles: {},
-	} );
-
-	const withEmptyVariation = useMemo( () => {
+	const themeVariations = useMemo( () => {
+		const withEmptyVariation = [
+			{
+				title: __( 'Default' ),
+				settings: {},
+				styles: {},
+			},
+			...( multiplePropertyVariations ?? [] ),
+		];
 		return [
-			...( multiplePropertyVariations ?? [] ).map( ( variation ) => {
+			...withEmptyVariation.map( ( variation ) => {
 				const blockStyles = { ...variation?.styles?.blocks } || {};
 				// We need to copy any user custom CSS to the variation to prevent it being lost
 				// when switching variations.
@@ -95,7 +97,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 			className="edit-site-global-styles-style-variations-container"
 			gap={ gap }
 		>
-			{ withEmptyVariation.map( ( variation, index ) => (
+			{ themeVariations.map( ( variation, index ) => (
 				<Variation key={ index } variation={ variation }>
 					{ ( isFocused ) => (
 						<PreviewStyles