From 44b5dd0f9d98d64fe02cbcd349f03337c91557bd Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 29 Mar 2023 10:36:53 +0100
Subject: [PATCH 01/10] Unify the global block styles panel with the block
 inspector panels

---
 .../global-styles/dimensions-panel.js         |  16 +--
 .../components/global-styles/screen-block.js  | 104 ++++++++++++++-
 .../components/global-styles/screen-border.js |  35 -----
 .../components/global-styles/screen-colors.js |  23 +---
 .../components/global-styles/screen-layout.js |  14 +-
 .../screen-typography-element.js              |   4 +-
 .../global-styles/screen-typography.js        | 123 +++++++-----------
 .../global-styles/typography-panel.js         |  27 ++--
 .../src/components/global-styles/ui.js        |  87 +++++++------
 9 files changed, 216 insertions(+), 217 deletions(-)
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-border.js

diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
index 0d43d71cec3d1..a7b851f89c9b9 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -26,19 +26,13 @@ const DEFAULT_CONTROLS = {
 	childLayout: false,
 };
 
-export default function DimensionsPanel( { name, variation = '' } ) {
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+export default function DimensionsPanel() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
-	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
+	const [ rawSettings, setSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
 
 	// These intermediary objects are needed because the "layout" property is stored
 	// in settings rather than styles.
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index 9e9d585e88d31..0cdcc9d5c08b3 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -2,25 +2,115 @@
  * WordPress dependencies
  */
 import { getBlockType } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import ContextMenu from './context-menu';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
+import { unlock } from '../../private-apis';
 
-function ScreenBlock( { name } ) {
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useHasBorderPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+	useHasColorPanel,
+	useGlobalStyle,
+	BorderPanel: StylesBorderPanel,
+	ColorPanel: StylesColorPanel,
+	TypographyPanel: StylesTypographyPanel,
+	DimensionsPanel: StylesDimensionsPanel,
+} = unlock( blockEditorPrivateApis );
+
+function ScreenBlock( { name, variation } ) {
+	let prefixParts = [];
+	if ( variation ) {
+		prefixParts = [ 'variations', variation ].concat( prefixParts );
+	}
+	const prefix = prefixParts.join( '.' );
+
+	const [ style ] = useGlobalStyle( prefix, name, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
+	const settings = useSettingsForBlockElement( rawSettings, name );
 	const blockType = getBlockType( name );
+	const hasTypographyPanel = useHasTypographyPanel( settings );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasBorderPanel = useHasBorderPanel( settings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+
+	// These intermediary objects are needed because the "layout" property is stored
+	// in settings rather than styles.
+	const inheritedStyleWithLayout = useMemo( () => {
+		return {
+			...inheritedStyle,
+			layout: settings.layout,
+		};
+	}, [ inheritedStyle, settings.layout ] );
+	const styleWithLayout = useMemo( () => {
+		return {
+			...style,
+			layout: settings.layout,
+		};
+	}, [ style, settings.layout ] );
+	const onChangeDimensions = ( newStyle ) => {
+		const updatedStyle = { ...newStyle };
+		delete updatedStyle.layout;
+		setStyle( updatedStyle );
+
+		if ( newStyle.layout !== settings.layout ) {
+			setSettings( {
+				...rawSettings,
+				layout: newStyle.layout,
+			} );
+		}
+	};
 
 	return (
 		<>
 			<ScreenHeader title={ blockType.title } />
-			<BlockPreviewPanel name={ name } />
-			<ContextMenu
-				parentMenu={ '/blocks/' + encodeURIComponent( name ) }
-				name={ name }
-			/>
+			<BlockPreviewPanel name={ name } variation={ variation } />
+			{ hasTypographyPanel && (
+				<StylesTypographyPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
+			{ hasColorPanel && (
+				<StylesColorPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
+			{ hasBorderPanel && (
+				<StylesBorderPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
+			{ hasDimensionsPanel && (
+				<StylesDimensionsPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ onChangeDimensions }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-border.js b/packages/edit-site/src/components/global-styles/screen-border.js
deleted file mode 100644
index f700f2676448f..0000000000000
--- a/packages/edit-site/src/components/global-styles/screen-border.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import BorderPanel from './border-panel';
-import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
-import { unlock } from '../../private-apis';
-
-const { useHasBorderPanel, useGlobalSetting, useSettingsForBlockElement } =
-	unlock( blockEditorPrivateApis );
-
-function ScreenBorder( { name, variation = '' } ) {
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-	const hasBorderPanel = useHasBorderPanel( settings );
-	const variationClassName = getVariationClassName( variation );
-	return (
-		<>
-			<ScreenHeader title={ __( 'Border' ) } />
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
-			{ hasBorderPanel && (
-				<BorderPanel name={ name } variation={ variation } />
-			) }
-		</>
-	);
-}
-
-export default ScreenBorder;
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 1624bdefc7ae9..4f8a95d540fb3 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -11,7 +11,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import Palette from './palette';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 
 const {
@@ -21,21 +20,13 @@ const {
 	ColorPanel: StylesColorPanel,
 } = unlock( blockEditorPrivateApis );
 
-function ScreenColors( { name, variation = '' } ) {
-	const variationClassName = getVariationClassName( variation );
-
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
+function ScreenColors() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
 
 	return (
 		<>
@@ -46,11 +37,11 @@ function ScreenColors( { name, variation = '' } ) {
 				) }
 			/>
 
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			<BlockPreviewPanel />
 
 			<div className="edit-site-global-styles-screen-colors">
 				<VStack spacing={ 10 }>
-					<Palette name={ name } />
+					<Palette />
 
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }
diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js
index 02d28d3c9c6da..66626fa82e705 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -10,24 +10,20 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import DimensionsPanel from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 
 const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
 	unlock( blockEditorPrivateApis );
 
-function ScreenLayout( { name, variation = '' } ) {
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
+function ScreenLayout() {
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
-			{ hasDimensionsPanel && (
-				<DimensionsPanel name={ name } variation={ variation } />
-			) }
+			<BlockPreviewPanel />
+			{ hasDimensionsPanel && <DimensionsPanel /> }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js
index f28bf2bfe1706..c5e4239930649 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography-element.js
@@ -39,7 +39,7 @@ const elements = {
 	},
 };
 
-function ScreenTypographyElement( { name, element } ) {
+function ScreenTypographyElement( { element } ) {
 	const [ headingLevel, setHeadingLevel ] = useState( 'heading' );
 
 	return (
@@ -50,7 +50,6 @@ function ScreenTypographyElement( { name, element } ) {
 			/>
 			<Spacer marginX={ 4 }>
 				<TypographyPreview
-					name={ name }
 					element={ element }
 					headingLevel={ headingLevel }
 				/>
@@ -100,7 +99,6 @@ function ScreenTypographyElement( { name, element } ) {
 				</Spacer>
 			) }
 			<TypographyPanel
-				name={ name }
 				element={ element }
 				headingLevel={ headingLevel }
 			/>
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 239b1e05950c2..bfbff7f180ff3 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -16,15 +16,12 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import Subtitle from './subtitle';
-import TypographyPanel from './typography-panel';
 import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
 import { unlock } from '../../private-apis';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
-function Item( { name, parentMenu, element, label } ) {
-	const hasSupport = ! name;
+function Item( { parentMenu, element, label } ) {
 	const prefix =
 		element === 'text' || ! element ? '' : `elements.${ element }.`;
 	const extraStyles =
@@ -33,32 +30,15 @@ function Item( { name, parentMenu, element, label } ) {
 					textDecoration: 'underline',
 			  }
 			: {};
-	const [ fontFamily ] = useGlobalStyle(
-		prefix + 'typography.fontFamily',
-		name
-	);
-	const [ fontStyle ] = useGlobalStyle(
-		prefix + 'typography.fontStyle',
-		name
-	);
-	const [ fontWeight ] = useGlobalStyle(
-		prefix + 'typography.fontWeight',
-		name
-	);
+	const [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' );
+	const [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' );
+	const [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' );
 	const [ letterSpacing ] = useGlobalStyle(
-		prefix + 'typography.letterSpacing',
-		name
+		prefix + 'typography.letterSpacing'
 	);
-	const [ backgroundColor ] = useGlobalStyle(
-		prefix + 'color.background',
-		name
-	);
-	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name );
-	const [ color ] = useGlobalStyle( prefix + 'color.text', name );
-
-	if ( ! hasSupport ) {
-		return null;
-	}
+	const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' );
+	const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' );
+	const [ color ] = useGlobalStyle( prefix + 'color.text' );
 
 	const navigationButtonLabel = sprintf(
 		// translators: %s: is a subset of Typography, e.g., 'text' or 'links'.
@@ -92,9 +72,9 @@ function Item( { name, parentMenu, element, label } ) {
 	);
 }
 
-function ScreenTypography( { name, variation = '' } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
-	const variationClassName = getVariationClassName( variation );
+function ScreenTypography() {
+	const parentMenu = '';
+
 	return (
 		<>
 			<ScreenHeader
@@ -104,55 +84,40 @@ function ScreenTypography( { name, variation = '' } ) {
 				) }
 			/>
 
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
+			<BlockPreviewPanel />
 
-			{ ! name && (
-				<div className="edit-site-global-styles-screen-typography">
-					<VStack spacing={ 3 }>
-						<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
-						<ItemGroup isBordered isSeparated>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="text"
-								label={ __( 'Text' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="link"
-								label={ __( 'Links' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="heading"
-								label={ __( 'Headings' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="caption"
-								label={ __( 'Captions' ) }
-							/>
-							<Item
-								name={ name }
-								parentMenu={ parentMenu }
-								element="button"
-								label={ __( 'Buttons' ) }
-							/>
-						</ItemGroup>
-					</VStack>
-				</div>
-			) }
-			{ /* No typography elements support yet for blocks. */ }
-			{ !! name && (
-				<TypographyPanel
-					name={ name }
-					variation={ variation }
-					element="text"
-				/>
-			) }
+			<div className="edit-site-global-styles-screen-typography">
+				<VStack spacing={ 3 }>
+					<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
+					<ItemGroup isBordered isSeparated>
+						<Item
+							parentMenu={ parentMenu }
+							element="text"
+							label={ __( 'Text' ) }
+						/>
+						<Item
+							parentMenu={ parentMenu }
+							element="link"
+							label={ __( 'Links' ) }
+						/>
+						<Item
+							parentMenu={ parentMenu }
+							element="heading"
+							label={ __( 'Headings' ) }
+						/>
+						<Item
+							parentMenu={ parentMenu }
+							element="caption"
+							label={ __( 'Captions' ) }
+						/>
+						<Item
+							parentMenu={ parentMenu }
+							element="button"
+							label={ __( 'Buttons' ) }
+						/>
+					</ItemGroup>
+				</VStack>
+			</div>
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index ebdc59484f182..3bc2ccd107aca 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -15,32 +15,29 @@ const {
 	TypographyPanel: StylesTypographyPanel,
 } = unlock( blockEditorPrivateApis );
 
-export default function TypographyPanel( {
-	name,
-	element,
-	headingLevel,
-	variation = '',
-} ) {
+export default function TypographyPanel( { element, headingLevel } ) {
 	let prefixParts = [];
 	if ( element === 'heading' ) {
 		prefixParts = prefixParts.concat( [ 'elements', headingLevel ] );
 	} else if ( element && element !== 'text' ) {
 		prefixParts = prefixParts.concat( [ 'elements', element ] );
 	}
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
 	const prefix = prefixParts.join( '.' );
 
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
+	const [ style ] = useGlobalStyle( prefix, undefined, 'user', false );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle(
+		prefix,
+		undefined,
+		'all',
+		{
+			shouldDecodeEncode: false,
+		}
+	);
+	const [ rawSettings ] = useGlobalSetting( '' );
 	const usedElement = element === 'heading' ? headingLevel : element;
 	const settings = useSettingsForBlockElement(
 		rawSettings,
-		name,
+		undefined,
 		usedElement
 	);
 
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index a536014180a27..676a53171e6df 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -37,7 +37,6 @@ import ScreenColorPalette from './screen-color-palette';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
 import { ScreenVariation } from './screen-variations';
-import ScreenBorder from './screen-border';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import { unlock } from '../../private-apis';
@@ -165,43 +164,51 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 
 	return (
 		<>
-			<GlobalStylesNavigationScreen path={ parentMenu + '/typography' }>
-				<ScreenTypography name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/text' }
-			>
-				<ScreenTypographyElement name={ name } element="text" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/link' }
-			>
-				<ScreenTypographyElement name={ name } element="link" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/heading' }
-			>
-				<ScreenTypographyElement name={ name } element="heading" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/caption' }
-			>
-				<ScreenTypographyElement name={ name } element="caption" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen
-				path={ parentMenu + '/typography/button' }
-			>
-				<ScreenTypographyElement name={ name } element="button" />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/colors' }>
-				<ScreenColors name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
+			{ ! name && ! variation && (
+				<>
+					<GlobalStylesNavigationScreen
+						path={ parentMenu + '/typography' }
+					>
+						<ScreenTypography />
+					</GlobalStylesNavigationScreen>
+
+					<GlobalStylesNavigationScreen
+						path={ parentMenu + '/typography/text' }
+					>
+						<ScreenTypographyElement element="text" />
+					</GlobalStylesNavigationScreen>
+
+					<GlobalStylesNavigationScreen
+						path={ parentMenu + '/typography/link' }
+					>
+						<ScreenTypographyElement element="link" />
+					</GlobalStylesNavigationScreen>
+
+					<GlobalStylesNavigationScreen
+						path={ parentMenu + '/typography/heading' }
+					>
+						<ScreenTypographyElement element="heading" />
+					</GlobalStylesNavigationScreen>
+
+					<GlobalStylesNavigationScreen
+						path={ parentMenu + '/typography/caption' }
+					>
+						<ScreenTypographyElement element="caption" />
+					</GlobalStylesNavigationScreen>
+
+					<GlobalStylesNavigationScreen
+						path={ parentMenu + '/typography/button' }
+					>
+						<ScreenTypographyElement element="button" />
+					</GlobalStylesNavigationScreen>
+
+					<GlobalStylesNavigationScreen
+						path={ parentMenu + '/colors' }
+					>
+						<ScreenColors />
+					</GlobalStylesNavigationScreen>
+				</>
+			) }
 
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/palette' }
@@ -213,10 +220,6 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenFilters name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/border' }>
-				<ScreenBorder name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path={ parentMenu + '/effects' }>
 				<ScreenEffects name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>

From 7dae142064f18b3294bc1959d0b36eff79f82b2c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 7 Apr 2023 12:24:04 +0100
Subject: [PATCH 02/10] Add effects and filters screens to the block screen

---
 .../components/global-styles/effects-panel.js | 40 -------------------
 .../components/global-styles/filters-panel.js | 39 ------------------
 .../components/global-styles/screen-block.js  | 30 ++++++++++++++
 .../global-styles/screen-effects.js           | 35 ----------------
 .../global-styles/screen-filters.js           | 27 -------------
 .../src/components/global-styles/ui.js        | 10 -----
 6 files changed, 30 insertions(+), 151 deletions(-)
 delete mode 100644 packages/edit-site/src/components/global-styles/effects-panel.js
 delete mode 100644 packages/edit-site/src/components/global-styles/filters-panel.js
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-effects.js
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-filters.js

diff --git a/packages/edit-site/src/components/global-styles/effects-panel.js b/packages/edit-site/src/components/global-styles/effects-panel.js
deleted file mode 100644
index dfba278139fc0..0000000000000
--- a/packages/edit-site/src/components/global-styles/effects-panel.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-
-const {
-	useGlobalSetting,
-	useGlobalStyle,
-	EffectsPanel: StylesEffectsPanel,
-	useSettingsForBlockElement,
-} = unlock( blockEditorPrivateApis );
-
-export default function EffectsPanel( { name, variation = '' } ) {
-	let prefixParts = [];
-	if ( variation ) {
-		prefixParts = [ 'variations', variation ].concat( prefixParts );
-	}
-	const prefix = prefixParts.join( '.' );
-
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-
-	return (
-		<StylesEffectsPanel
-			inheritedValue={ inheritedStyle }
-			value={ style }
-			onChange={ setStyle }
-			settings={ settings }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/global-styles/filters-panel.js b/packages/edit-site/src/components/global-styles/filters-panel.js
deleted file mode 100644
index f62d6901073f3..0000000000000
--- a/packages/edit-site/src/components/global-styles/filters-panel.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-const {
-	useGlobalStyle,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-	FiltersPanel: StylesFiltersPanel,
-} = unlock( blockEditorPrivateApis );
-
-export default function FiltersPanel( { name } ) {
-	const [ style ] = useGlobalStyle( '', name, 'user', false );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', name, 'all', {
-		shouldDecodeEncode: false,
-	} );
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-
-	return (
-		<StylesFiltersPanel
-			inheritedValue={ inheritedStyle }
-			value={ style }
-			onChange={ setStyle }
-			settings={ {
-				...settings,
-				color: {
-					...settings.color,
-					customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
-				},
-			} }
-		/>
-	);
-}
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index 0cdcc9d5c08b3..ec387ef315612 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -19,11 +19,15 @@ const {
 	useGlobalSetting,
 	useSettingsForBlockElement,
 	useHasColorPanel,
+	useHasEffectsPanel,
+	useHasFiltersPanel,
 	useGlobalStyle,
 	BorderPanel: StylesBorderPanel,
 	ColorPanel: StylesColorPanel,
 	TypographyPanel: StylesTypographyPanel,
 	DimensionsPanel: StylesDimensionsPanel,
+	EffectsPanel: StylesEffectsPanel,
+	FiltersPanel: StylesFiltersPanel,
 } = unlock( blockEditorPrivateApis );
 
 function ScreenBlock( { name, variation } ) {
@@ -46,6 +50,8 @@ function ScreenBlock( { name, variation } ) {
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasEffectsPanel = useHasEffectsPanel( settings );
+	const hasFiltersPanel = useHasFiltersPanel( settings );
 
 	// These intermediary objects are needed because the "layout" property is stored
 	// in settings rather than styles.
@@ -111,6 +117,30 @@ function ScreenBlock( { name, variation } ) {
 					includeLayoutControls
 				/>
 			) }
+			{ hasEffectsPanel && (
+				<StylesEffectsPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ onChangeDimensions }
+					settings={ settings }
+					includeLayoutControls
+				/>
+			) }
+			{ hasFiltersPanel && (
+				<StylesFiltersPanel
+					inheritedValue={ inheritedStyleWithLayout }
+					value={ styleWithLayout }
+					onChange={ onChangeDimensions }
+					settings={ {
+						...settings,
+						color: {
+							...settings.color,
+							customDuotone: false, //TO FIX: Custom duotone only works on the block level right now
+						},
+					} }
+					includeLayoutControls
+				/>
+			) }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-effects.js b/packages/edit-site/src/components/global-styles/screen-effects.js
deleted file mode 100644
index cc6b4c3ece0f7..0000000000000
--- a/packages/edit-site/src/components/global-styles/screen-effects.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-import BlockPreviewPanel from './block-preview-panel';
-import { getVariationClassName } from './utils';
-import { unlock } from '../../private-apis';
-import EffectsPanel from './effects-panel';
-
-const { useGlobalSetting, useSettingsForBlockElement, useHasEffectsPanel } =
-	unlock( blockEditorPrivateApis );
-
-function ScreenEffects( { name, variation = '' } ) {
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-	const variationClassName = getVariationClassName( variation );
-	const hasEffectsPanel = useHasEffectsPanel( settings );
-	return (
-		<>
-			<ScreenHeader title={ __( 'Effects' ) } />
-			<BlockPreviewPanel name={ name } variation={ variationClassName } />
-			{ hasEffectsPanel && (
-				<EffectsPanel name={ name } variation={ variation } />
-			) }
-		</>
-	);
-}
-
-export default ScreenEffects;
diff --git a/packages/edit-site/src/components/global-styles/screen-filters.js b/packages/edit-site/src/components/global-styles/screen-filters.js
deleted file mode 100644
index e9ba07d935370..0000000000000
--- a/packages/edit-site/src/components/global-styles/screen-filters.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import FiltersPanel from './filters-panel';
-import BlockPreviewPanel from './block-preview-panel';
-
-/**
- * Internal dependencies
- */
-import ScreenHeader from './header';
-
-function ScreenFilters( { name } ) {
-	return (
-		<>
-			<ScreenHeader title={ __( 'Filters' ) } />
-			<BlockPreviewPanel name={ name } />
-			<FiltersPanel name={ name } />
-		</>
-	);
-}
-
-export default ScreenFilters;
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 676a53171e6df..4eff5dd46514d 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -31,7 +31,6 @@ import {
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
-import ScreenFilters from './screen-filters';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenLayout from './screen-layout';
@@ -40,7 +39,6 @@ import { ScreenVariation } from './screen-variations';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import { unlock } from '../../private-apis';
-import ScreenEffects from './screen-effects';
 import { store as editSiteStore } from '../../store';
 
 const SLOT_FILL_NAME = 'GlobalStylesMenu';
@@ -216,14 +214,6 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenColorPalette name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/filters' }>
-				<ScreenFilters name={ name } />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path={ parentMenu + '/effects' }>
-				<ScreenEffects name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>

From 22e096f23cdf77eea1908d63802b5d5be0bfb02b Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 7 Apr 2023 12:25:12 +0100
Subject: [PATCH 03/10] Reorder like the block inspector

---
 .../components/global-styles/screen-block.js  | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index ec387ef315612..b981728da9b3a 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -84,14 +84,6 @@ function ScreenBlock( { name, variation } ) {
 		<>
 			<ScreenHeader title={ blockType.title } />
 			<BlockPreviewPanel name={ name } variation={ variation } />
-			{ hasTypographyPanel && (
-				<StylesTypographyPanel
-					inheritedValue={ inheritedStyle }
-					value={ style }
-					onChange={ setStyle }
-					settings={ settings }
-				/>
-			) }
 			{ hasColorPanel && (
 				<StylesColorPanel
 					inheritedValue={ inheritedStyle }
@@ -100,8 +92,8 @@ function ScreenBlock( { name, variation } ) {
 					settings={ settings }
 				/>
 			) }
-			{ hasBorderPanel && (
-				<StylesBorderPanel
+			{ hasTypographyPanel && (
+				<StylesTypographyPanel
 					inheritedValue={ inheritedStyle }
 					value={ style }
 					onChange={ setStyle }
@@ -117,6 +109,14 @@ function ScreenBlock( { name, variation } ) {
 					includeLayoutControls
 				/>
 			) }
+			{ hasBorderPanel && (
+				<StylesBorderPanel
+					inheritedValue={ inheritedStyle }
+					value={ style }
+					onChange={ setStyle }
+					settings={ settings }
+				/>
+			) }
 			{ hasEffectsPanel && (
 				<StylesEffectsPanel
 					inheritedValue={ inheritedStyleWithLayout }

From cb033ee9196c47f76142a5d3f51de936e5a74f83 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 2 May 2023 08:53:20 +0100
Subject: [PATCH 04/10] Move the Custom CSS panel to the block screen

---
 .../components/global-styles/custom-css.js    | 32 --------------
 .../components/global-styles/screen-block.js  | 37 ++++++++++++++++
 .../components/global-styles/screen-css.js    | 42 +++++++++----------
 .../src/components/global-styles/ui.js        |  8 ++--
 4 files changed, 62 insertions(+), 57 deletions(-)
 delete mode 100644 packages/edit-site/src/components/global-styles/custom-css.js

diff --git a/packages/edit-site/src/components/global-styles/custom-css.js b/packages/edit-site/src/components/global-styles/custom-css.js
deleted file mode 100644
index 897c17633700e..0000000000000
--- a/packages/edit-site/src/components/global-styles/custom-css.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../private-apis';
-
-const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
-	blockEditorPrivateApis
-);
-
-function CustomCSSControl( { blockName } ) {
-	const [ style ] = useGlobalStyle( '', blockName, 'user', {
-		shouldDecodeEncode: false,
-	} );
-	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', blockName, 'all', {
-		shouldDecodeEncode: false,
-	} );
-
-	return (
-		<StylesAdvancedPanel
-			value={ style }
-			onChange={ setStyle }
-			inheritedValue={ inheritedStyle }
-		/>
-	);
-}
-
-export default CustomCSSControl;
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index b981728da9b3a..582fedaa137de 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -4,6 +4,10 @@
 import { getBlockType } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { PanelBody } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -28,6 +32,7 @@ const {
 	DimensionsPanel: StylesDimensionsPanel,
 	EffectsPanel: StylesEffectsPanel,
 	FiltersPanel: StylesFiltersPanel,
+	AdvancedPanel: StylesAdvancedPanel,
 } = unlock( blockEditorPrivateApis );
 
 function ScreenBlock( { name, variation } ) {
@@ -52,6 +57,20 @@ function ScreenBlock( { name, variation } ) {
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasEffectsPanel = useHasEffectsPanel( settings );
 	const hasFiltersPanel = useHasFiltersPanel( settings );
+	const { canEditCSS } = useSelect( ( select ) => {
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+
+		return {
+			canEditCSS:
+				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
+		};
+	}, [] );
 
 	// These intermediary objects are needed because the "layout" property is stored
 	// in settings rather than styles.
@@ -141,6 +160,24 @@ function ScreenBlock( { name, variation } ) {
 					includeLayoutControls
 				/>
 			) }
+			{ canEditCSS && (
+				<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>
+					<p>
+						{ sprintf(
+							// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+							__(
+								'Add your own CSS to customize the appearance of the %s block.'
+							),
+							blockType?.title
+						) }
+					</p>
+					<StylesAdvancedPanel
+						value={ style }
+						onChange={ setStyle }
+						inheritedValue={ inheritedStyle }
+					/>
+				</PanelBody>
+			) }
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-css.js b/packages/edit-site/src/components/global-styles/screen-css.js
index 779c64c86c4f5..50aae836ffa1c 100644
--- a/packages/edit-site/src/components/global-styles/screen-css.js
+++ b/packages/edit-site/src/components/global-styles/screen-css.js
@@ -1,34 +1,30 @@
 /**
  * WordPress dependencies
  */
-import { sprintf, __ } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { ExternalLink } from '@wordpress/components';
-import { getBlockType } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
+import { unlock } from '../../private-apis';
 import ScreenHeader from './header';
-import CustomCSSControl from './custom-css';
 
-function ScreenCSS( { name } ) {
-	// If name is defined, we are customizing CSS at the block level.
-	// Display the block title in the description.
-	const blockType = getBlockType( name );
-	const title = blockType?.title;
+const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
+	blockEditorPrivateApis
+);
 
-	const description =
-		title !== undefined
-			? sprintf(
-					// translators: %s: is the name of a block e.g., 'Image' or 'Table'.
-					__(
-						'Add your own CSS to customize the appearance of the %s block.'
-					),
-					title
-			  )
-			: __(
-					'Add your own CSS to customize the appearance and layout of your site.'
-			  );
+function ScreenCSS() {
+	const description = __(
+		'Add your own CSS to customize the appearance and layout of your site.'
+	);
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
+		shouldDecodeEncode: false,
+	} );
 
 	return (
 		<>
@@ -47,7 +43,11 @@ function ScreenCSS( { name } ) {
 				}
 			/>
 			<div className="edit-site-global-styles-screen-css">
-				<CustomCSSControl blockName={ name } />
+				<StylesAdvancedPanel
+					value={ style }
+					onChange={ setStyle }
+					inheritedValue={ inheritedStyle }
+				/>
 			</div>
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 4eff5dd46514d..2b530fdcecc80 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -205,6 +205,10 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 					>
 						<ScreenColors />
 					</GlobalStylesNavigationScreen>
+
+					<GlobalStylesNavigationScreen path={ parentMenu + '/css' }>
+						<ScreenCSS />
+					</GlobalStylesNavigationScreen>
 				</>
 			) }
 
@@ -218,10 +222,6 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 				<ScreenLayout name={ name } variation={ variation } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/css' }>
-				<ScreenCSS name={ name } />
-			</GlobalStylesNavigationScreen>
-
 			{ !! blockStyleVariations?.length && (
 				<BlockStylesNavigationScreens
 					parentMenu={ parentMenu }

From 3afd7e404beb889e77160365cd082813af767899 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 2 May 2023 09:27:33 +0100
Subject: [PATCH 05/10] Restore block variations

---
 .../global-styles/block-preview-panel.js      |   2 +-
 .../components/global-styles/context-menu.js  | 175 ------------------
 .../src/components/global-styles/root-menu.js | 106 +++++++++++
 .../global-styles/screen-block-list.js        |   4 +-
 .../components/global-styles/screen-block.js  |  24 ++-
 .../components/global-styles/screen-root.js   |   4 +-
 .../global-styles/screen-variations.js        |  46 -----
 .../src/components/global-styles/ui.js        |   3 +-
 .../global-styles/variations-panel.js         |  29 +--
 9 files changed, 137 insertions(+), 256 deletions(-)
 delete mode 100644 packages/edit-site/src/components/global-styles/context-menu.js
 create mode 100644 packages/edit-site/src/components/global-styles/root-menu.js
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-variations.js

diff --git a/packages/edit-site/src/components/global-styles/block-preview-panel.js b/packages/edit-site/src/components/global-styles/block-preview-panel.js
index 9ff5a47f77f08..584df056ddee0 100644
--- a/packages/edit-site/src/components/global-styles/block-preview-panel.js
+++ b/packages/edit-site/src/components/global-styles/block-preview-panel.js
@@ -11,7 +11,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => {
 		...blockExample,
 		attributes: {
 			...blockExample?.attributes,
-			className: variation,
+			className: 'is-style-' + variation,
 		},
 	};
 	const blocks =
diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
deleted file mode 100644
index dca571881cd4e..0000000000000
--- a/packages/edit-site/src/components/global-styles/context-menu.js
+++ /dev/null
@@ -1,175 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
-	FlexItem,
-	CardBody,
-	CardDivider,
-} from '@wordpress/components';
-import {
-	typography,
-	border,
-	filter,
-	shadow,
-	color,
-	layout,
-	chevronLeft,
-	chevronRight,
-} from '@wordpress/icons';
-import { isRTL, __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { useHasVariationsPanel } from './variations-panel';
-import { NavigationButtonAsItem } from './navigation-button';
-import { IconWithCurrentColor } from './icon-with-current-color';
-import { ScreenVariations } from './screen-variations';
-import { unlock } from '../../private-apis';
-
-const {
-	useHasDimensionsPanel,
-	useHasTypographyPanel,
-	useHasBorderPanel,
-	useHasColorPanel,
-	useHasEffectsPanel,
-	useHasFiltersPanel,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-} = unlock( blockEditorPrivateApis );
-
-function ContextMenu( { name, parentMenu = '' } ) {
-	const [ rawSettings ] = useGlobalSetting( '', name );
-	const settings = useSettingsForBlockElement( rawSettings, name );
-	const hasTypographyPanel = useHasTypographyPanel( settings );
-	const hasColorPanel = useHasColorPanel( settings );
-	const hasBorderPanel = useHasBorderPanel( settings );
-	const hasEffectsPanel = useHasEffectsPanel( settings );
-	const hasFilterPanel = useHasFiltersPanel( settings );
-	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	const hasLayoutPanel = hasDimensionsPanel;
-	const hasVariationsPanel = useHasVariationsPanel( name, parentMenu );
-
-	const { canEditCSS } = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-
-		return {
-			canEditCSS:
-				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
-		};
-	}, [] );
-
-	const isBlocksPanel =
-		parentMenu.includes( 'blocks' ) &&
-		! parentMenu.includes( 'variations' );
-
-	return (
-		<>
-			<ItemGroup>
-				{ hasTypographyPanel && (
-					<NavigationButtonAsItem
-						icon={ typography }
-						path={ parentMenu + '/typography' }
-						aria-label={ __( 'Typography styles' ) }
-					>
-						{ __( 'Typography' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasColorPanel && (
-					<NavigationButtonAsItem
-						icon={ color }
-						path={ parentMenu + '/colors' }
-						aria-label={ __( 'Colors styles' ) }
-					>
-						{ __( 'Colors' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasBorderPanel && (
-					<NavigationButtonAsItem
-						icon={ border }
-						path={ parentMenu + '/border' }
-						aria-label={ __( 'Border' ) }
-					>
-						{ __( 'Border' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasEffectsPanel && (
-					<NavigationButtonAsItem
-						icon={ shadow }
-						path={ parentMenu + '/effects' }
-						aria-label={ __( 'Effects' ) }
-					>
-						{ __( 'Effects' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasFilterPanel && (
-					<NavigationButtonAsItem
-						icon={ filter }
-						path={ parentMenu + '/filters' }
-						aria-label={ __( 'Filters styles' ) }
-					>
-						{ __( 'Filters' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasLayoutPanel && (
-					<NavigationButtonAsItem
-						icon={ layout }
-						path={ parentMenu + '/layout' }
-						aria-label={ __( 'Layout styles' ) }
-					>
-						{ __( 'Layout' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasVariationsPanel && (
-					<ScreenVariations name={ name } path={ parentMenu } />
-				) }
-				{ isBlocksPanel && canEditCSS && (
-					<>
-						<CardDivider />
-						<CardBody>
-							<Spacer as="p" paddingTop={ 2 } marginBottom={ 4 }>
-								{ __(
-									'Add your own CSS to customize the block appearance.'
-								) }
-							</Spacer>
-							<ItemGroup>
-								<NavigationButtonAsItem
-									path={ parentMenu + '/css' }
-									aria-label={ __( 'Additional block CSS' ) }
-								>
-									<HStack justify="space-between">
-										<FlexItem>
-											{ __( 'Additional block CSS' ) }
-										</FlexItem>
-										<IconWithCurrentColor
-											icon={
-												isRTL()
-													? chevronLeft
-													: chevronRight
-											}
-										/>
-									</HStack>
-								</NavigationButtonAsItem>
-							</ItemGroup>
-						</CardBody>
-						<CardDivider />
-					</>
-				) }
-			</ItemGroup>
-		</>
-	);
-}
-
-export default ContextMenu;
diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
new file mode 100644
index 0000000000000..8a42d1072e74c
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import {
+	typography,
+	border,
+	filter,
+	shadow,
+	color,
+	layout,
+} from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationButtonAsItem } from './navigation-button';
+import { unlock } from '../../private-apis';
+
+const {
+	useHasDimensionsPanel,
+	useHasTypographyPanel,
+	useHasBorderPanel,
+	useHasColorPanel,
+	useHasEffectsPanel,
+	useHasFiltersPanel,
+	useGlobalSetting,
+	useSettingsForBlockElement,
+} = unlock( blockEditorPrivateApis );
+
+function RootMenu() {
+	const [ rawSettings ] = useGlobalSetting( '' );
+	const settings = useSettingsForBlockElement( rawSettings );
+	const hasTypographyPanel = useHasTypographyPanel( settings );
+	const hasColorPanel = useHasColorPanel( settings );
+	const hasBorderPanel = useHasBorderPanel( settings );
+	const hasEffectsPanel = useHasEffectsPanel( settings );
+	const hasFilterPanel = useHasFiltersPanel( settings );
+	const hasDimensionsPanel = useHasDimensionsPanel( settings );
+	const hasLayoutPanel = hasDimensionsPanel;
+
+	return (
+		<>
+			<ItemGroup>
+				{ hasTypographyPanel && (
+					<NavigationButtonAsItem
+						icon={ typography }
+						path={ '/typography' }
+						aria-label={ __( 'Typography styles' ) }
+					>
+						{ __( 'Typography' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasColorPanel && (
+					<NavigationButtonAsItem
+						icon={ color }
+						path={ '/colors' }
+						aria-label={ __( 'Colors styles' ) }
+					>
+						{ __( 'Colors' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasBorderPanel && (
+					<NavigationButtonAsItem
+						icon={ border }
+						path={ '/border' }
+						aria-label={ __( 'Border' ) }
+					>
+						{ __( 'Border' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasEffectsPanel && (
+					<NavigationButtonAsItem
+						icon={ shadow }
+						path={ '/effects' }
+						aria-label={ __( 'Effects' ) }
+					>
+						{ __( 'Effects' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasFilterPanel && (
+					<NavigationButtonAsItem
+						icon={ filter }
+						path={ '/filters' }
+						aria-label={ __( 'Filters styles' ) }
+					>
+						{ __( 'Filters' ) }
+					</NavigationButtonAsItem>
+				) }
+				{ hasLayoutPanel && (
+					<NavigationButtonAsItem
+						icon={ layout }
+						path={ '/layout' }
+						aria-label={ __( 'Layout styles' ) }
+					>
+						{ __( 'Layout' ) }
+					</NavigationButtonAsItem>
+				) }
+			</ItemGroup>
+		</>
+	);
+}
+
+export default RootMenu;
diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
index b929339860b2a..88c826c42e0d0 100644
--- a/packages/edit-site/src/components/global-styles/screen-block-list.js
+++ b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -20,7 +20,7 @@ import { speak } from '@wordpress/a11y';
 /**
  * Internal dependencies
  */
-import { useHasVariationsPanel } from './variations-panel';
+import { useBlockVariations } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import { unlock } from '../../private-apis';
@@ -65,7 +65,7 @@ export function useBlockHasGlobalStyles( blockName ) {
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
-	const hasVariationsPanel = useHasVariationsPanel( blockName );
+	const hasVariationsPanel = !! useBlockVariations( blockName )?.length;
 	const hasGlobalStyles =
 		hasTypographyPanel ||
 		hasColorPanel ||
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index 582fedaa137de..c985cf6d15955 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -6,7 +6,10 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { PanelBody } from '@wordpress/components';
+import {
+	PanelBody,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -15,6 +18,8 @@ import { __, sprintf } from '@wordpress/i18n';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
 import { unlock } from '../../private-apis';
+import Subtitle from './subtitle';
+import { useBlockVariations, VariationsPanel } from './variations-panel';
 
 const {
 	useHasDimensionsPanel,
@@ -51,12 +56,14 @@ function ScreenBlock( { name, variation } ) {
 	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 	const blockType = getBlockType( name );
+	const blockVariations = useBlockVariations( name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasEffectsPanel = useHasEffectsPanel( settings );
 	const hasFiltersPanel = useHasFiltersPanel( settings );
+	const hasVariationsPanel = blockVariations?.length && ! variation;
 	const { canEditCSS } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
 			select( coreStore );
@@ -71,6 +78,9 @@ function ScreenBlock( { name, variation } ) {
 				!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,
 		};
 	}, [] );
+	const currentBlockStyle = variation
+		? blockVariations.find( ( s ) => s.name === variation )
+		: null;
 
 	// These intermediary objects are needed because the "layout" property is stored
 	// in settings rather than styles.
@@ -101,8 +111,18 @@ function ScreenBlock( { name, variation } ) {
 
 	return (
 		<>
-			<ScreenHeader title={ blockType.title } />
+			<ScreenHeader
+				title={ variation ? currentBlockStyle.label : blockType.title }
+			/>
 			<BlockPreviewPanel name={ name } variation={ variation } />
+			{ hasVariationsPanel && (
+				<div className="edit-site-global-styles-screen-variations">
+					<VStack spacing={ 3 }>
+						<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
+						<VariationsPanel name={ name } />
+					</VStack>
+				</div>
+			) }
 			{ hasColorPanel && (
 				<StylesColorPanel
 					inheritedValue={ inheritedStyle }
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 3372826869b3b..4a4ce14e82e6f 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -23,7 +23,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import { IconWithCurrentColor } from './icon-with-current-color';
 import { NavigationButtonAsItem } from './navigation-button';
-import ContextMenu from './context-menu';
+import RootMenu from './root-menu';
 import StylesPreview from './preview';
 import { unlock } from '../../private-apis';
 
@@ -78,7 +78,7 @@ function ScreenRoot() {
 							</NavigationButtonAsItem>
 						</ItemGroup>
 					) }
-					<ContextMenu />
+					<RootMenu />
 				</VStack>
 			</CardBody>
 
diff --git a/packages/edit-site/src/components/global-styles/screen-variations.js b/packages/edit-site/src/components/global-styles/screen-variations.js
deleted file mode 100644
index 53023115caa26..0000000000000
--- a/packages/edit-site/src/components/global-styles/screen-variations.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalVStack as VStack } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import {
-	VariationPanel,
-	VariationsPanel,
-	useHasVariationsPanel,
-} from './variations-panel';
-import ScreenHeader from './header';
-import BlockPreviewPanel from './block-preview-panel';
-import Subtitle from './subtitle';
-
-export function ScreenVariations( { name, path = '' } ) {
-	const hasVariationsPanel = useHasVariationsPanel( name, path );
-
-	if ( ! hasVariationsPanel ) {
-		return null;
-	}
-	return (
-		<div className="edit-site-global-styles-screen-variations">
-			<VStack spacing={ 3 }>
-				<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
-				<VariationsPanel name={ name } />
-			</VStack>
-		</div>
-	);
-}
-
-export function ScreenVariation( { blockName, style } ) {
-	const { name: styleName, label: styleLabel } = style;
-	return (
-		<>
-			<ScreenHeader title={ styleLabel } />
-			<BlockPreviewPanel
-				name={ blockName }
-				variation={ `is-style-${ styleName }` }
-			/>
-			<VariationPanel blockName={ blockName } styleName={ styleName } />
-		</>
-	);
-}
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 2b530fdcecc80..af502f4b9a2c4 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -35,7 +35,6 @@ import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
-import { ScreenVariation } from './screen-variations';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import { unlock } from '../../private-apis';
@@ -146,7 +145,7 @@ function BlockStylesNavigationScreens( {
 			key={ index }
 			path={ parentMenu + '/variations/' + style.name }
 		>
-			<ScreenVariation blockName={ blockName } style={ style } />
+			<ScreenBlock name={ blockName } variation={ style.name } />
 		</GlobalStylesNavigationScreen>
 	) );
 }
diff --git a/packages/edit-site/src/components/global-styles/variations-panel.js b/packages/edit-site/src/components/global-styles/variations-panel.js
index 7cfeb4301750d..823e27038defb 100644
--- a/packages/edit-site/src/components/global-styles/variations-panel.js
+++ b/packages/edit-site/src/components/global-styles/variations-panel.js
@@ -9,14 +9,12 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
  */
 
 import { NavigationButtonAsItem } from './navigation-button';
-import ContextMenu from './context-menu';
 
 function getCoreBlockStyles( blockStyles ) {
 	return blockStyles?.filter( ( style ) => style.source === 'block' );
 }
 
-export function useHasVariationsPanel( name, parentMenu = '' ) {
-	const isInsideVariationsPanel = parentMenu.includes( 'variations' );
+export function useBlockVariations( name ) {
 	const blockStyles = useSelect(
 		( select ) => {
 			const { getBlockStyles } = select( blocksStore );
@@ -25,18 +23,11 @@ export function useHasVariationsPanel( name, parentMenu = '' ) {
 		[ name ]
 	);
 	const coreBlockStyles = getCoreBlockStyles( blockStyles );
-	return !! coreBlockStyles?.length && ! isInsideVariationsPanel;
+	return coreBlockStyles;
 }
 
 export function VariationsPanel( { name } ) {
-	const blockStyles = useSelect(
-		( select ) => {
-			const { getBlockStyles } = select( blocksStore );
-			return getBlockStyles( name );
-		},
-		[ name ]
-	);
-	const coreBlockStyles = getCoreBlockStyles( blockStyles );
+	const coreBlockStyles = useBlockVariations( name );
 
 	return (
 		<ItemGroup isBordered isSeparated>
@@ -62,17 +53,3 @@ export function VariationsPanel( { name } ) {
 		</ItemGroup>
 	);
 }
-
-export function VariationPanel( { blockName, styleName } ) {
-	return (
-		<ContextMenu
-			parentMenu={
-				'/blocks/' +
-				encodeURIComponent( blockName ) +
-				'/variations/' +
-				encodeURIComponent( styleName )
-			}
-			name={ blockName }
-		/>
-	);
-}

From c0511a688aaac006997d0c4aa1d8a753033c3f82 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 2 May 2023 09:39:22 +0100
Subject: [PATCH 06/10] Cleanup

---
 .../src/components/global-styles/root-menu.js |  12 +-
 .../src/components/global-styles/ui.js        | 128 ++++++------------
 2 files changed, 44 insertions(+), 96 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
index 8a42d1072e74c..7552417fddd99 100644
--- a/packages/edit-site/src/components/global-styles/root-menu.js
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -47,7 +47,7 @@ function RootMenu() {
 				{ hasTypographyPanel && (
 					<NavigationButtonAsItem
 						icon={ typography }
-						path={ '/typography' }
+						path="/typography"
 						aria-label={ __( 'Typography styles' ) }
 					>
 						{ __( 'Typography' ) }
@@ -56,7 +56,7 @@ function RootMenu() {
 				{ hasColorPanel && (
 					<NavigationButtonAsItem
 						icon={ color }
-						path={ '/colors' }
+						path="/colors"
 						aria-label={ __( 'Colors styles' ) }
 					>
 						{ __( 'Colors' ) }
@@ -65,7 +65,7 @@ function RootMenu() {
 				{ hasBorderPanel && (
 					<NavigationButtonAsItem
 						icon={ border }
-						path={ '/border' }
+						path="/border"
 						aria-label={ __( 'Border' ) }
 					>
 						{ __( 'Border' ) }
@@ -74,7 +74,7 @@ function RootMenu() {
 				{ hasEffectsPanel && (
 					<NavigationButtonAsItem
 						icon={ shadow }
-						path={ '/effects' }
+						path="/effects"
 						aria-label={ __( 'Effects' ) }
 					>
 						{ __( 'Effects' ) }
@@ -83,7 +83,7 @@ function RootMenu() {
 				{ hasFilterPanel && (
 					<NavigationButtonAsItem
 						icon={ filter }
-						path={ '/filters' }
+						path="/filters"
 						aria-label={ __( 'Filters styles' ) }
 					>
 						{ __( 'Filters' ) }
@@ -92,7 +92,7 @@ function RootMenu() {
 				{ hasLayoutPanel && (
 					<NavigationButtonAsItem
 						icon={ layout }
-						path={ '/layout' }
+						path="/layout"
 						aria-label={ __( 'Layout styles' ) }
 					>
 						{ __( 'Layout' ) }
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index af502f4b9a2c4..504b1d04439b2 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -108,33 +108,6 @@ function GlobalStylesNavigationScreen( { className, ...props } ) {
 	);
 }
 
-function BlockStyleVariationsScreens( { name } ) {
-	const blockStyleVariations = useSelect(
-		( select ) => {
-			const { getBlockStyles } = select( blocksStore );
-			return getBlockStyles( name );
-		},
-		[ name ]
-	);
-	if ( ! blockStyleVariations?.length ) {
-		return null;
-	}
-
-	return blockStyleVariations.map( ( variation ) => (
-		<ContextScreens
-			key={ variation.name + name }
-			name={ name }
-			parentMenu={
-				'/blocks/' +
-				encodeURIComponent( name ) +
-				'/variations/' +
-				encodeURIComponent( variation.name )
-			}
-			variation={ variation.name }
-		/>
-	) );
-}
-
 function BlockStylesNavigationScreens( {
 	parentMenu,
 	blockStyles,
@@ -150,7 +123,7 @@ function BlockStylesNavigationScreens( {
 	) );
 }
 
-function ContextScreens( { name, parentMenu = '', variation = '' } ) {
+function ContextScreens( { name, parentMenu = '' } ) {
 	const blockStyleVariations = useSelect(
 		( select ) => {
 			const { getBlockStyles } = select( blocksStore );
@@ -161,66 +134,12 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {
 
 	return (
 		<>
-			{ ! name && ! variation && (
-				<>
-					<GlobalStylesNavigationScreen
-						path={ parentMenu + '/typography' }
-					>
-						<ScreenTypography />
-					</GlobalStylesNavigationScreen>
-
-					<GlobalStylesNavigationScreen
-						path={ parentMenu + '/typography/text' }
-					>
-						<ScreenTypographyElement element="text" />
-					</GlobalStylesNavigationScreen>
-
-					<GlobalStylesNavigationScreen
-						path={ parentMenu + '/typography/link' }
-					>
-						<ScreenTypographyElement element="link" />
-					</GlobalStylesNavigationScreen>
-
-					<GlobalStylesNavigationScreen
-						path={ parentMenu + '/typography/heading' }
-					>
-						<ScreenTypographyElement element="heading" />
-					</GlobalStylesNavigationScreen>
-
-					<GlobalStylesNavigationScreen
-						path={ parentMenu + '/typography/caption' }
-					>
-						<ScreenTypographyElement element="caption" />
-					</GlobalStylesNavigationScreen>
-
-					<GlobalStylesNavigationScreen
-						path={ parentMenu + '/typography/button' }
-					>
-						<ScreenTypographyElement element="button" />
-					</GlobalStylesNavigationScreen>
-
-					<GlobalStylesNavigationScreen
-						path={ parentMenu + '/colors' }
-					>
-						<ScreenColors />
-					</GlobalStylesNavigationScreen>
-
-					<GlobalStylesNavigationScreen path={ parentMenu + '/css' }>
-						<ScreenCSS />
-					</GlobalStylesNavigationScreen>
-				</>
-			) }
-
 			<GlobalStylesNavigationScreen
 				path={ parentMenu + '/colors/palette' }
 			>
 				<ScreenColorPalette name={ name } />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
-				<ScreenLayout name={ name } variation={ variation } />
-			</GlobalStylesNavigationScreen>
-
 			{ !! blockStyleVariations?.length && (
 				<BlockStylesNavigationScreens
 					parentMenu={ parentMenu }
@@ -312,6 +231,43 @@ function GlobalStylesUI() {
 				<ScreenBlockList />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/typography">
+				<ScreenTypography />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/text">
+				<ScreenTypographyElement element="text" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/link">
+				<ScreenTypographyElement element="link" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/heading">
+				<ScreenTypographyElement element="heading" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/caption">
+				<ScreenTypographyElement element="caption" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/typography/button">
+				<ScreenTypographyElement element="button" />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/colors">
+				<ScreenColors />
+				``
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/layout">
+				<ScreenLayout />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/css">
+				<ScreenCSS />
+			</GlobalStylesNavigationScreen>
+
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }
@@ -331,14 +287,6 @@ function GlobalStylesUI() {
 				/>
 			) ) }
 
-			{ blocks.map( ( block, index ) => {
-				return (
-					<BlockStyleVariationsScreens
-						key={ 'screens-block-styles-' + block.name + index }
-						name={ block.name }
-					/>
-				);
-			} ) }
 			{ 'style-book' === editorCanvasContainerView && (
 				<GlobalStylesStyleBook />
 			) }

From 39346587b12b6c68b635bf18c92c3f2415167244 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 2 May 2023 09:46:02 +0100
Subject: [PATCH 07/10] Fix typos

---
 .../edit-site/src/components/global-styles/border-panel.js    | 4 +++-
 .../src/components/global-styles/dimensions-panel.js          | 4 +++-
 .../edit-site/src/components/global-styles/screen-colors.js   | 4 +++-
 .../src/components/global-styles/typography-panel.js          | 4 +++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js
index fd127039be748..997a565060532 100644
--- a/packages/edit-site/src/components/global-styles/border-panel.js
+++ b/packages/edit-site/src/components/global-styles/border-panel.js
@@ -58,7 +58,9 @@ export default function BorderPanel( { name, variation = '' } ) {
 	}
 	const prefix = prefixParts.join( '.' );
 
-	const [ style ] = useGlobalStyle( prefix, name, 'user', false );
+	const [ style ] = useGlobalStyle( prefix, name, 'user', {
+		shouldDecodeEncode: false,
+	} );
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', {
 		shouldDecodeEncode: false,
 	} );
diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
index a7b851f89c9b9..dc63db6846128 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -27,7 +27,9 @@ const DEFAULT_CONTROLS = {
 };
 
 export default function DimensionsPanel() {
-	const [ style ] = useGlobalStyle( '', undefined, 'user', false );
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 4f8a95d540fb3..dc56bbc074b8b 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -21,7 +21,9 @@ const {
 } = unlock( blockEditorPrivateApis );
 
 function ScreenColors() {
-	const [ style ] = useGlobalStyle( '', undefined, 'user', false );
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
index 3bc2ccd107aca..ce5aa95b7246e 100644
--- a/packages/edit-site/src/components/global-styles/typography-panel.js
+++ b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -24,7 +24,9 @@ export default function TypographyPanel( { element, headingLevel } ) {
 	}
 	const prefix = prefixParts.join( '.' );
 
-	const [ style ] = useGlobalStyle( prefix, undefined, 'user', false );
+	const [ style ] = useGlobalStyle( prefix, undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
 	const [ inheritedStyle, setStyle ] = useGlobalStyle(
 		prefix,
 		undefined,

From 86759b08c2c3d9f9243164e1ef933048c1e6ddfc Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 3 May 2023 09:39:06 +0100
Subject: [PATCH 08/10] Fix small typos

---
 packages/edit-site/src/components/global-styles/screen-block.js | 2 +-
 packages/edit-site/src/components/global-styles/ui.js           | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index c985cf6d15955..08659279f19e0 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -63,7 +63,7 @@ function ScreenBlock( { name, variation } ) {
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasEffectsPanel = useHasEffectsPanel( settings );
 	const hasFiltersPanel = useHasFiltersPanel( settings );
-	const hasVariationsPanel = blockVariations?.length && ! variation;
+	const hasVariationsPanel = !! blockVariations?.length && ! variation;
 	const { canEditCSS } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
 			select( coreStore );
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 504b1d04439b2..ebc2ae164aa41 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -257,7 +257,6 @@ function GlobalStylesUI() {
 
 			<GlobalStylesNavigationScreen path="/colors">
 				<ScreenColors />
-				``
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/layout">

From 47d29f2e80a0553395a093ee048f6f78fd9276cd Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 4 May 2023 14:41:13 +0100
Subject: [PATCH 09/10] Remove useless menu items

---
 .../src/components/global-styles/root-menu.js | 42 +------------------
 1 file changed, 1 insertion(+), 41 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js
index 7552417fddd99..14c5c344e5f64 100644
--- a/packages/edit-site/src/components/global-styles/root-menu.js
+++ b/packages/edit-site/src/components/global-styles/root-menu.js
@@ -2,14 +2,7 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import {
-	typography,
-	border,
-	filter,
-	shadow,
-	color,
-	layout,
-} from '@wordpress/icons';
+import { typography, color, layout } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -22,10 +15,7 @@ import { unlock } from '../../private-apis';
 const {
 	useHasDimensionsPanel,
 	useHasTypographyPanel,
-	useHasBorderPanel,
 	useHasColorPanel,
-	useHasEffectsPanel,
-	useHasFiltersPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
 } = unlock( blockEditorPrivateApis );
@@ -35,9 +25,6 @@ function RootMenu() {
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
-	const hasBorderPanel = useHasBorderPanel( settings );
-	const hasEffectsPanel = useHasEffectsPanel( settings );
-	const hasFilterPanel = useHasFiltersPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasDimensionsPanel;
 
@@ -62,33 +49,6 @@ function RootMenu() {
 						{ __( 'Colors' ) }
 					</NavigationButtonAsItem>
 				) }
-				{ hasBorderPanel && (
-					<NavigationButtonAsItem
-						icon={ border }
-						path="/border"
-						aria-label={ __( 'Border' ) }
-					>
-						{ __( 'Border' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasEffectsPanel && (
-					<NavigationButtonAsItem
-						icon={ shadow }
-						path="/effects"
-						aria-label={ __( 'Effects' ) }
-					>
-						{ __( 'Effects' ) }
-					</NavigationButtonAsItem>
-				) }
-				{ hasFilterPanel && (
-					<NavigationButtonAsItem
-						icon={ filter }
-						path="/filters"
-						aria-label={ __( 'Filters styles' ) }
-					>
-						{ __( 'Filters' ) }
-					</NavigationButtonAsItem>
-				) }
 				{ hasLayoutPanel && (
 					<NavigationButtonAsItem
 						icon={ layout }

From 8acff4cd59577805564971e38322b6dc4f1b2c0a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 5 May 2023 08:16:54 +0100
Subject: [PATCH 10/10] Fix e2e tests

---
 test/e2e/specs/site-editor/push-to-global-styles.spec.js | 2 --
 test/e2e/specs/site-editor/style-book.spec.js            | 1 -
 2 files changed, 3 deletions(-)

diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
index 06c634a1f5498..57e7e3aea34d9 100644
--- a/test/e2e/specs/site-editor/push-to-global-styles.spec.js
+++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js
@@ -35,7 +35,6 @@ test.describe( 'Push to Global Styles button', () => {
 		await page
 			.getByRole( 'button', { name: 'Heading block styles' } )
 			.click();
-		await page.getByRole( 'button', { name: 'Typography styles' } ).click();
 
 		// Headings should not have uppercase
 		await expect(
@@ -87,7 +86,6 @@ test.describe( 'Push to Global Styles button', () => {
 		await page
 			.getByRole( 'button', { name: 'Heading block styles' } )
 			.click();
-		await page.getByRole( 'button', { name: 'Typography styles' } ).click();
 
 		// Headings should now have uppercase
 		await expect(
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index 56d0ca0cf20f1..28040d40796c8 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -111,7 +111,6 @@ test.describe( 'Style Book', () => {
 	} ) => {
 		await page.click( 'role=button[name="Blocks styles"]' );
 		await page.click( 'role=button[name="Heading block styles"]' );
-		await page.click( 'role=button[name="Typography styles"]' );
 
 		await page
 			.frameLocator( '[name="style-book-canvas"]' )