Fix: update snippet add/edit screen markup & headings structure

src/css/edit.scss

@@ -34,6 +34,12 @@
 }
 
 .snippet-description-container {
+	label {
+		font-size: 1.16em;
+		font-weight: 600;
+		text-transform: unset;
+	}
+
 	.wp-editor-tools {
 		padding-block-start: 5px;
 	}
@@ -59,20 +65,16 @@
 	}
 }
 
-#titlediv,
-.snippet-type-container {
-	margin-block-end: 24px;
-}
-
 .above-snippet-code {
 	margin-block: 0 15px;
 	display: flex;
 	align-items: center;
 	margin-inline: 0;
 	gap: 8px;
 
-	h2 {
-		margin: 0;
+	label {
+		font-size: 1.16em;
+		font-weight: 600;
 	}
 
 	.expand-editor-button {

src/css/edit/_form.scss

@@ -19,10 +19,6 @@ $sidebar-gap: 30px;
 	.small-badge {
 		margin-inline-start: 0.5em;
 	}
-
-	.badge {
-		float: inline-end;
-	}
 }
 
 
@@ -32,7 +28,7 @@ $sidebar-gap: 30px;
 		display: flex;
 		align-items: center;
 		gap: 8px;
-		overflow: hidden;
+		flex: 1;
 		border-color: #ccc;
 		padding-block: 6px;
 		padding-inline: 12px;
@@ -71,6 +67,13 @@ $sidebar-gap: 30px;
 		grid-area: lower;
 	}
 
+	.snippet-form-upper,
+	.snippet-form-lower {
+		display: flex;
+		flex-flow: column;
+		gap: 24px;
+	}
+
 	.snippet-editor-sidebar {
 		grid-area: span 3 / sidebar;
 		max-inline-size: $sidebar-width;

src/css/edit/_gpt.scss

@@ -32,6 +32,14 @@
 	}
 }
 
