From 2e657089928b291d15d06e5bd602ed2eb20d74f3 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Wed, 3 Jul 2024 12:17:24 +0100
Subject: [PATCH] Global Styles: Don't display browse styles unless the theme
 has full styles available

---
 .../components/global-styles/screen-root.js   | 17 +++++-------
 .../style-variations-container.js             | 27 ++++---------------
 packages/edit-site/src/hooks/index.js         | 23 ++++++++++++++++
 3 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index 4146b32b57e3db..20ef59f74cc9fe 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -25,6 +25,7 @@ import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
 import RootMenu from './root-menu';
 import PreviewStyles from './preview-styles';
+import { useThemeStyles } from '../../hooks';
 import { unlock } from '../../lock-unlock';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
@@ -32,12 +33,9 @@ const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 function ScreenRoot() {
 	const [ customCSS ] = useGlobalStyle( 'css' );
 
-	const { hasVariations, canEditCSS } = useSelect( ( select ) => {
-		const {
-			getEntityRecord,
-			__experimentalGetCurrentGlobalStylesId,
-			__experimentalGetCurrentThemeGlobalStylesVariations,
-		} = select( coreStore );
+	const { canEditCSS } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
 
 		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
 		const globalStyles = globalStylesId
@@ -45,13 +43,12 @@ function ScreenRoot() {
 			: undefined;
 
 		return {
-			hasVariations:
-				!! __experimentalGetCurrentThemeGlobalStylesVariations()
-					?.length,
 			canEditCSS: !! globalStyles?._links?.[ 'wp:action-edit-css' ],
 		};
 	}, [] );
 
+	const themeStyles = useThemeStyles();
+
 	return (
 		<Card size="small" className="edit-site-global-styles-screen-root">
 			<CardBody>
@@ -61,7 +58,7 @@ function ScreenRoot() {
 							<PreviewStyles />
 						</CardMedia>
 					</Card>
-					{ hasVariations && (
+					{ themeStyles?.length && (
 						<ItemGroup>
 							<NavigationButtonAsItem
 								path="/variations"
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
index aba86183ebb604..f3bada6d3fa9f0 100644
--- a/packages/edit-site/src/components/global-styles/style-variations-container.js
+++ b/packages/edit-site/src/components/global-styles/style-variations-container.js
@@ -1,8 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useMemo, useState } from '@wordpress/element';
 import { __experimentalGrid as Grid } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -13,7 +11,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
-import { isVariationWithProperties } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { useThemeStyles } from '../../hooks/';
 import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
@@ -27,23 +25,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 		setCurrentUserStyles( user );
 	}, [ user ] );
 
-	const variations = useSelect( ( select ) => {
-		return select(
-			coreStore
-		).__experimentalGetCurrentThemeGlobalStylesVariations();
-	}, [] );
-
-	// Filter out variations that are color or typography variations.
-	const fullStyleVariations = variations?.filter( ( variation ) => {
-		return (
-			! isVariationWithProperties( variation, [ 'color' ] ) &&
-			! isVariationWithProperties( variation, [
-				'typography',
-				'spacing',
-			] )
-		);
-	} );
-
+	const themeStyles = useThemeStyles();
 	const themeVariations = useMemo( () => {
 		const withEmptyVariation = [
 			{
@@ -51,8 +33,9 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				settings: {},
 				styles: {},
 			},
-			...( fullStyleVariations ?? [] ),
+			...( themeStyles ?? [] ),
 		];
+
 		return [
 			...withEmptyVariation.map( ( variation ) => {
 				const blockStyles = { ...variation?.styles?.blocks } || {};
@@ -108,7 +91,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				};
 			} ),
 		];
-	}, [ fullStyleVariations, userStyles?.blocks, userStyles?.css ] );
+	}, [ themeStyles, userStyles?.blocks, userStyles?.css ] );
 
 	return (
 		<Grid
diff --git a/packages/edit-site/src/hooks/index.js b/packages/edit-site/src/hooks/index.js
index 66f1b6e17eb0c2..21b68175137c79 100644
--- a/packages/edit-site/src/hooks/index.js
+++ b/packages/edit-site/src/hooks/index.js
@@ -1,4 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
 /**
  * Internal dependencies
  */
 import './push-changes-to-global-styles';
+import { isVariationWithProperties } from './use-theme-style-variations/use-theme-style-variations-by-property';
+
+export function useThemeStyles() {
+	const variations = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeGlobalStylesVariations();
+	}, [] );
+
+	// Filter out variations that are of single property type, i.e. color or typography variations.
+	return variations?.filter( ( variation ) => {
+		return (
+			! isVariationWithProperties( variation, [ 'color' ] ) &&
+			! isVariationWithProperties( variation, [ 'typography' ] )
+		);
+	} );
+}