Add a landing section to stylebook tabs (WordPress#66545)

Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: andrewserong <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: beafialho <[email protected]>

Author: 6 people

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 ) );

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(

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 {

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: (
+				<ColorExamples colors={ themePalette.colors } type={ colors } />
+			),
+		};
+
+		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,
+	];
 }

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( {
 					</Tabs>
 				) : (
 					<StyleBookBody
-						examples={ examples }
+						examples={ examplesForSinglePageUse }
 						isSelected={ isSelected }
 						onClick={ onClick }
 						onSelect={ onSelect }

test/e2e/specs/site-editor/style-book.spec.js

@@ -52,14 +52,10 @@ test.describe( 'Style Book', () => {
 			'[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();