improving button state titles

WordPress · Dec 4, 2024 · b1c5dbd · b1c5dbd
1 parent 7869490
commit b1c5dbd
Showing 1 changed file with 37 additions and 18 deletions.
diff --git a/packages/edit-site/src/components/style-book/button-examples.tsx b/packages/edit-site/src/components/style-book/button-examples.tsx
@@ -19,23 +19,43 @@ const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
 
-const BUTTON_STATE_NAMES = [
-	'default',
-	':active',
-	':any-link',
-	':focus',
-	':hover',
-	':link',
-	':visited',
+const BUTTON_STATES = [
+	{
+		key: 'default',
+		title: __( 'Button' ),
+	},
+	{
+		key: ':active',
+		title: __( 'Button (Active)' ),
+	},
+	{
+		key: ':any-link',
+		title: __( 'Button (Any Link)' ),
+	},
+	{
+		key: ':focus',
+		title: __( 'Button (Focus)' ),
+	},
+	{
+		key: ':hover',
+		title: __( 'Button (Hover)' ),
+	},
+	{
+		key: ':link',
+		title: __( 'Button (Link)' ),
+	},
+	{
+		key: ':visited',
+		title: __( 'Button (Visited)' ),
+	},
 ];
 
 function ButtonExamples() {
 	const [ elementsButton ] = useGlobalStyle( 'elements.button' );
-	const blocks = BUTTON_STATE_NAMES.map( ( state ) => {
+	const blocks = BUTTON_STATES.map( ( { key } ) => {
 		const styles =
-			( state !== 'default'
-				? elementsButton[ state ]
-				: elementsButton ) || {};
+			( key !== 'default' ? elementsButton[ key ] : elementsButton ) ||
+			{};
 		return createBlock( 'core/button', {
 			text: __( 'Call to Action' ),
 			style: styles,
@@ -44,15 +64,14 @@ function ButtonExamples() {
 
 	return (
 		<Grid columns={ 2 } gap={ 6 }>
-			{ blocks.map( ( block, key ) => (
-				<View key={ `button-example-${ key }` }>
+			{ blocks.map( ( block, index ) => (
+				<View key={ `button-example-${ BUTTON_STATES[ index ].key }` }>
+					<span className="edit-site-style-book__example-subtitle">
+						{ BUTTON_STATES[ index ].title }
+					</span>
 					<ExperimentalBlockEditorProvider value={ [ block ] }>
 						<BlockList appender={ false } />
 					</ExperimentalBlockEditorProvider>
-
-					<span className="edit-site-style-book__example-subtitle">
-						{ BUTTON_STATE_NAMES[ key ] }
-					</span>
 				</View>
 			) ) }
 		</Grid>