Improve tags UI (#630)

* Improve tags ui * Added the styled external link * Fix focus style --------- Co-authored-by: Jason Crist <jcrist@pbking.com>
WordPress · May 14, 2024 · cd7f1ec · cd7f1ec
1 parent 7aed6ce
commit cd7f1ec
Showing 1 changed file with 22 additions and 8 deletions.
diff --git a/src/editor-sidebar/metadata-editor-modal.js b/src/editor-sidebar/metadata-editor-modal.js
@@ -15,6 +15,7 @@ import {
 	// eslint-disable-next-line
 	__experimentalText as Text,
 	BaseControl,
+	FormTokenField,
 	Modal,
 	Button,
 	TextControl,
@@ -97,6 +98,10 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 			} );
 	};
 
+	const onChangeTags = ( newTags ) => {
+		setTheme( { ...theme, tags_custom: newTags.join( ', ' ) } );
+	};
+
 	const onUpdateImage = ( image ) => {
 		setTheme( { ...theme, screenshot: image.url } );
 	};
@@ -179,17 +184,26 @@ export const ThemeMetadataEditorModal = ( { onRequestClose } ) => {
 						'create-block-theme'
 					) }
 				/>
-				<TextareaControl
+				<FormTokenField
 					label={ __( 'Theme tags', 'create-block-theme' ) }
-					value={ theme.tags_custom }
-					onChange={ ( value ) =>
-						setTheme( { ...theme, tags_custom: value } )
+					value={
+						theme.tags_custom ? theme.tags_custom.split( ', ' ) : []
 					}
-					placeholder={ __(
-						'A comma-separated collection of tags',
-						'create-block-theme'
-					) }
+					onChange={ onChangeTags }
 				/>
+				<HStack
+					style={ {
+						marginTop: '-20px',
+						marginBottom: '1rem',
+					} }
+				>
+					<ExternalLink
+						href="https://make.wordpress.org/themes/handbook/review/required/theme-tags/"
+						style={ { fontSize: '12px' } }
+					>
+						{ __( 'Read more.', 'create-block-theme' ) }
+					</ExternalLink>
+				</HStack>
 				<TextareaControl
 					label={ __( 'Recommended Plugins', 'create-block-theme' ) }
 					help={