Limit access to the global styles options

WordPress · Feb 14, 2025 · 98212da · 98212da
1 parent 9491499
commit 98212da
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js
@@ -8,6 +8,8 @@ import { useViewportMatch } from '@wordpress/compose';
 import { Button } from '@wordpress/components';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
 import { seen } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -73,6 +75,15 @@ export default function GlobalStylesUIWrapper() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ section, onChangeSection ] = useSection();
 
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
+	if ( ! isBlockBasedTheme ) {
+		return null;
+	}
+
 	return (
 		<>
 			<Page

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -2,11 +2,12 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { addQueryArgs } from '@wordpress/url';
+import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -45,6 +46,11 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	);
 	const { set: setPreference } = useDispatch( preferencesStore );
 
+	const isBlockBasedTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.is_block_theme,
+		[]
+	);
+
 	const openGlobalStyles = useCallback( async () => {
 		history.navigate( addQueryArgs( path, { canvas: 'edit' } ), {
 			transition: 'canvas-mode-edit-transition',
@@ -68,6 +74,16 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const shouldShowGlobalStylesFooter =
 		!! revisionsCount && ! isLoadingRevisions;
 
+	if ( ! isBlockBasedTheme ) {
+		return (
+			<p className="edit-site-layout__area__unsupported">
+				{ __(
+					'The theme you are currently using is not compatible with the Site Editor.'
+				) }
+			</p>
+		);
+	}
+
 	return (
 		<>
 			<SidebarNavigationScreen