Add button states in the stylebook design section

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

@@ -0,0 +1,62 @@
+/**
+ * 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 { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
+	blockEditorPrivateApis
+);
+
+const BUTTON_STATE_NAMES = [
+	'default',
+	':active',
+	':any-link',
+	':focus',
+	':hover',
+	':link',
+	':visited',
+];
+
+function ButtonExamples() {
+	const [ elementsButton ] = useGlobalStyle( 'elements.button' );
+	const blocks = BUTTON_STATE_NAMES.map( ( state ) => {
+		const styles =
+			( state !== 'default'
+				? elementsButton[ state ]
+				: elementsButton ) || {};
+		return createBlock( 'core/button', {
+			text: __( 'Call to Action' ),
+			style: styles,
+		} );
+	} );
+
+	return (
+		<Grid columns={ 2 } gap={ 6 }>
+			{ blocks.map( ( block, key ) => (
+				<View key={ `button-example-${ key }` }>
+					<ExperimentalBlockEditorProvider value={ [ block ] }>
+						<BlockList appender={ false } />
+					</ExperimentalBlockEditorProvider>
+
+					<span className="edit-site-style-book__example-subtitle">
+						{ BUTTON_STATE_NAMES[ key ] }
+					</span>
+				</View>
+			) ) }
+		</Grid>
+	);
+}
+
+export default ButtonExamples;

packages/edit-site/src/components/style-book/constants.ts

@@ -239,6 +239,11 @@ export const STYLE_BOOK_IFRAME_STYLES = `
 		text-transform: uppercase;
 	}
 
+	.edit-site-style-book__example-subtitle {
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 9px;
+	}
+
 	.edit-site-style-book__subcategory-title {
 		font-size: 16px;
 		margin-bottom: 40px;

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 ButtonExamples from './button-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/button' ];
+
 	const nonHeadingBlockExamples = getBlockTypes()
 		.filter( ( blockType ) => {
 			const { name, example, supports } = blockType;
 			return (
-				name !== 'core/heading' &&
+				! excludedDefaultExamples.includes( name ) &&
 				!! example &&
 				supports?.inserter !== false
 			);
@@ -227,10 +231,17 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 		} ),
 	};
 	const colorExamples = getColorExamples( colors );
-
 	const overviewBlockExamples = getOverviewBlockExamples( colors );
 
+	const buttonExample = {
+		name: 'core/button',
+		title: __( 'Button' ),
+		category: 'design',
+		content: <ButtonExamples />,
+	};
+
 	return [
+		buttonExample,
 		headingsExample,
 		...colorExamples,
 		...nonHeadingBlockExamples,