diff --git a/packages/edit-site/src/classic-stylebook.js b/packages/edit-site/src/classic-stylebook.js index b8b389d6e9baa2..5ab78a8af49ea3 100644 --- a/packages/edit-site/src/classic-stylebook.js +++ b/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 } diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx index 2fefe227ca52b7..5e47480631bc5e 100644 --- a/packages/edit-site/src/components/style-book/examples.tsx +++ b/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' ); diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 6860b5cb122deb..2f6090f60fd004 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/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 );