@wordpress/edit-site 6.7.1-next.1f6eadc42.0 → 6.8.0

package/build-style/style.css

@@ -578,7 +578,7 @@
   margin: 0;
 }
 
-.dataviews-view-config {
+.dataviews-view-config .components-popover__content {
   width: 320px;
   /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
   container-type: inline-size;
@@ -1575,6 +1575,10 @@ ul.dataviews-view-list {
   fill: currentColor;
 }
 
+.edit-site-global-styles-screen-root__active-style-tile.edit-site-global-styles-screen-root__active-style-tile, .edit-site-global-styles-screen-root__active-style-tile.edit-site-global-styles-screen-root__active-style-tile .edit-site-global-styles-screen-root__active-style-tile-preview {
+  border-radius: 2px;
+}
+
 .edit-site-global-styles-screen-revisions__revisions-list {
   list-style: none;
   margin: 0 16px 16px 16px;
@@ -2529,7 +2533,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _g2zts_slide-from-right {
+@keyframes _hn47y_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2539,7 +2543,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _g2zts_slide-from-left {
+@keyframes _hn47y_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2595,10 +2599,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _g2zts_slide-from-left;
+  animation-name: _hn47y_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _g2zts_slide-from-right;
+  animation-name: _hn47y_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2862,6 +2866,9 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar-dataviews-dataview-item .edit-site-sidebar-dataviews-dataview-item__dropdown-menu {
   min-width: initial;
 }
+.edit-site-sidebar-dataviews-dataview-item .edit-site-sidebar-navigation-item.with-suffix {
+  padding-right: 8px;
+}
 .edit-site-sidebar-dataviews-dataview-item:hover, .edit-site-sidebar-dataviews-dataview-item:focus, .edit-site-sidebar-dataviews-dataview-item[aria-current] {
   color: #e0e0e0;
   background: #2f2f2f;
@@ -3286,7 +3293,7 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
 .font-library-modal__font-card {
   border: 1px solid #e0e0e0;
   width: 100%;
-  height: auto;
+  height: auto !important;
   padding: 16px;
   margin-top: -1px;
   /* To collapse the margin with the previous element */
@@ -3322,7 +3329,7 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   padding-bottom: 16px;
 }
 
-.font-library-modal__tabs [role=tablist] {
+.font-library-modal__tablist {
   position: sticky;
   top: 0;
   border-bottom: 1px solid #ddd;
@@ -3336,7 +3343,7 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   align-items: center;
   display: flex;
   justify-content: center;
-  height: 256px;
+  height: 256px !important;
   width: 100%;
 }
 
@@ -3514,17 +3521,6 @@ body.js.site-editor-php {
   top: 0;
 }
 
-/**
- * Animations
- */
-@keyframes edit-post__fade-in-animation {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.7.1-next.1f6eadc42.0",
+	"version": "6.8.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,45 +29,45 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.7.1-next.1f6eadc42.0",
-		"@wordpress/api-fetch": "^7.7.1-next.1f6eadc42.0",
-		"@wordpress/blob": "^4.7.1-next.1f6eadc42.0",
-		"@wordpress/block-editor": "^14.2.1-next.1f6eadc42.0",
-		"@wordpress/block-library": "^9.7.1-next.1f6eadc42.0",
-		"@wordpress/blocks": "^13.7.1-next.1f6eadc42.0",
-		"@wordpress/commands": "^1.7.1-next.1f6eadc42.0",
-		"@wordpress/components": "^28.8.1-next.1f6eadc42.0",
-		"@wordpress/compose": "^7.8.1-next.1f6eadc42.0",
-		"@wordpress/core-commands": "^1.7.1-next.1f6eadc42.0",
-		"@wordpress/core-data": "^7.7.1-next.1f6eadc42.0",
-		"@wordpress/data": "^10.7.1-next.1f6eadc42.0",
-		"@wordpress/dataviews": "^4.3.1-next.1f6eadc42.0",
-		"@wordpress/date": "^5.7.1-next.1f6eadc42.0",
-		"@wordpress/deprecated": "^4.7.1-next.1f6eadc42.0",
-		"@wordpress/dom": "^4.7.1-next.1f6eadc42.0",
-		"@wordpress/editor": "^14.7.1-next.1f6eadc42.0",
-		"@wordpress/element": "^6.7.1-next.1f6eadc42.0",
-		"@wordpress/escape-html": "^3.7.1-next.1f6eadc42.0",
-		"@wordpress/hooks": "^4.7.1-next.1f6eadc42.0",
-		"@wordpress/html-entities": "^4.7.1-next.1f6eadc42.0",
-		"@wordpress/i18n": "^5.7.1-next.1f6eadc42.0",
-		"@wordpress/icons": "^10.7.1-next.1f6eadc42.0",
-		"@wordpress/keyboard-shortcuts": "^5.7.1-next.1f6eadc42.0",
-		"@wordpress/keycodes": "^4.7.1-next.1f6eadc42.0",
-		"@wordpress/notices": "^5.7.1-next.1f6eadc42.0",
-		"@wordpress/patterns": "^2.7.1-next.1f6eadc42.0",
-		"@wordpress/plugins": "^7.7.1-next.1f6eadc42.0",
-		"@wordpress/preferences": "^4.7.1-next.1f6eadc42.0",
-		"@wordpress/primitives": "^4.7.1-next.1f6eadc42.0",
-		"@wordpress/priority-queue": "^3.7.1-next.1f6eadc42.0",
-		"@wordpress/private-apis": "^1.7.1-next.1f6eadc42.0",
-		"@wordpress/reusable-blocks": "^5.7.1-next.1f6eadc42.0",
-		"@wordpress/router": "^1.7.1-next.1f6eadc42.0",
-		"@wordpress/style-engine": "^2.7.1-next.1f6eadc42.0",
-		"@wordpress/url": "^4.7.1-next.1f6eadc42.0",
-		"@wordpress/viewport": "^6.7.1-next.1f6eadc42.0",
-		"@wordpress/widgets": "^4.7.1-next.1f6eadc42.0",
-		"@wordpress/wordcount": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/a11y": "^4.8.0",
+		"@wordpress/api-fetch": "^7.8.0",
+		"@wordpress/blob": "^4.8.0",
+		"@wordpress/block-editor": "^14.3.0",
+		"@wordpress/block-library": "^9.8.0",
+		"@wordpress/blocks": "^13.8.0",
+		"@wordpress/commands": "^1.8.0",
+		"@wordpress/components": "^28.8.0",
+		"@wordpress/compose": "^7.8.0",
+		"@wordpress/core-commands": "^1.8.0",
+		"@wordpress/core-data": "^7.8.0",
+		"@wordpress/data": "^10.8.0",
+		"@wordpress/dataviews": "^4.4.0",
+		"@wordpress/date": "^5.8.0",
+		"@wordpress/deprecated": "^4.8.0",
+		"@wordpress/dom": "^4.8.0",
+		"@wordpress/editor": "^14.8.0",
+		"@wordpress/element": "^6.8.0",
+		"@wordpress/escape-html": "^3.8.0",
+		"@wordpress/hooks": "^4.8.0",
+		"@wordpress/html-entities": "^4.8.0",
+		"@wordpress/i18n": "^5.8.0",
+		"@wordpress/icons": "^10.8.0",
+		"@wordpress/keyboard-shortcuts": "^5.8.0",
+		"@wordpress/keycodes": "^4.8.0",
+		"@wordpress/notices": "^5.8.0",
+		"@wordpress/patterns": "^2.8.0",
+		"@wordpress/plugins": "^7.8.0",
+		"@wordpress/preferences": "^4.8.0",
+		"@wordpress/primitives": "^4.8.0",
+		"@wordpress/priority-queue": "^3.8.0",
+		"@wordpress/private-apis": "^1.8.0",
+		"@wordpress/reusable-blocks": "^5.8.0",
+		"@wordpress/router": "^1.8.0",
+		"@wordpress/style-engine": "^2.8.0",
+		"@wordpress/url": "^4.8.0",
+		"@wordpress/viewport": "^6.8.0",
+		"@wordpress/widgets": "^4.8.0",
+		"@wordpress/wordcount": "^4.8.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "960a22b909c9fdbc90e7435b7ba8947b9218837a"
+	"gitHead": "cecf5e14d317aa67407f77a7e5c8b6a43016bd42"
 }

package/src/components/editor/index.js

@@ -37,7 +37,7 @@ import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
 import GlobalStylesSidebar from '../global-styles-sidebar';
 import { isPreviewingTheme } from '../../utils/is-previewing-theme';
 import {
-	getEditorCanvasContainerTitleAndIcon,
+	getEditorCanvasContainerTitle,
 	useHasEditorCanvasContainer,
 } from '../editor-canvas-container';
 import SaveButton from '../save-button';
@@ -204,8 +204,7 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 	);
 
 	// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
-	const { title, icon } =
-		getEditorCanvasContainerTitleAndIcon( editorCanvasView );
+	const title = getEditorCanvasContainerTitle( editorCanvasView );
 
 	const isReady = ! isLoading;
 	const transition = {
@@ -238,7 +237,6 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 					customSavePanel={ _isPreviewingTheme && <SavePanel /> }
 					forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
 					title={ title }
-					icon={ icon }
 					iframeProps={ iframeProps }
 					onActionPerformed={ onActionPerformed }
 					extraSidebarPanels={

package/src/components/editor-canvas-container/index.js

@@ -9,7 +9,7 @@ import {
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { backup, closeSmall, seen } from '@wordpress/icons';
+import { closeSmall } from '@wordpress/icons';
 import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -32,24 +32,15 @@ const { EditorContentSlotFill, ResizableEditor } = unlock( editorPrivateApis );
  *
  * @return {Object} Translated string for the view title and associated icon, both defaulting to ''.
  */
-function getEditorCanvasContainerTitleAndIcon( view ) {
+function getEditorCanvasContainerTitle( view ) {
 	switch ( view ) {
 		case 'style-book':
-			return {
-				title: __( 'Style Book' ),
-				icon: seen,
-			};
+			return __( 'Style Book' );
 		case 'global-styles-revisions':
 		case 'global-styles-revisions:style-book':
-			return {
-				title: __( 'Style Revisions' ),
-				icon: backup,
-			};
+			return __( 'Style Revisions' );
 		default:
-			return {
-				title: '',
-				icon: '',
-			};
+			return '';
 	}
 }
 
@@ -118,9 +109,7 @@ function EditorCanvasContainer( {
 		return null;
 	}
 
-	const { title } = getEditorCanvasContainerTitleAndIcon(
-		editorCanvasContainerView
-	);
+	const title = getEditorCanvasContainerTitle( editorCanvasContainerView );
 	const shouldShowCloseButton = onClose || closeButtonLabel;
 
 	return (
@@ -158,4 +147,4 @@ function useHasEditorCanvasContainer() {
 }
 
 export default EditorCanvasContainer;
-export { useHasEditorCanvasContainer, getEditorCanvasContainerTitleAndIcon };
+export { useHasEditorCanvasContainer, getEditorCanvasContainerTitle };

package/src/components/global-styles/font-library-modal/font-card.js

@@ -28,8 +28,7 @@ function FontCard( { font, onClick, variantsText, navigatorPath } ) {
 
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			onClick={ () => {
 				onClick();
 				if ( navigatorPath ) {

package/src/components/global-styles/font-library-modal/font-collection.js

@@ -472,8 +472,7 @@ function FontCollection( { slug } ) {
 							className="font-library-modal__footer"
 						>
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								variant="primary"
 								onClick={ handleInstall }
 								isBusy={ isInstalling }

package/src/components/global-styles/font-library-modal/index.js

@@ -66,8 +66,8 @@ function FontLibraryModal( {
 			isFullScreen
 			className="font-library-modal"
 		>
-			<div className="font-library-modal__tabs">
-				<Tabs defaultTabId={ defaultTabId }>
+			<Tabs defaultTabId={ defaultTabId }>
+				<div className="font-library-modal__tablist">
 					<Tabs.TabList>
 						{ tabs.map( ( { id, title } ) => (
 							<Tabs.Tab key={ id } tabId={ id }>
@@ -75,30 +75,30 @@ function FontLibraryModal( {
 							</Tabs.Tab>
 						) ) }
 					</Tabs.TabList>
-					{ tabs.map( ( { id } ) => {
-						let contents;
-						switch ( id ) {
-							case 'upload-fonts':
-								contents = <UploadFonts />;
-								break;
-							case 'installed-fonts':
-								contents = <InstalledFonts />;
-								break;
-							default:
-								contents = <FontCollection slug={ id } />;
-						}
-						return (
-							<Tabs.TabPanel
-								key={ id }
-								tabId={ id }
-								focusable={ false }
-							>
-								{ contents }
-							</Tabs.TabPanel>
-						);
-					} ) }
-				</Tabs>
-			</div>
+				</div>
+				{ tabs.map( ( { id } ) => {
+					let contents;
+					switch ( id ) {
+						case 'upload-fonts':
+							contents = <UploadFonts />;
+							break;
+						case 'installed-fonts':
+							contents = <InstalledFonts />;
+							break;
+						default:
+							contents = <FontCollection slug={ id } />;
+					}
+					return (
+						<Tabs.TabPanel
+							key={ id }
+							tabId={ id }
+							focusable={ false }
+						>
+							{ contents }
+						</Tabs.TabPanel>
+					);
+				} ) }
+			</Tabs>
 		</Modal>
 	);
 }

package/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -437,8 +437,7 @@ function InstalledFonts() {
 						{ isInstalling && <ProgressBar /> }
 						{ shouldDisplayDeleteButton && (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								isDestructive
 								variant="tertiary"
 								onClick={ handleUninstallClick }
@@ -447,8 +446,7 @@ function InstalledFonts() {
 							</Button>
 						) }
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							variant="primary"
 							onClick={ handleUpdate }
 							disabled={ ! fontFamiliesHasChanges }

package/src/components/global-styles/font-library-modal/style.scss

@@ -94,7 +94,11 @@ $footer-height: 70px;
 .font-library-modal__font-card {
 	border: $border-width solid $gray-200;
 	width: 100%;
-	height: auto;
+
+	// Override the default 40px height set by the Button component.
+	// Ref - https://github.com/WordPress/gutenberg/pull/65258#discussion_r1756147260
+	height: auto !important;
+
 	padding: $grid-unit-20;
 	margin-top: -1px; /* To collapse the margin with the previous element */
 
@@ -129,23 +133,26 @@ $footer-height: 70px;
 	padding-bottom: $grid-unit-20;
 }
 
-.font-library-modal__tabs {
-	[role="tablist"] {
-		position: sticky;
-		top: 0;
-		border-bottom: 1px solid $gray-300;
-		background: $white;
-		margin: 0 #{$grid-unit-40 * -1};
-		padding: 0 $grid-unit-20;
-		z-index: 1;
-	}
+.font-library-modal__tablist {
+	position: sticky;
+	top: 0;
+	border-bottom: 1px solid $gray-300;
+	background: $white;
+	margin: 0 #{$grid-unit-40 * -1};
+	padding: 0 $grid-unit-20;
+	z-index: 1;
 }
 
+
 .font-library-modal__upload-area {
 	align-items: center;
 	display: flex;
 	justify-content: center;
-	height: $grid-unit-80 * 4; // 256px
+
+	// Override the default 40px height set by the Button component.
+	// Ref - https://github.com/WordPress/gutenberg/pull/65258#discussion_r1756155039
+	height: $grid-unit-80 * 4 !important; // 256px
+
 	width: 100%;
 }
 

package/src/components/global-styles/font-library-modal/upload-fonts.js

@@ -230,8 +230,7 @@ function UploadFonts() {
 						onChange={ onFilesUpload }
 						render={ ( { openFileDialog } ) => (
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								className="font-library-modal__upload-area"
 								onClick={ openFileDialog }
 							>

package/src/components/global-styles/palette.js

@@ -87,8 +87,7 @@ function Palette( { name } ) {
 			{ window.__experimentalEnableColorRandomizer &&
 				themeColors?.length > 0 && (
 					<Button
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						variant="secondary"
 						icon={ shuffle }
 						onClick={ randomizeThemeColors }

package/src/components/global-styles/root-menu.js

@@ -3,6 +3,7 @@
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import {
+	background,
 	typography,
 	color,
 	layout,
@@ -23,11 +24,17 @@ const {
 	useHasColorPanel,
 	useGlobalSetting,
 	useSettingsForBlockElement,
+	useHasBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
 function RootMenu() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
+	/*
+	 * Use the raw settings to determine if the background panel should be displayed,
+	 * as the background panel is not dependent on the block element settings.
+	 */
+	const hasBackgroundPanel = useHasBackgroundPanel( rawSettings );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasShadowPanel = true; // useHasShadowPanel( settings );
@@ -55,6 +62,15 @@ function RootMenu() {
 						{ __( 'Colors' ) }
 					</NavigationButtonAsItem>
 				) }
+				{ hasBackgroundPanel && (
+					<NavigationButtonAsItem
+						icon={ background }
+						path="/background"
+						aria-label={ __( 'Background styles' ) }
+					>
+						{ __( 'Background' ) }
+					</NavigationButtonAsItem>
+				) }
 				{ hasShadowPanel && (
 					<NavigationButtonAsItem
 						icon={ shadowIcon }

package/src/components/global-styles/screen-background.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __experimentalText as Text } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BackgroundPanel from './background-panel';
+import ScreenHeader from './header';
+import { unlock } from '../../lock-unlock';
+
+const { useHasBackgroundPanel, useGlobalSetting } = unlock(
+	blockEditorPrivateApis
+);
+
+function ScreenBackground() {
+	const [ settings ] = useGlobalSetting( '' );
+	const hasBackgroundPanel = useHasBackgroundPanel( settings );
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Background' ) }
+				description={
+					<Text>
+						{ __( 'Set styles for the site’s background.' ) }
+					</Text>
+				}
+			/>
+			{ hasBackgroundPanel && <BackgroundPanel /> }
+		</>
+	);
+}
+
+export default ScreenBackground;

package/src/components/global-styles/screen-layout.js

@@ -8,31 +8,21 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import DimensionsPanel from './dimensions-panel';
-import BackgroundPanel from './background-panel';
 import ScreenHeader from './header';
 import { unlock } from '../../lock-unlock';
 
-const {
-	useHasBackgroundPanel,
-	useHasDimensionsPanel,
-	useGlobalSetting,
-	useSettingsForBlockElement,
-} = unlock( blockEditorPrivateApis );
+const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
+	unlock( blockEditorPrivateApis );
 
 function ScreenLayout() {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
-	/*
-	 * Use the raw settings to determine if the background panel should be displayed,
-	 * as the background panel is not dependent on the block element settings.
-	 */
-	const hasBackgroundPanel = useHasBackgroundPanel( rawSettings );
+
 	return (
 		<>
 			<ScreenHeader title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel /> }
-			{ hasBackgroundPanel && <BackgroundPanel /> }
 		</>
 	);
 }

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -162,8 +162,7 @@ function RevisionsButtons( {
 						aria-current={ isSelected }
 					>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							className="edit-site-global-styles-screen-revisions__revision-button"
 							accessibleWhenDisabled
 							disabled={ isSelected }

package/src/components/global-styles/screen-root.js

@@ -53,11 +53,15 @@ function ScreenRoot() {
 	}, [] );
 
 	return (
-		<Card size="small" className="edit-site-global-styles-screen-root">
+		<Card
+			size="small"
+			className="edit-site-global-styles-screen-root"
+			isRounded={ false }
+		>
 			<CardBody>
 				<VStack spacing={ 4 }>
-					<Card>
-						<CardMedia>
+					<Card className="edit-site-global-styles-screen-root__active-style-tile">
+						<CardMedia className="edit-site-global-styles-screen-root__active-style-tile-preview">
 							<PreviewStyles />
 						</CardMedia>
 					</Card>