make typograpgy a grid

WordPress · Dec 6, 2023 · 270afc1 · 270afc1
1 parent 1a0b925
commit 270afc1
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 72 deletions.
diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
@@ -60,13 +60,7 @@ const normalizedHeight = 152;
 
 const normalizedColorSwatchSize = 32;
 
-const StylesPreview = ( {
-	label,
-	isFocused,
-	withHoverView,
-	isColor = true,
-	isFont = true,
-} ) => {
+const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 	const [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );
 	const [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );
 	const [ headingFontFamily = fontFamily ] = useGlobalStyle(
@@ -152,62 +146,56 @@ const StylesPreview = ( {
 									overflow: 'hidden',
 								} }
 							>
-								{ isFont && (
-									<motion.div
-										style={ {
-											fontFamily: headingFontFamily,
-											fontSize: 65 * ratio,
-											color: headingColor,
-											fontWeight: headingFontWeight,
-										} }
-										animate={ { scale: 1, opacity: 1 } }
-										initial={ { scale: 0.1, opacity: 0 } }
-										transition={ {
-											delay: 0.3,
-											type: 'tween',
-										} }
-									>
-										Aa
-									</motion.div>
-								) }
-								{ isColor && (
-									<VStack spacing={ 4 * ratio }>
-										{ highlightedColors.map(
-											( { slug, color }, index ) => (
-												<motion.div
-													key={ slug }
-													style={ {
-														height:
-															normalizedColorSwatchSize *
-															ratio,
-														width:
-															normalizedColorSwatchSize *
-															ratio,
-														background: color,
-														borderRadius:
-															( normalizedColorSwatchSize *
-																ratio ) /
-															2,
-													} }
-													animate={ {
-														scale: 1,
-														opacity: 1,
-													} }
-													initial={ {
-														scale: 0.1,
-														opacity: 0,
-													} }
-													transition={ {
-														delay:
-															index === 1
-																? 0.2
-																: 0.1,
-													} }
-												/>
-											)
-										) }
-									</VStack>
-								) }
+								<motion.div
+									style={ {
+										fontFamily: headingFontFamily,
+										fontSize: 65 * ratio,
+										color: headingColor,
+										fontWeight: headingFontWeight,
+									} }
+									animate={ { scale: 1, opacity: 1 } }
+									initial={ { scale: 0.1, opacity: 0 } }
+									transition={ {
+										delay: 0.3,
+										type: 'tween',
+									} }
+								>
+									Aa
+								</motion.div>
+								<VStack spacing={ 4 * ratio }>
+									{ highlightedColors.map(
+										( { slug, color }, index ) => (
+											<motion.div
+												key={ slug }
+												style={ {
+													height:
+														normalizedColorSwatchSize *
+														ratio,
+													width:
+														normalizedColorSwatchSize *
+														ratio,
+													background: color,
+													borderRadius:
+														( normalizedColorSwatchSize *
+															ratio ) /
+														2,
+												} }
+												animate={ {
+													scale: 1,
+													opacity: 1,
+												} }
+												initial={ {
+													scale: 0.1,
+													opacity: 0,
+												} }
+												transition={ {
+													delay:
+														index === 1 ? 0.2 : 0.1,
+												} }
+											/>
+										)
+									) }
+								</VStack>
 							</HStack>
 						</motion.div>
 						<motion.div

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
@@ -463,20 +463,20 @@ export default function StyleVariationsContainer() {
 			<div className="edit-site-sidebar-navigation-screen-styles__group-header">
 				<Heading level={ 2 }>{ __( 'Typography' ) }</Heading>
 			</div>
-			<div className="edit-site-global-styles-style-variations-container">
+			<Grid
+				columns={ 2 }
+				className="edit-site-global-styles-style-variations-container"
+			>
 				{ uniqueTypographyVariations &&
 					uniqueTypographyVariations.map( ( variation, index ) => {
 						return (
-							<Grid columns={ 2 } key={ index }>
-								<TypographyVariation
-									key={ index }
-									variation={ variation }
-									isColor={ false }
-								/>
-							</Grid>
+							<TypographyVariation
+								key={ index }
+								variation={ variation }
+							/>
 						);
 					} ) }
-			</div>
+			</Grid>
 		</>
 	);
 }