diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 2edea0fdbc3da3..0cab4c13aa3ee7 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -202,6 +202,11 @@ function GlobalStylesStyleBook() { navigator.goTo( '/colors/palette' ); return; } + if ( blockName === 'typography' ) { + // Go to typography Global Styles. + navigator.goTo( '/typography' ); + return; + } // Now go to the selected block. navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) ); diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js index afa9f489dde22b..342fb1b5db52d2 100644 --- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js +++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js @@ -132,6 +132,11 @@ export default function GlobalStylesUIWrapper() { onPathChange( '/colors/palette' ); return; } + if ( blockName === 'typography' ) { + // Go to typography Global Styles. + onPathChange( '/typography' ); + return; + } // Now go to the selected block. onPathChange( diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts index 9aace34e64cbf1..7b13e3d4ef7f60 100644 --- a/packages/edit-site/src/components/style-book/constants.ts +++ b/packages/edit-site/src/components/style-book/constants.ts @@ -107,6 +107,11 @@ export const STYLE_BOOK_THEME_SUBCATEGORIES: Omit< ]; export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [ + { + slug: 'overview', + title: __( 'Overview' ), + blocks: [], + }, { slug: 'text', title: __( 'Text' ), @@ -249,6 +254,10 @@ export const STYLE_BOOK_IFRAME_STYLES = ` .edit-site-style-book__example-preview { width: 100%; } + + .is-wide .edit-site-style-book__example-preview { + width: calc(100% - 120px); + } .edit-site-style-book__example-preview .block-editor-block-list__insertion-point, .edit-site-style-book__example-preview .block-list-appender { diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx index 9f4badd99a6582..2fefe227ca52b7 100644 --- a/packages/edit-site/src/components/style-book/examples.tsx +++ b/packages/edit-site/src/components/style-book/examples.tsx @@ -62,6 +62,103 @@ function getColorExamples( colors: MultiOriginPalettes ): BlockExample[] { return examples; } +/** + * Returns examples for the overview page. + * + * @param {MultiOriginPalettes} colors Global Styles color palettes per origin. + * @return {BlockExample[]} An array of block examples. + */ +function getOverviewBlockExamples( + colors: MultiOriginPalettes +): BlockExample[] { + const examples: BlockExample[] = []; + + // Get theme palette from colors. + const themePalette = colors.colors.find( + ( origin: ColorOrigin ) => origin.slug === 'theme' + ); + + if ( themePalette ) { + const themeColorexample: BlockExample = { + name: 'theme-colors', + title: __( 'Colors' ), + category: 'overview', + content: ( + + ), + }; + + examples.push( themeColorexample ); + } + + const headingBlock = createBlock( 'core/heading', { + content: __( + `AaBbCcDdEeFfGgHhiiJjKkLIMmNnOoPpQakRrssTtUuVVWwXxxYyZzOl23356789X{(…)},2!*&:/A@HELFO™` + ), + level: 1, + } ); + const firstParagraphBlock = createBlock( 'core/paragraph', { + content: __( + `A paragraph in a website refers to a distinct block of text that is used to present and organize information. It is a fundamental unit of content in web design and is typically composed of a group of related sentences or thoughts focused on a particular topic or idea. Paragraphs play a crucial role in improving the readability and user experience of a website. They break down the text into smaller, manageable chunks, allowing readers to scan the content more easily.` + ), + } ); + const secondParagraphBlock = createBlock( 'core/paragraph', { + content: __( + `Additionally, paragraphs help structure the flow of information and provide logical breaks between different concepts or pieces of information. In terms of formatting, paragraphs in websites are commonly denoted by a vertical gap or indentation between each block of text. This visual separation helps visually distinguish one paragraph from another, creating a clear and organized layout that guides the reader through the content smoothly.` + ), + } ); + + const textExample = { + name: 'typography', + title: __( 'Typography' ), + category: 'overview', + blocks: [ + headingBlock, + createBlock( + 'core/group', + { + layout: { + type: 'grid', + columnCount: 2, + minimumColumnWidth: '12rem', + }, + style: { + spacing: { + blockGap: '1.5rem', + }, + }, + }, + [ firstParagraphBlock, secondParagraphBlock ] + ), + ], + }; + examples.push( textExample ); + + const otherBlockExamples = [ + 'core/image', + 'core/separator', + 'core/buttons', + 'core/pullquote', + 'core/search', + ]; + + // Get examples for other blocks and put them in order of above array. + otherBlockExamples.forEach( ( blockName ) => { + const blockType = getBlockType( blockName ); + if ( blockType && blockType.example ) { + const blockExample: BlockExample = { + name: blockName, + title: blockType.title, + category: 'overview', + blocks: getBlockFromExample( blockName, blockType.example ), + }; + examples.push( blockExample ); + } + } ); + + return examples; +} + /** * Returns a list of examples for registered block types. * @@ -109,5 +206,12 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] { }; const colorExamples = getColorExamples( colors ); - return [ headingsExample, ...colorExamples, ...nonHeadingBlockExamples ]; + const overviewBlockExamples = getOverviewBlockExamples( colors ); + + return [ + headingsExample, + ...colorExamples, + ...nonHeadingBlockExamples, + ...overviewBlockExamples, + ]; } diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 9918c169ff6ab0..de4c38bd40c05d 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -203,6 +203,22 @@ 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 { base: baseConfig } = useContext( GlobalStylesContext ); const goTo = getStyleBookNavigationFromPath( path ); @@ -286,7 +302,7 @@ function StyleBook( { ) : ( { '[name="style-book-canvas"]' ); + // In the Overview tab, expect a button for the main typography section. await expect( styleBookIframe.getByRole( 'button', { - name: 'Open Headings styles in Styles panel', - } ) - ).toBeVisible(); - await expect( - styleBookIframe.getByRole( 'button', { - name: 'Open Paragraph styles in Styles panel', + name: 'Open Typography styles in Styles panel', } ) ).toBeVisible(); @@ -83,13 +79,13 @@ test.describe( 'Style Book', () => { await page .frameLocator( '[name="style-book-canvas"]' ) .getByRole( 'button', { - name: 'Open Headings styles in Styles panel', + name: 'Open Image styles in Styles panel', } ) .click(); await expect( page.locator( - 'role=region[name="Editor settings"i] >> role=heading[name="Heading"i]' + 'role=region[name="Editor settings"i] >> role=heading[name="Image"i]' ) ).toBeVisible(); } ); @@ -103,7 +99,7 @@ test.describe( 'Style Book', () => { await page .frameLocator( '[name="style-book-canvas"]' ) .getByRole( 'button', { - name: 'Open Quote styles in Styles panel', + name: 'Open Pullquote styles in Styles panel', } ) .click();