WordPress · scruffian · Mar 1, 2024 · Mar 1, 2024
diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js
@@ -13,7 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import ColorVariations from './variations-color';
+import ColorVariations from './variations/variations-color';
 import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );

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
@@ -26,7 +26,7 @@ import { speak } from '@wordpress/a11y';
 /**
  * Internal dependencies
  */
-import { useBlockVariations } from './variations-panel';
+import { useBlockVariations } from './variations/variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import { unlock } from '../../lock-unlock';

diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -20,7 +20,10 @@ import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
 import { unlock } from '../../lock-unlock';
 import Subtitle from './subtitle';
-import { useBlockVariations, VariationsPanel } from './variations-panel';
+import {
+	useBlockVariations,
+	VariationsPanel,
+} from './variations/variations-panel';
 
 function applyFallbackStyle( border ) {
 	if ( ! border ) {

diff --git 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,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import Palette from './palette';
 import { unlock } from '../../lock-unlock';
-import ColorVariations from './variations-color';
+import ColorVariations from './variations/variations-color';
 import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 const {

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -10,7 +10,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import TypographyElements from './typography-elements';
-import TypographyVariations from './variations-typography';
+import TypographyVariations from './variations/variations-typography';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
 import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';

diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js
@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import StylesPreview from './preview';
-import Variation from './variation';
+import Variation from './variations/variation';
 
 export default function StyleVariationsContainer() {
 	const variations = useSelect( ( select ) => {

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -91,45 +91,6 @@
 	margin: 0;
 }
 
-.edit-site-global-styles-variations_item {
-	box-sizing: border-box;
-	// To round the outline in Windows 10 high contrast mode.
-	border-radius: $radius-block-ui;
-	cursor: pointer;
-
-	.edit-site-global-styles-variations_item-preview {
-		padding: $border-width * 2;
-		border-radius: $radius-block-ui;
-		box-shadow: 0 0 0 $border-width $gray-200;
-		// Shown in Windows 10 high contrast mode.
-		outline: 1px solid transparent;
-
-		.edit-site-global-styles-color-variations & {
-			padding: $grid-unit-10;
-		}
-	}
-
-	&.is-active .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width $gray-900;
-		// Shown in Windows 10 high contrast mode.
-		outline-width: 3px;
-	}
-
-	&:hover .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-	}
-
-	&:focus .edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-	}
-
-	&:focus-visible {
-		// Shown in Windows 10 high contrast mode.
-		outline: 3px solid transparent;
-		outline-offset: 0;
-	}
-}
-
 .edit-site-global-styles-icon-with-current-color {
 	fill: currentColor;
 }
@@ -204,9 +165,3 @@
 .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
 	fill: currentColor;
 }
-
-.edit-site-global-styles-type-preview {
-	font-size: 22px;
-	line-height: 44px;
-	text-align: center;
-}
diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss
@@ -0,0 +1,44 @@
+.edit-site-global-styles-variations_item {
+	box-sizing: border-box;
+	// To round the outline in Windows 10 high contrast mode.
+	border-radius: $radius-block-ui;
+	cursor: pointer;
+
+	.edit-site-global-styles-variations_item-preview {
+		padding: $border-width * 2;
+		border-radius: $radius-block-ui;
+		box-shadow: 0 0 0 $border-width $gray-200;
+		// Shown in Windows 10 high contrast mode.
+		outline: 1px solid transparent;
+
+		.edit-site-global-styles-color-variations & {
+			padding: $grid-unit-10;
+		}
+	}
+
+	&.is-active .edit-site-global-styles-variations_item-preview {
+		box-shadow: 0 0 0 $border-width $gray-900;
+		// Shown in Windows 10 high contrast mode.
+		outline-width: 3px;
+	}
+
+	&:hover .edit-site-global-styles-variations_item-preview {
+		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+	}
+
+	&:focus .edit-site-global-styles-variations_item-preview {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+
+	&:focus-visible {
+		// Shown in Windows 10 high contrast mode.
+		outline: 3px solid transparent;
+		outline-offset: 0;
+	}
+}
+
+.edit-site-global-styles-variations__type-preview {
+	font-size: 22px;
+	line-height: 44px;
+	text-align: center;
+}
diff --git a/...src/components/global-styles/variation.js → ...nts/global-styles/variations/variation.js b/...src/components/global-styles/variation.js → ...nts/global-styles/variations/variation.js
@@ -14,8 +14,8 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
-import { unlock } from '../../lock-unlock';
+import { mergeBaseAndUserConfigs } from '../global-styles-provider';
+import { unlock } from '../../../lock-unlock';
 
 const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis

diff --git a/...ponents/global-styles/variations-color.js → ...bal-styles/variations/variations-color.js b/...ponents/global-styles/variations-color.js → ...bal-styles/variations/variations-color.js
@@ -10,9 +10,9 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Subtitle from './subtitle';
+import Subtitle from '../subtitle';
 import Variation from './variation';
-import StylesPreviewColors from './preview-colors';
+import StylesPreviewColors from '../preview-colors';
 
 export default function ColorVariations( { variations } ) {
 	return (

diff --git a/...ponents/global-styles/variations-panel.js → ...bal-styles/variations/variations-panel.js b/...ponents/global-styles/variations-panel.js → ...bal-styles/variations/variations-panel.js
@@ -8,7 +8,7 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
  * Internal dependencies
  */
 
-import { NavigationButtonAsItem } from './navigation-button';
+import { NavigationButtonAsItem } from '../navigation-button';
 
 function getCoreBlockStyles( blockStyles ) {
 	return blockStyles?.filter( ( style ) => style.source === 'block' );

diff --git a/...ts/global-styles/variations-typography.js → ...tyles/variations/variations-typography.js b/...ts/global-styles/variations-typography.js → ...tyles/variations/variations-typography.js
@@ -13,11 +13,11 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
-import { unlock } from '../../lock-unlock';
-import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import Subtitle from './subtitle';
+import { mergeBaseAndUserConfigs } from '../global-styles-provider';
+import { unlock } from '../../../lock-unlock';
+import { getFamilyPreviewStyle } from '../font-library-modal/utils/preview-styles';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import Subtitle from '../subtitle';
 import Variation from './variation';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
@@ -72,7 +72,7 @@ const TypePreview = ( { variation } ) => {
 		: {};
 	return (
 		<motion.div
-			className="edit-site-global-styles-type-preview"
+			className="edit-site-global-styles-variations__type-preview"
 			animate={ {
 				scale: 1,
 				opacity: 1,

diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
@@ -49,6 +49,7 @@
 @import "./hooks/push-changes-to-global-styles/style.scss";
 @import "./components/global-styles/font-library-modal/style.scss";
 @import "./components/pagination/style.scss";
+@import "./components/global-styles/variations/style.scss";
 
 body.js #wpadminbar {
 	display: none;