+.snippet-tags-container {
+	label {
+		font-size: 1.16em;
+		font-weight: 600;
+		text-transform: unset;
+	}
+}
+
 .code-line-explanation {
 	display: flex;
 	cursor: default;

src/css/edit/_sidebar.scss

@@ -1,23 +1,30 @@
 @use '../common/theme';
 
-.snippet-priority input {
-	inline-size: 4em;
+.snippet-priority {
+	.priority-input-tooltip {
+		margin-inline-end: auto;
+	}
+
+	input {
+		inline-size: 4em;
+	}
 }
 
 .activation-switch-container,
 .lock-control-container {
+	inline-size: 100%;
+	display: flex;
+	flex-flow: row;
+	gap: 5px;
+	justify-content: center;
+	align-items: center;
+
 	label {
-		display: flex;
-		flex-flow: row;
-		gap: 5px;
-		justify-content: center;
-		align-items: center;
+		font-weight: 600;
 	}
-}
 
-.code-snippets-modal {
-	p h4 {
-		margin-block-start: 0;
+	span:first-of-type {
+		margin-inline-start: auto;
 	}
 }
 
@@ -67,21 +74,13 @@
 		flex-flow: column;
 		gap: 1em;
 
-		h4 {
-			margin-block: 0.5em;
-			margin-inline: 0;
-		}
-
 		.inline-form-field {
 			display: flex;
 			flex-flow: row wrap;
+			justify-content: space-between;
 			align-items: center;
 			gap: 5px;
 
-			label:last-of-type, input:last-of-type {
-				margin-inline-start: auto;
-			}
-
 			&.lock-control-container {
 				border-block-start: 1px solid #eee;
 				padding-block-start: 1em;
@@ -101,23 +100,17 @@
 			flex-flow: column;
 			gap: 4px;
 
-			h4 {
-				margin-block-end: 0;
-			}
 		}
 	}
 
-	h4 .badge {
-		float: inline-end;
-
-		+ .badge {
-			margin-inline-end: 5px;
-		}
+	label {
+		font-weight: 600;
 	}
 
 	.beta-badge {
 		color: theme.$accent;
 		border: 1px solid currentcolor;
+		margin-inline-start: auto;
 	}
 
 	.components-form-token-field {

src/js/components/EditMenu/ConditionModal/ConditionModalButton.tsx

@@ -18,14 +18,14 @@ export const ConditionModalButton: React.FC<ConditionModalButtonProps> = ({ setI
 	const hasCondition = 0 !== snippet.conditionId
 
 	return (
-		<div className={classnames('conditions-editor-open block-form-field', hasCondition ? 'has-condition' : 'no-condition')}>
+		<div className={classnames('conditions-editor-open inline-form-field', hasCondition ? 'has-condition' : 'no-condition')}>
 			{isCondition(snippet) ? null
 				: <>
-					<h4>
-						{__('Conditions', 'code-snippets')}
-						<Badge name="beta" small>{__('beta', 'code-snippets')}</Badge>
-						{!isLicensed() && <Badge name="pro" small>{__('Pro', 'code-snippets')}</Badge>}
-					</h4>
+					<strong>{__('Conditions', 'code-snippets')}</strong>
+
+					<Badge name="beta" small>{__('beta', 'code-snippets')}</Badge>
+
+					{!isLicensed() && <Badge name="pro" small>{__('Pro', 'code-snippets')}</Badge>}
 
 					<Button large disabled={isReadOnly} onClick={() => setIsDialogOpen(true)}>
 						<Badge name="cond" small />

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

@@ -107,18 +107,16 @@ const ModalContent = () => {
 				<CopyToClipboardButton primary text={shortcodeTag} />
 			</p>
 
-			<p>
-				<h4>{__('Shortcode Options', 'code-snippets')}</h4>
-
-				<CheckboxList
-					options={['php', 'format', 'shortcodes']}
-					checked={options}
-					disabled={isReadOnly}
-					setChecked={setOptions}
-					optionLabels={OPTION_LABELS}
-					optionDescriptions={OPTION_DESCRIPTIONS}
-				/>
-			</p>
+			<h2>{__('Shortcode Options', 'code-snippets')}</h2>
+
+			<CheckboxList
+				options={['php', 'format', 'shortcodes']}
+				checked={options}
+				disabled={isReadOnly}
+				setChecked={setOptions}
+				optionLabels={OPTION_LABELS}
+				optionDescriptions={OPTION_DESCRIPTIONS}
+			/>
 		</>
 	)
 }
@@ -129,7 +127,8 @@ export const ShortcodeInfo: React.FC = () => {
 
 	return 'content' === snippet.scope && snippet.id
 		? <div className="inline-form-field">
-			<h4>{__('Shortcode', 'code-snippets')}</h4>
+			<strong>{__('Shortcode', 'code-snippets')}</strong>
+
 			<Button onClick={() => setIsModalOpen(true)} disabled={isReadOnly}>
 				{__('See options', 'code-snippets')}
 			</Button>

src/js/components/EditMenu/EditorSidebar/controls/ActivationSwitch.tsx

@@ -10,29 +10,29 @@ export const ActivationSwitch = () => {
 
 	return (
 		<div className="inline-form-field activation-switch-container">
-			<h4>{__('Status')}</h4>
+			<label htmlFor="activation-switch">{__('Status', 'code-snippets')}</label>
 
-			<label>
+			<span className="status-text">
 				{snippet.active
 					? __('Active', 'code-snippets')
 					: __('Inactive', 'code-snippets')}
+			</span>
 
-				<input
-					id="activation-switch"
-					type="checkbox"
-					checked={snippet.active}
-					disabled={isWorking || !!snippet.shared_network}
-					className="switch"
-					onChange={() => {
-						submitSnippet(
-							{ id: snippet.id, network: snippet.network, active: !snippet.active },
-							snippet.active ? SubmitSnippetAction.SAVE_AND_DEACTIVATE : SubmitSnippetAction.SAVE_AND_ACTIVATE
-						)
-							.then(() => undefined)
-							.catch(handleUnknownError)
-					}}
-				/>
-			</label>
+			<input
+				id="activation-switch"
+				type="checkbox"
+				checked={snippet.active}
+				disabled={isWorking || !!snippet.shared_network}
+				className="switch"
+				onChange={() => {
+					submitSnippet(
+						{ id: snippet.id, network: snippet.network, active: !snippet.active },
+						snippet.active ? SubmitSnippetAction.SAVE_AND_DEACTIVATE : SubmitSnippetAction.SAVE_AND_ACTIVATE
+					)
+						.then(() => undefined)
+						.catch(handleUnknownError)
+				}}
+			/>
 		</div>
 	)
 }

src/js/components/EditMenu/EditorSidebar/controls/LockControl.tsx

@@ -26,24 +26,24 @@ export const LockControl: React.FC = () => {
 
 	return (
 		<div className="inline-form-field lock-control-container">
-			<h4>{__('Lock snippet', 'code-snippets')}</h4>
+			<label htmlFor="snippet-lock">{__('Lock snippet', 'code-snippets')}</label>
 
 			<Tooltip block end>
 				{__('Mark this snippet as read-only to prevent accidental changes or deletion.', 'code-snippets')}
 			</Tooltip>
 
-			<label>
+			<span className="lock-status-text">
 				{snippet.locked ? __('Locked', 'code-snippets') : __('Unlocked', 'code-snippets')}
-
-				<input
-					id="snippet-lock"
-					type="checkbox"
-					checked={snippet.locked}
-					disabled={isWorking}
-					className="switch"
-					onChange={handleToggle}
-				/>
-			</label>
+			</span>
+
+			<input
+				id="snippet-lock"
+				type="checkbox"
+				checked={snippet.locked}
+				disabled={isWorking}
+				className="switch"
+				onChange={handleToggle}
+			/>
 		</div>
 	)
 }

src/js/components/EditMenu/EditorSidebar/controls/MultisiteSharingSettings.tsx

@@ -8,34 +8,34 @@ export const MultisiteSharingSettings: React.FC = () => {
 
 	return (
 		<div className="inline-form-field activation-switch-container">
-			<h4>
+			<label htmlFor="snippet_sharing">
 				{__('Share with Subsites', 'code-snippets')}
-			</h4>
+			</label>
 
 			<Tooltip inline start>
 				{__('Instead of running on every site, allow this snippet to be activated on individual sites on the network.', 'code-snippets')}
 			</Tooltip>
 
-			<label>
+			<span className="sharing-status-text">
 				{snippet.shared_network
 					? __('Enabled', 'code-snippets')
 					: __('Disabled', 'code-snippets')}
+			</span>
 
-				<input
-					id="snippet_sharing"
-					name="snippet_sharing"
-					type="checkbox"
-					className="switch"
-					checked={!!snippet.shared_network}
-					disabled={isReadOnly}
-					onChange={event =>
-						setSnippet(previous => ({
-							...previous,
-							active: false,
-							shared_network: event.target.checked
-						}))}
-				/>
-			</label>
+			<input
+				id="snippet_sharing"
+				name="snippet_sharing"
+				type="checkbox"
+				className="switch"
+				checked={!!snippet.shared_network}
+				disabled={isReadOnly}
+				onChange={event =>
+					setSnippet(previous => ({
+						...previous,
+						active: false,
+						shared_network: event.target.checked
+					}))}
+			/>
 		</div>
 	)
 }

src/js/components/EditMenu/EditorSidebar/controls/PriorityInput.tsx

@@ -8,13 +8,11 @@ export const PriorityInput = () => {
 
 	return (
 		<div className="snippet-priority inline-form-field">
-			<h4>
-				<label htmlFor="snippet-priority">
-					{__('Priority', 'code-snippets')}
-				</label>
-			</h4>
+			<label htmlFor="snippet-priority">
+				{__('Priority', 'code-snippets')}
+			</label>
 
-			<Tooltip block end>
+			<Tooltip block end className="priority-input-tooltip">
 				{__('Snippets with a lower priority number will run before those with a higher number.', 'code-snippets')}
 			</Tooltip>