@wordpress/edit-site 6.33.3 → 6.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.33.3",
+	"version": "6.34.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,50 +35,55 @@
 	},
 	"react-native": "src/index",
 	"wpScript": true,
+	"wpScriptExtraDependencies": [
+		"wp-dom-ready"
+	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.33.1",
-		"@wordpress/admin-ui": "^1.1.1",
-		"@wordpress/api-fetch": "^7.33.1",
-		"@wordpress/base-styles": "^6.9.1",
-		"@wordpress/blob": "^4.33.1",
-		"@wordpress/block-editor": "^15.6.1",
-		"@wordpress/block-library": "^9.33.2",
-		"@wordpress/blocks": "^15.6.1",
-		"@wordpress/commands": "^1.33.1",
-		"@wordpress/components": "^30.6.1",
-		"@wordpress/compose": "^7.33.1",
-		"@wordpress/core-data": "^7.33.1",
-		"@wordpress/data": "^10.33.1",
-		"@wordpress/dataviews": "^10.1.1",
-		"@wordpress/date": "^5.33.1",
-		"@wordpress/deprecated": "^4.33.1",
-		"@wordpress/dom": "^4.33.1",
-		"@wordpress/editor": "^14.33.3",
-		"@wordpress/element": "^6.33.1",
-		"@wordpress/escape-html": "^3.33.1",
-		"@wordpress/fields": "^0.25.3",
-		"@wordpress/hooks": "^4.33.1",
-		"@wordpress/html-entities": "^4.33.1",
-		"@wordpress/i18n": "^6.6.1",
-		"@wordpress/icons": "^11.0.1",
-		"@wordpress/keyboard-shortcuts": "^5.33.1",
-		"@wordpress/keycodes": "^4.33.1",
-		"@wordpress/media-utils": "^5.33.1",
-		"@wordpress/notices": "^5.33.1",
-		"@wordpress/patterns": "^2.33.1",
-		"@wordpress/plugins": "^7.33.1",
-		"@wordpress/preferences": "^4.33.1",
-		"@wordpress/primitives": "^4.33.1",
-		"@wordpress/private-apis": "^1.33.1",
-		"@wordpress/reusable-blocks": "^5.33.1",
-		"@wordpress/router": "^1.33.1",
-		"@wordpress/style-engine": "^2.33.1",
-		"@wordpress/url": "^4.33.1",
-		"@wordpress/viewport": "^6.33.1",
-		"@wordpress/views": "^1.0.2",
-		"@wordpress/widgets": "^4.33.1",
-		"@wordpress/wordcount": "^4.33.1",
+		"@wordpress/a11y": "^4.34.0",
+		"@wordpress/admin-ui": "^1.2.0",
+		"@wordpress/api-fetch": "^7.34.0",
+		"@wordpress/base-styles": "^6.10.0",
+		"@wordpress/blob": "^4.34.0",
+		"@wordpress/block-editor": "^15.7.0",
+		"@wordpress/block-library": "^9.34.0",
+		"@wordpress/blocks": "^15.7.0",
+		"@wordpress/commands": "^1.34.0",
+		"@wordpress/components": "^30.7.0",
+		"@wordpress/compose": "^7.34.0",
+		"@wordpress/core-data": "^7.34.0",
+		"@wordpress/data": "^10.34.0",
+		"@wordpress/dataviews": "^10.2.0",
+		"@wordpress/date": "^5.34.0",
+		"@wordpress/deprecated": "^4.34.0",
+		"@wordpress/dom": "^4.34.0",
+		"@wordpress/editor": "^14.34.0",
+		"@wordpress/element": "^6.34.0",
+		"@wordpress/escape-html": "^3.34.0",
+		"@wordpress/fields": "^0.26.0",
+		"@wordpress/global-styles-engine": "^1.1.0",
+		"@wordpress/global-styles-ui": "^1.1.0",
+		"@wordpress/hooks": "^4.34.0",
+		"@wordpress/html-entities": "^4.34.0",
+		"@wordpress/i18n": "^6.7.0",
+		"@wordpress/icons": "^11.1.0",
+		"@wordpress/keyboard-shortcuts": "^5.34.0",
+		"@wordpress/keycodes": "^4.34.0",
+		"@wordpress/media-utils": "^5.34.0",
+		"@wordpress/notices": "^5.34.0",
+		"@wordpress/patterns": "^2.34.0",
+		"@wordpress/plugins": "^7.34.0",
+		"@wordpress/preferences": "^4.34.0",
+		"@wordpress/primitives": "^4.34.0",
+		"@wordpress/private-apis": "^1.34.0",
+		"@wordpress/reusable-blocks": "^5.34.0",
+		"@wordpress/router": "^1.34.0",
+		"@wordpress/style-engine": "^2.34.0",
+		"@wordpress/url": "^4.34.0",
+		"@wordpress/viewport": "^6.34.0",
+		"@wordpress/views": "^1.1.0",
+		"@wordpress/widgets": "^4.34.0",
+		"@wordpress/wordcount": "^4.34.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -93,5 +98,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5f84bafdec1bed05247c1080c12f6a237951b862"
+	"gitHead": "ceebff807958d2e8fc755b5a20473939c78b4d1d"
 }

