Move tag editor to below description editor.

Author: sheabunge

src/css/edit.scss

@@ -43,6 +43,15 @@
 	}
 }
 
+.components-form-token-field__input-container {
+	background: #fff;
+	border-color: #c3c4c7;
+
+	> .components-flex {
+		padding: 12px;
+	}
+}
+
 #titlediv,
 .snippet-type-container {
 	margin-block-end: 24px;

src/js/components/EditorSidebar/EditorSidebar.tsx

@@ -16,7 +16,6 @@ import { ActivationSwitch } from './controls/ActivationSwitch'
 import { DeleteButton } from './actions/DeleteButton'
 import { PriorityInput } from './controls/PriorityInput'
 import { RTLControl } from './controls/RTLControl'
-import { TagsInput } from './controls/TagsInput'
 
 export interface EditorSidebarProps {
 	setIsUpgradeDialogOpen: Dispatch<SetStateAction<boolean>>
@@ -41,8 +40,6 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = ({ setIsUpgradeDialog
 				<ShortcodeInfo />
 				<PriorityInput />
 
-				{window.CODE_SNIPPETS_EDIT?.tagOptions.enabled ? <TagsInput /> : null}
-
 				{snippet.id
 					? <div className="row-actions visible inline-form-field">
 						<ExportButtons />

src/js/components/EditorSidebar/actions/ShortcodeInfo.tsx

@@ -104,12 +104,7 @@ const ModalContent = () => {
 
 			<p className="shortcode-tag-wrapper">
 				<code className="shortcode-tag">{shortcodeTag}</code>
-
-				<CopyToClipboardButton
-					primary
-					title={__('Copy shortcode to clipboard', 'code-snippets')}
-					text={shortcodeTag}
-				/>
+				<CopyToClipboardButton primary text={shortcodeTag} />
 			</p>
 
 			<p>
@@ -136,7 +131,7 @@ export const ShortcodeInfo: React.FC = () => {
 		? <div className="inline-form-field">
 			<h4>{__('Shortcode', 'code-snippets')}</h4>
 			<Button onClick={() => setIsModalOpen(true)} disabled={isReadOnly}>
-				{__('Use Shortcode', 'code-snippets')}
+				{__('See Options', 'code-snippets')}
 			</Button>
 
 			{isModalOpen

src/js/components/SnippetForm/SnippetForm.tsx

@@ -12,6 +12,7 @@ import { ConfirmDialog } from '../common/ConfirmDialog'
 import { UpsellDialog } from '../common/UpsellDialog'
 import { EditorSidebar } from '../EditorSidebar'
 import { UpsellBanner } from '../common/UpsellBanner'
+import { TagsEditor } from './fields/TagsEditor'
 import { CodeEditor } from './fields/CodeEditor'
 import { DescriptionEditor } from './fields/DescriptionEditor'
 import { NameInput } from './fields/NameInput'
@@ -165,6 +166,7 @@ const EditFormWrap: React.FC = () => {
 				<div className="snippet-form-lower">
 					<UpsellBanner />
 					<DescriptionEditor />
+					<TagsEditor />
 				</div>
 
 				<EditorSidebar setIsUpgradeDialogOpen={setIsUpgradeDialogOpen} />

src/js/components/SnippetForm/fields/SnippetLocationInput.tsx

@@ -49,7 +49,7 @@ export const SnippetLocationInput: React.FC = () => {
 	return isCondition(snippet)
 		? null
 		: <div className="block-form-field">
-			<h4><label htmlFor="snippet-location">{__('Snippet location', 'code-snippets')}</label></h4>
+			<h4><label htmlFor="snippet-location">{__('Location', 'code-snippets')}</label></h4>
 			<Select
 				inputId="snippet-location"
 				className="code-snippets-select"

…nts/EditorSidebar/controls/TagsInput.tsx …onents/SnippetForm/fields/TagsEditor.tsxsrc/js/components/EditorSidebar/controls/TagsInput.tsx renamed to src/js/components/SnippetForm/fields/TagsEditor.tsx src/js/components/EditorSidebar/controls/TagsInput.tsx renamed to src/js/components/SnippetForm/fields/TagsEditor.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
-import { __, _x } from '@wordpress/i18n'
+import { __ } from '@wordpress/i18n'
 import { FormTokenField } from '@wordpress/components'
 import { useSnippetForm } from '../../../hooks/useSnippetForm'
 
 const options = window.CODE_SNIPPETS_EDIT?.tagOptions
 
-export const TagsInput: React.FC = () => {
+export const TagsEditor: React.FC = () => {
 	const { snippet, setSnippet, isReadOnly } = useSnippetForm()
 
 	return options?.enabled
 		? <div className="snippet-tags-container">
-			<h4><label htmlFor="components-form-token-input-0">{__('Tags', 'code-snippets')}</label></h4>
+			<h3><label htmlFor="components-form-token-input-0">{__('Snippet Tags', 'code-snippets')}</label></h3>
 
 			<FormTokenField
 				label=""