add navigation items

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

@@ -16,6 +16,7 @@ import type { BlockExample, ColorOrigin, MultiOriginPalettes } from './types';
 import ColorExamples from './color-examples';
 import DuotoneExamples from './duotone-examples';
 import { STYLE_BOOK_COLOR_GROUPS } from './constants';
+import NavigationExamples from './navigation-examples';
 
 /**
  * Returns examples color examples for each origin
@@ -177,11 +178,14 @@ function getOverviewBlockExamples(
  * @return {BlockExample[]} An array of block examples.
  */
 export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
+	// Exclude default examples from block to include custom examples for those blocks.
+	const excludedDefaultExamples = [ 'core/heading', 'core/navigation' ];
+
 	const nonHeadingBlockExamples = getBlockTypes()
 		.filter( ( blockType ) => {
 			const { name, example, supports } = blockType;
 			return (
-				name !== 'core/heading' &&
+				! excludedDefaultExamples.includes( name ) &&
 				!! example &&
 				supports?.inserter !== false
 			);
@@ -230,7 +234,15 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 
 	const overviewBlockExamples = getOverviewBlockExamples( colors );
 
+	const navigationExample = {
+		name: 'core/navigation',
+		title: __( 'Navigation' ),
+		category: 'design',
+		content: <NavigationExamples />,
+	};
+
 	return [
+		navigationExample,
 		headingsExample,
 		...colorExamples,
 		...nonHeadingBlockExamples,

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

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import { View } from '@wordpress/primitives';
+import {
+	BlockList,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { __, _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
+	blockEditorPrivateApis
+);
+
+const NAVIGATION_STATES = [
+	{
+		key: 'default',
+		title: __( 'Navigation Item' ),
+	},
+	{
+		key: ':active',
+		title: __( 'Navigation Item (Active)' ),
+	},
+	{
+		key: ':any-link',
+		title: __( 'Navigation Item (Any Link)' ),
+	},
+	{
+		key: ':focus',
+		title: __( 'Navigation Item (Focus)' ),
+	},
+	{
+		key: ':hover',
+		title: __( 'Navigation Item (Hover)' ),
+	},
+	{
+		key: ':link',
+		title: __( 'Navigation Item (Link)' ),
+	},
+	{
+		key: ':visited',
+		title: __( 'Navigation Item (Visited)' ),
+	},
+];
+
+function NavigationExamples() {
+	const [ elementsLink ] = useGlobalStyle( 'elements.link' );
+
+	const blocks = [
+		...NAVIGATION_STATES.map( ( { key } ) => {
+			const styles =
+				( key !== 'default' ? elementsLink[ key ] : elementsLink ) ||
+				{};
+			return createBlock( 'core/navigation-link', {
+				label: _x( 'About', 'navigation link preview example' ),
+				url: 'https://example.com',
+				style: styles,
+			} );
+		} ),
+	];
+
+	return (
+		<Grid columns={ 2 } gap={ 6 }>
+			{ blocks.map( ( block, index ) => (
+				<View
+					key={ `navigation-example-${ NAVIGATION_STATES[ index ].key }` }
+				>
+					<span className="edit-site-style-book__example-subtitle">
+						{ NAVIGATION_STATES[ index ].title }
+					</span>
+					<ExperimentalBlockEditorProvider value={ [ block ] }>
+						<BlockList appender={ false } />
+					</ExperimentalBlockEditorProvider>
+				</View>
+			) ) }
+		</Grid>
+	);
+}
+
+export default NavigationExamples;