Integrate overview section.

Author: tellthemachines

packages/edit-site/src/classic-stylebook.js

@@ -33,7 +33,10 @@ import { store as editSiteStore } from './store';
 import Layout from './components/layout';
 import { unlock } from './lock-unlock';
 import SidebarNavigationScreen from './components/sidebar-navigation-screen/index.js';
-import { StyleBookBody } from './components/style-book';
+import {
+	StyleBookBody,
+	getExamplesForSinglePageUse,
+} from './components/style-book';
 import { getExamples } from './components/style-book/examples';
 
 const { RouterProvider } = unlock( routerPrivateApis );
@@ -47,6 +50,9 @@ function ClassicStylebookLayout() {
 	);
 
 	const examples = getExamples();
+	// Dedupe the examples as they include all categories with repeat sections.
+	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
+
 	const route = {
 		name: 'stylebook',
 		areas: {
@@ -64,7 +70,7 @@ function ClassicStylebookLayout() {
 					showTabs={ false }
 					isSelected={ () => null }
 					onSelect={ () => null }
-					examples={ examples }
+					examples={ examplesForSinglePageUse }
 					onClick={ () => null }
 					settings={ settings }
 					sizes={ sizes }

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

@@ -73,8 +73,8 @@ function getOverviewBlockExamples(
 ): BlockExample[] {
 	const examples: BlockExample[] = [];
 
-	// Get theme palette from colors.
-	const themePalette = colors.colors.find(
+	// Get theme palette from colors if they exist.
+	const themePalette = colors?.colors.find(
 		( origin: ColorOrigin ) => origin.slug === 'theme'
 	);
 

packages/edit-site/src/components/style-book/index.js

@@ -177,6 +177,31 @@ function useMultiOriginPalettes() {
 	return palettes;
 }
 
+/**
+ * Get deduped examples for single page stylebook.
+ * @param {Array} examples Array of examples.
+ * @return {Array} Deduped examples.
+ */
+export function getExamplesForSinglePageUse( examples ) {
+	const examplesForSinglePageUse = [];
+	const overviewCategoryExamples = getExamplesByCategory(
+		{ slug: 'overview' },
+		examples
+	);
+	examplesForSinglePageUse.push( ...overviewCategoryExamples.examples );
+	const otherExamples = examples.filter( ( example ) => {
+		return (
+			example.category !== 'overview' &&
+			! overviewCategoryExamples.examples.find(
+				( overviewExample ) => overviewExample.name === example.name
+			)
+		);
+	} );
+	examplesForSinglePageUse.push( ...otherExamples );
+
+	return examplesForSinglePageUse;
+}
+
 function StyleBook( {
 	enableResizing = true,
 	isSelected,
@@ -203,21 +228,7 @@ function StyleBook( {
 		[ examples ]
 	);
 
-	const examplesForSinglePageUse = [];
-	const overviewCategoryExamples = getExamplesByCategory(
-		{ slug: 'overview' },
-		examples
-	);
-	examplesForSinglePageUse.push( ...overviewCategoryExamples.examples );
-	const otherExamples = examples.filter( ( example ) => {
-		return (
-			example.category !== 'overview' &&
-			! overviewCategoryExamples.examples.find(
-				( overviewExample ) => overviewExample.name === example.name
-			)
-		);
-	} );
-	examplesForSinglePageUse.push( ...otherExamples );
+	const examplesForSinglePageUse = getExamplesForSinglePageUse( examples );
 
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 	const goTo = getStyleBookNavigationFromPath( path );