package/src/components/block-editor/use-site-editor-settings.js

@@ -5,6 +5,7 @@ import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { usePrevious } from '@wordpress/compose';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -40,10 +41,13 @@ export function useSpecificEditorSettings() {
 	const { query } = useLocation();
 	const { canvas = 'view' } = query;
 	const onNavigateToEntityRecord = useNavigateToEntityRecord();
-	const { settings } = useSelect( ( select ) => {
+	const { settings, currentPostIsTrashed } = useSelect( ( select ) => {
 		const { getSettings } = select( editSiteStore );
+		const { getCurrentPostAttribute } = select( editorStore );
 		return {
 			settings: getSettings(),
+			currentPostIsTrashed:
+				getCurrentPostAttribute( 'status' ) === 'trash',
 		};
 	}, [] );
 
@@ -52,7 +56,21 @@ export function useSpecificEditorSettings() {
 	const defaultEditorSettings = useMemo( () => {
 		return {
 			...settings,
-
+			styles: [
+				...settings.styles,
+				{
+					// Forming a "block formatting context" to prevent margin collapsing.
+					// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+					css:
+						canvas === 'view'
+							? `body{min-height: 100vh; ${
+									currentPostIsTrashed
+										? ''
+										: 'cursor: pointer;'
+							  }}`
+							: undefined,
+				},
+			],
 			richEditingEnabled: true,
 			supportsTemplateMode: true,
 			focusMode: canvas !== 'view',
@@ -63,6 +81,7 @@ export function useSpecificEditorSettings() {
 	}, [
 		settings,
 		canvas,
+		currentPostIsTrashed,
 		onNavigateToEntityRecord,
 		onNavigateToPreviousEntityRecord,
 	] );

package/src/components/canvas-loader/index.js

@@ -1,29 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	privateApis as componentsPrivateApis,
 	ProgressBar,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import { useStylesPreviewColors } from '../global-styles/hooks';
 
 const { Theme } = unlock( componentsPrivateApis );
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { useStyle } = unlock( editorPrivateApis );
 
 export default function CanvasLoader( { id } ) {
-	const [ fallbackIndicatorColor ] = useGlobalStyle( 'color.text' );
-	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const { highlightedColors } = useStylesPreviewColors();
-	const indicatorColor =
-		highlightedColors[ 0 ]?.color ?? fallbackIndicatorColor;
+	const textColor = useStyle( 'color.text' );
+	const backgroundColor = useStyle( 'color.background' );
 	const { elapsed, total } = useSelect( ( select ) => {
 		const selectorsByStatus = select( coreStore ).countSelectorsByStatus();
 		const resolving = selectorsByStatus.resolving ?? 0;
@@ -36,7 +32,7 @@ export default function CanvasLoader( { id } ) {
 
 	return (
 		<div className="edit-site-canvas-loader">
-			<Theme accent={ indicatorColor } background={ backgroundColor }>
+			<Theme accent={ textColor } background={ backgroundColor }>
 				<ProgressBar id={ id } max={ total } value={ elapsed } />
 			</Theme>
 		</div>

package/src/components/editor/index.js

@@ -12,12 +12,11 @@ import { useInstanceId, useReducedMotion } from '@wordpress/compose';
 import {
 	EditorKeyboardShortcutsRegister,
 	privateApis as editorPrivateApis,
-	store as editorStore,
 } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -29,18 +28,11 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import WelcomeGuide from '../welcome-guide';
-import { store as editSiteStore } from '../../store';
-import { GlobalStylesRenderer } from '../global-styles-renderer';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
-import GlobalStylesSidebar from '../global-styles-sidebar';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
-import {
-	getEditorCanvasContainerTitle,
-	useHasEditorCanvasContainer,
-} from '../editor-canvas-container';
 import SaveButton from '../save-button';
 import SavePanel from '../save-panel';
 import SiteEditorMoreMenu from '../more-menu';
@@ -49,7 +41,6 @@ import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import useEditorTitle from './use-editor-title';
 import { useIsSiteEditorLoading } from '../layout/hooks';
 import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import {
 	useResolveEditedEntity,
 	useSyncDeprecatedEntityIntoState,
@@ -132,24 +123,12 @@ export default function EditSiteEditor( {
 	// deprecated sync state with url
 	useSyncDeprecatedEntityIntoState( entity );
 	const { postType, postId, context } = entity;
-	const {
-		isBlockBasedTheme,
-		editorCanvasView,
-		currentPostIsTrashed,
-		hasSiteIcon,
-	} = useSelect( ( select ) => {
-		const { getEditorCanvasContainerView } = unlock(
-			select( editSiteStore )
-		);
+	const { isBlockBasedTheme, hasSiteIcon } = useSelect( ( select ) => {
 		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
 		const siteData = getEntityRecord( 'root', '__unstableBase', undefined );
 
 		return {
 			isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
-			editorCanvasView: getEditorCanvasContainerView(),
-			currentPostIsTrashed:
-				select( editorStore ).getCurrentPostAttribute( 'status' ) ===
-				'trash',
 			hasSiteIcon: !! siteData?.site_icon_url,
 		};
 	}, [] );
@@ -159,7 +138,6 @@ export default function EditSiteEditor( {
 		postWithTemplate ? context.postId : postId
 	);
 	const _isPreviewingTheme = isPreviewingTheme();
-	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 	const iframeProps = useEditorIframeProps();
 	const isEditMode = canvas === 'edit';
 	const loadingProgressId = useInstanceId(
@@ -168,22 +146,6 @@ export default function EditSiteEditor( {
 	);
 
 	const settings = useSpecificEditorSettings();
-	const styles = useMemo(
-		() => [
-			...settings.styles,
-			{
-				// Forming a "block formatting context" to prevent margin collapsing.
-				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-				css:
-					canvas === 'view'
-						? `body{min-height: 100vh; ${
-								currentPostIsTrashed ? '' : 'cursor: pointer;'
-						  }}`
-						: undefined,
-			},
-		],
-		[ settings.styles, canvas, currentPostIsTrashed ]
-	);
 	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
@@ -241,9 +203,6 @@ export default function EditSiteEditor( {
 		]
 	);
 
-	// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
-	const title = getEditorCanvasContainerTitle( editorCanvasView );
-
 	const isReady = ! isLoading;
 	const transition = {
 		duration: disableMotion ? 0 : 0.2,
@@ -253,9 +212,6 @@ export default function EditSiteEditor( {
 		<SitePreview />
 	) : (
 		<>
-			<GlobalStylesRenderer
-				disableRootPadding={ postType !== TEMPLATE_POST_TYPE }
-			/>
 			<EditorKeyboardShortcutsRegister />
 			{ isEditMode && <BlockKeyboardShortcuts /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
@@ -271,13 +227,10 @@ export default function EditSiteEditor( {
 					templateId={ postWithTemplate ? postId : undefined }
 					settings={ settings }
 					className="edit-site-editor__editor-interface"
-					styles={ styles }
 					customSaveButton={
 						_isPreviewingTheme && <SaveButton size="compact" />
 					}
 					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
-					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
-					title={ title }
 					iframeProps={ iframeProps }
 					onActionPerformed={ onActionPerformed }
 					extraSidebarPanels={
@@ -356,7 +309,6 @@ export default function EditSiteEditor( {
 						</BackButton>
 					) }
 					<SiteEditorMoreMenu />
-					{ isBlockBasedTheme && <GlobalStylesSidebar /> }
 				</Editor>
 			) }
 		</>

package/src/components/layout/index.js

@@ -21,7 +21,6 @@ import {
 } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useRef, useEffect } from '@wordpress/element';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	EditorSnackbars,
 	UnsavedChangesWarning,
@@ -47,9 +46,8 @@ import { SidebarContent, SidebarNavigationProvider } from '../sidebar';
 import SaveHub from '../save-hub';
 import SavePanel from '../save-panel';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-const { GlobalStylesProvider } = unlock( editorPrivateApis );
 const { useLocation } = unlock( routerPrivateApis );
+const { useStyle } = unlock( editorPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
@@ -77,8 +75,8 @@ function Layout() {
 		};
 	} );
 
-	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
+	const backgroundColor = useStyle( 'color.background' );
+	const gradientValue = useStyle( 'color.gradient' );
 	const previousCanvaMode = usePrevious( canvas );
 	useEffect( () => {
 		if ( previousCanvaMode === 'edit' ) {
@@ -276,11 +274,9 @@ export default function LayoutWithGlobalStylesProvider( props ) {
 
 	return (
 		<SlotFillProvider>
-			<GlobalStylesProvider>
-				{ /** This needs to be within the SlotFillProvider */ }
-				<PluginArea onError={ onPluginAreaError } />
-				<Layout { ...props } />
-			</GlobalStylesProvider>
+			{ /** This needs to be within the SlotFillProvider */ }
+			<PluginArea onError={ onPluginAreaError } />
+			<Layout { ...props } />
 		</SlotFillProvider>
 	);
 }

package/src/components/page-patterns/fields.js

@@ -9,12 +9,10 @@ import clsx from 'clsx';
 import { __experimentalHStack as HStack } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo, useId } from '@wordpress/element';
-import {
-	BlockPreview,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { BlockPreview } from '@wordpress/block-editor';
 import { Icon } from '@wordpress/icons';
 import { parse } from '@wordpress/blocks';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -24,16 +22,16 @@ import {
 	PATTERN_SYNC_TYPES,
 	OPERATOR_IS,
 } from '../../utils/constants';
-import { unlock } from '../../lock-unlock';
 import { useAddedBy } from '../page-templates/hooks';
+import { unlock } from '../../lock-unlock';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { useStyle } = unlock( editorPrivateApis );
 
 function PreviewField( { item } ) {
 	const descriptionId = useId();
 	const description = item.description || item?.excerpt?.raw;
 	const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE;
-	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
+	const backgroundColor = useStyle( 'color.background' );
 	const blocks = useMemo( () => {
 		return (
 			item.blocks ??

package/src/components/page-templates/fields.js

@@ -15,11 +15,11 @@ import { __, _x } from '@wordpress/i18n';
 import { useState, useMemo } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { parse } from '@wordpress/blocks';
+import { BlockPreview } from '@wordpress/block-editor';
 import {
-	BlockPreview,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import { EditorProvider } from '@wordpress/editor';
+	EditorProvider,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
 import {
 	privateApis as corePrivateApis,
 	store as coreStore,
@@ -34,9 +34,9 @@ import { useDefaultTemplateTypes } from '../add-new-template/utils';
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const { Badge } = unlock( componentsPrivateApis );
 const { useEntityRecordsWithPermissions } = unlock( corePrivateApis );
+const { useStyle } = unlock( editorPrivateApis );
 
 function useAllDefaultTemplateTypes() {
 	const defaultTemplateTypes = useDefaultTemplateTypes();
@@ -60,7 +60,7 @@ function useAllDefaultTemplateTypes() {
 
 function PreviewField( { item } ) {
 	const settings = usePatternSettings();
-	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
+	const backgroundColor = useStyle( 'color.background' ) ?? 'white';
 	const blocks = useMemo( () => {
 		return parse( item.content.raw );
 	}, [ item.content.raw ] );

package/src/components/{sidebar-global-styles-wrapper → sidebar-global-styles}/index.js

@@ -3,44 +3,30 @@
  */
 import { Page } from '@wordpress/admin-ui';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 import { useMemo, useState } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { useViewportMatch } from '@wordpress/compose';
-import {
-	Button,
-	__experimentalHStack as HStack,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-} from '@wordpress/components';
+import { Button, __experimentalHStack as HStack } from '@wordpress/components';
 import { addQueryArgs, removeQueryArgs } from '@wordpress/url';
-import { seen, moreVertical } from '@wordpress/icons';
+import { seen } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import GlobalStylesUI from '../global-styles/ui';
 import { unlock } from '../../lock-unlock';
 
+const { GlobalStylesUIWrapper, GlobalStylesActionMenu } =
+	unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 const GlobalStylesPageActions = ( {
 	isStyleBookOpened,
 	setIsStyleBookOpened,
 	path,
+	onChangeSection,
 } ) => {
 	const history = useHistory();
-	const canEditCSS = useSelect( ( select ) => {
-		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-			select( coreStore );
-		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-		const globalStyles = globalStylesId
-			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-			: undefined;
-		return !! globalStyles?._links?.[ 'wp:action-edit-css' ];
-	}, [] );
 
 	return (
 		<HStack>
@@ -58,32 +44,10 @@ const GlobalStylesPageActions = ( {
 				} }
 				size="compact"
 			/>
-			{ canEditCSS && (
-				<DropdownMenu
-					icon={ moreVertical }
-					label={ __( 'More' ) }
-					toggleProps={ { size: 'compact' } }
-				>
-					{ ( { onClose } ) => (
-						<MenuGroup>
-							{ canEditCSS && (
-								<MenuItem
-									onClick={ () => {
-										onClose();
-										history.navigate(
-											addQueryArgs( path, {
-												section: '/css',
-											} )
-										);
-									} }
-								>
-									{ __( 'Additional CSS' ) }
-								</MenuItem>
-							) }
-						</MenuGroup>
-					) }
-				</DropdownMenu>
-			) }
+			<GlobalStylesActionMenu
+				hideWelcomeGuide
+				onChangePath={ onChangeSection }
+			/>
 		</HStack>
 	);
 };
@@ -110,7 +74,7 @@ export const useSection = () => {
 	}, [ path, query.section, history ] );
 };
 
-export default function GlobalStylesUIWrapper() {
+export default function SidebarGlobalStyles() {
 	const { path } = useLocation();
 
 	const [ isStyleBookOpened, setIsStyleBookOpened ] = useState(
@@ -127,13 +91,17 @@ export default function GlobalStylesUIWrapper() {
 						isStyleBookOpened={ isStyleBookOpened }
 						setIsStyleBookOpened={ setIsStyleBookOpened }
 						path={ path }
+						onChangeSection={ onChangeSection }
 					/>
 				) : null
 			}
 			className="edit-site-styles"
 			title={ __( 'Styles' ) }
 		>
-			<GlobalStylesUI path={ section } onPathChange={ onChangeSection } />
+			<GlobalStylesUIWrapper
+				path={ section }
+				onPathChange={ onChangeSection }
+			/>
 		</Page>
 	);
 }

package/src/components/{sidebar-global-styles-wrapper → sidebar-global-styles}/style.scss

@@ -2,13 +2,13 @@
 @use "@wordpress/base-styles/variables" as *;
 
 .edit-site-styles {
-	.edit-site-global-styles-screen-root {
+	.global-styles-ui-screen-root {
 		box-shadow: none;
 		& > div > hr {
 			display: none;
 		}
 	}
-	.edit-site-global-styles-sidebar__navigator-provider {
+	.global-styles-ui-sidebar__navigator-provider {
 		.components-tools-panel {
 			border-top: none;
 		}
@@ -16,7 +16,7 @@
 		padding-left: 0;
 		padding-right: 0;
 
-		.edit-site-global-styles-sidebar__navigator-screen {
+		.global-styles-ui-sidebar__navigator-screen {
 			padding-top: $grid-unit-15;
 			padding-left: $grid-unit-15;
 			padding-right: $grid-unit-15;

package/src/components/sidebar-navigation-screen/style.scss

@@ -72,29 +72,22 @@
 	}
 }
 
-.edit-site-global-styles-variation-title {
-	color: $gray-300;
-	font-size: 11px;
-	text-transform: uppercase;
-	font-weight: 500;
-}
-
-.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item {
+.edit-site-sidebar-navigation-screen__content .global-styles-ui-variations_item {
 
 	// Use a white outline to provide contrast with the dark background.
-	.edit-site-global-styles-variations_item-preview {
+	.global-styles-ui-variations_item-preview {
 		outline-color: rgba($white, 0.05);
 	}
 
-	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+	&:not(.is-active):hover .global-styles-ui-variations_item-preview {
 		outline-color: rgba($white, 0.15);
 	}
 
-	&.is-active .edit-site-global-styles-variations_item-preview {
+	&.is-active .global-styles-ui-variations_item-preview {
 		outline-color: $white;
 	}
 
-	&:focus-visible .edit-site-global-styles-variations_item-preview {
+	&:focus-visible .global-styles-ui-variations_item-preview {
 		outline-color: var(--wp-admin-theme-color);
 	}
 }