Merge pull request #478 from Codeinwp/feat/onboarding-4-sites-per-row

feat(onboarding): show 4 starter sites per row on laptop and up

Author: ineagu

e2e-tests/specs/onboarding.spec.js

@@ -48,9 +48,12 @@ test.describe('Onboarding', () => {
         expect(await page.locator('.ss-card .ss-badge').count()).toBeGreaterThan(0);
 
         // 'All' and 'Free' should show after you select a category.
+        // Match exactly: card page-shot buttons (e.g. "Gallery", "Ballet Blog",
+        // "All Courses") also contain "all" as a substring, so a non-exact name
+        // match resolves to multiple elements once the grid renders a full page.
         await page.locator('.ob-cat-wrap').first().click();
-        await expect(page.getByRole('button', { name: 'All' })).toBeVisible();
-        await expect(page.getByRole('button', { name: 'Free' })).toBeVisible();
+        await expect(page.getByRole('button', { name: 'All', exact: true })).toBeVisible();
+        await expect(page.getByRole('button', { name: 'Free', exact: true })).toBeVisible();
 
         // Check card structure.
         const firstListedSiteCard = page.locator('.ss-card-wrap').first();

onboarding/src/Components/Sites.js

@@ -27,11 +27,11 @@ const Sites = ( {
 	sortBy,
 	selectedColors,
 } ) => {
-	const [ maxShown, setMaxShown ] = useState( 9 );
+	const [ maxShown, setMaxShown ] = useState( 12 );
 	const { sites = {} } = getSites;
 
 	useEffect( () => {
-		setMaxShown( 9 );
+		setMaxShown( 12 );
 	}, [ editor, category, searchQuery, sortBy, selectedColors ] );
 
 	const getBuilders = () => Object.keys( sites );
@@ -218,9 +218,9 @@ const Sites = ( {
 			const rest = filterByColors( filterByCategory( ranked, category ) ).filter(
 				( site ) => site && site.slug && ! inMatches[ site.slug ]
 			);
-			const remainder = matches.length % 3;
+			const remainder = matches.length % 4;
 			const pad =
-				remainder === 0 ? 0 : Math.min( 3 - remainder, rest.length );
+				remainder === 0 ? 0 : Math.min( 4 - remainder, rest.length );
 
 			return {
 				list: [ ...matches, ...rest ],
@@ -280,7 +280,7 @@ const Sites = ( {
 								return false;
 							}
 
-							setMaxShown( ( shown ) => shown + 9 );
+							setMaxShown( ( shown ) => shown + 12 );
 						} }
 					>
 						<span

onboarding/src/scss/_general.scss

@@ -266,7 +266,7 @@ input.components-text-control__input[type="email"],
 
 @mixin ob-general--laptop() {
   .ob-sites.is-grid {
-    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }