Stylebook: render overview colors in 4 columns (WordPress#67597)

* render overview colors in 4 columns

* use templateColums instead of colums to enable responsive columns

* use templateColumns instead of columns

* tweak CSS

Co-authored-by: matiasbenedetto <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: jasmussen <[email protected]>

packages/edit-site/src/components/style-book/color-examples.tsx

@@ -18,13 +18,25 @@ import {
  */
 import type { Color, Gradient } from './types';
 
-const ColorExamples = ( { colors, type } ): JSX.Element | null => {
+type Props = {
+	colors: Color[] | Gradient[];
+	type: 'colors' | 'gradients';
+	templateColumns?: string | number;
+	itemHeight?: string;
+};
+
+const ColorExamples = ( {
+	colors,
+	type,
+	templateColumns = '1fr 1fr',
+	itemHeight = '52px',
+}: Props ): JSX.Element | null => {
 	if ( ! colors ) {
 		return null;
 	}
 
 	return (
-		<Grid columns={ 2 } rowGap={ 8 } columnGap={ 16 }>
+		<Grid templateColumns={ templateColumns } rowGap={ 8 } columnGap={ 16 }>
 			{ colors.map( ( color: Color | Gradient ) => {
 				const className =
 					type === 'gradients'
@@ -35,7 +47,13 @@ const ColorExamples = ( { colors, type } ): JSX.Element | null => {
 					className
 				);
 
-				return <View key={ color.slug } className={ classes } />;
+				return (
+					<View
+						key={ color.slug }
+						className={ classes }
+						style={ { height: itemHeight } }
+					/>
+				);
 			} ) }
 		</Grid>
 	);

packages/edit-site/src/components/style-book/constants.ts

@@ -220,7 +220,6 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 	}
 
 	.edit-site-style-book__color-example {
-		height: 32px;
 		border: 1px solid color-mix( in srgb, currentColor 10%, transparent );
 	}
 

packages/edit-site/src/components/style-book/examples.tsx

@@ -89,7 +89,12 @@ function getOverviewBlockExamples(
 			title: __( 'Colors' ),
 			category: 'overview',
 			content: (
-				<ColorExamples colors={ themePalette.colors } type={ colors } />
+				<ColorExamples
+					colors={ themePalette.colors }
+					type={ colors }
+					templateColumns="repeat(auto-fill, minmax( 200px, 1fr ))"
+					itemHeight="32px"
+				/>
 			),
 		};