A bit of clean up. Remove comments, adjust margins.

WordPress · Feb 22, 2024 · b63b417 · b63b417
1 parent 84b2a7e
commit b63b417
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 22 deletions.
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
@@ -85,6 +85,9 @@ export default function ColorPalettePanel( { name } ) {
 						popoverProps={ popoverProps }
 					/>
 				) }
+			{ !! colorVariations.length && (
+				<ColorVariations variations={ colorVariations } />
+			) }
 			<PaletteEdit
 				colors={ customColors }
 				onChange={ setCustomColors }
@@ -96,9 +99,6 @@ export default function ColorPalettePanel( { name } ) {
 				slugPrefix="custom-"
 				popoverProps={ popoverProps }
 			/>
-			{ !! colorVariations.length && (
-				<ColorVariations variations={ colorVariations } />
-			) }
 		</VStack>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js
@@ -15,7 +15,7 @@ export default function ScreenTypographyTypesets() {
 			<ScreenHeader
 				title={ __( 'Typeset' ) }
 				description={ __(
-					'Manage typography of different global elements on your site.'
+					"Apply a typography style variation to your site's font styles and settings."
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-typography">

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -50,7 +50,6 @@ function ScreenTypography() {
 					{ ! window.__experimentalDisableFontLibrary && (
 						<VStack spacing={ 3 }>
 							{ fontLibraryEnabled && <FontFamilies /> }
-							{ /* @TODO: abstract into component */ }
 							{ !! typographyVariations.length && (
 								<ItemGroup isBordered>
 									<NavigationButtonAsItem
@@ -59,7 +58,6 @@ function ScreenTypography() {
 									>
 										<HStack justify="space-between">
 											<FlexItem>
-												{ /* @TODO: think about this category. Could we stress "variations" typography styles to make descriptions/labelling easier (no font-name farming) */ }
 												{ __( 'Typesets' ) }
 											</FlexItem>
 											<IconWithCurrentColor

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -207,3 +207,10 @@
 .edit-site-global-styles-screen-typography-typeset__button {
 	border: $gray-200 $border-width solid;
 }
+
+.edit-site-global-styles-sidebar__panel .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item-preview {
+	min-height: 70px;
+	line-height: 1.2;
+	text-align: center;
+	padding: $grid-unit-10 $border-width * 2;
+}
diff --git a/packages/edit-site/src/components/global-styles/variations-color.js b/packages/edit-site/src/components/global-styles/variations-color.js
@@ -120,19 +120,14 @@ function ColorVariation( { variation } ) {
 export default function ColorVariations( { variations } ) {
 	return (
 		<VStack spacing={ 3 }>
-			{ /*
-			@TODO is there an alternative to this heading?
-*/ }
 			<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>
 			<Grid
 				columns={ 2 }
 				className="edit-site-global-styles-color-variations"
 			>
-				{ variations.map( ( variation, index ) => {
-					return (
-						<ColorVariation key={ index } variation={ variation } />
-					);
-				} ) }
+				{ variations.map( ( variation, index ) => (
+					<ColorVariation key={ index } variation={ variation } />
+				) ) }
 			</Grid>
 		</VStack>
 	);

diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js
@@ -123,7 +123,7 @@ function TypographyVariation( { variation } ) {
 	const headingPreviewStyle = {
 		...( headingFontFamilies &&
 			getFamilyPreviewStyle( headingFontFamilies ) ),
-		fontSize: '1.2rem',
+		fontSize: '16px',
 	};
 
 	return (
@@ -147,11 +147,6 @@ function TypographyVariation( { variation } ) {
 				<VStack
 					className="edit-site-global-styles-variations_item-preview"
 					isFocused={ isFocused }
-					style={ {
-						height: 70,
-						lineHeight: 1.2,
-						textAlign: 'center',
-					} }
 				>
 					<div style={ headingPreviewStyle }>
 						{ headingFontFamilies?.name || variation?.title }

diff --git a/.../edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js b/.../edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js
@@ -16,8 +16,8 @@ import { unlock } from '../../lock-unlock';
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
 /**
- * Fetches the current theme style variations, filters them by the provided property,
- * and merges with current user-defined global style/settings object.
+ * A convenience wrapper for `useThemeStyleVariationsByProperty()` that fetches the current theme style variations,
+ * and user-defined global style/settings object.
  *
  * @param {Object}   props          Object of hook args.
  * @param {string}   props.property The property to filter by.