Global Styles: Don't display browse styles unless the theme has full …

…styles available
WordPress · Jul 5, 2024 · 2e65708 · 2e65708
1 parent 661d0fd
commit 2e65708
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 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
@@ -25,33 +25,30 @@ 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 );
 
 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
 			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
 			: 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
@@ -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,32 +25,17 @@ 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 = [
 			{
 				title: __( 'Default' ),
 				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
@@ -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' ] )
+		);
+	} );
+}