fix: UI review bugs

src/css/common/_badges.scss

@@ -89,10 +89,12 @@
 	}
 }
 
+// #646970 (WP gray-50) keeps white badge text at 5.5:1 so locked/unlicensed
+// states stay WCAG AA without hover; #a7aaad was 2.3:1.
 .nav-tab-inactive .badge,
 .inverted-badges .badge {
 	color: #fff;
-	background-color: #a7aaad;
+	background-color: #646970;
 	border-color: #fff !important;
 
 	.dashicons {

src/css/common/_modal.scss

@@ -51,3 +51,36 @@
 		}
 	}
 }
+
+.components-modal__frame.code-snippets-preview-modal {
+	min-inline-size: 520px;
+	min-block-size: 240px;
+	max-inline-size: 80vw;
+	max-block-size: 80vh;
+
+	@media (width <= 600px) {
+		min-inline-size: 90vw;
+	}
+
+	.components-modal__content {
+		overflow: auto;
+	}
+
+	// The badge lives in the modal content because the minimum-supported
+	// WordPress Modal (5.5–6.3) has no headerActions prop; shift it up into
+	// the header area, clear of the close button.
+	.code-snippets-preview-modal__badge {
+		position: absolute;
+		inset-block-start: 18px;
+		inset-inline-end: 56px;
+	}
+
+	// Shown when the code editor is unavailable (syntax highlighting preference
+	// off): the raw read-only textarea is the functional fallback.
+	textarea {
+		inline-size: 100%;
+		min-block-size: 360px;
+		resize: none;
+		font-family: monospace;
+	}
+}

src/css/common/_subnav.scss

@@ -151,7 +151,6 @@
 	color: #2271b1;
 }
 
-// Add a proper separation between the navigation and any admin notices that are displayed above it.
 .notice + .wrap .snippet-type-nav {
 	margin-block-start: 20px;
 	border-block-start: 1px solid #c3c4c7;

src/css/common/_theme.scss

@@ -19,11 +19,13 @@ $control-height: 30px;
 
 /* format: background-color [color] */
 $badges: (
-	php: #1d97c6,
-	html: #ef6a36,
+	// php/html/cond darkened for WCAG AA — at least 4.5:1 against white 12px
+	// bold text; php reuses $accent, html/cond keep hue at reduced lightness.
+	php: $accent,
+	html: #cd4510,
 	css: #9b59b6,
 	js: #ffeb3b #1c1f20,
-	cond: #2eae95,
+	cond: #22826f,
 	core: #61c5cb,
 	pro: #f7e8e3 #df9279,
 	cloud: $cloud,

src/css/manage.scss

@@ -4,12 +4,12 @@
 @use 'common/tooltips';
 @use 'common/direction';
 @use 'common/select';
+@use 'common/modal';
 @use 'common/notices';
 @use 'common/upsell';
 @use 'common/toolbar';
 @use 'common/subnav';
 @use 'common/wp-admin';
-@use 'prism';
 @use 'manage/snippets-table';
 @use 'manage/cloud-community';
 

src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx

@@ -80,7 +80,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({ isExpanded, setIsExpande
 
 	useEffect(() => {
 		setCodeEditorInstance(editorInstance => {
-			if (textareaRef.current && !editorInstance) {
+			if (textareaRef.current && !editorInstance && window.wp.codeEditor) {
 				editorInstance = window.wp.codeEditor.initialize(textareaRef.current)
 
 				editorInstance.codemirror.on('changes', instance => {

src/js/components/ManageMenu/CommunityCloud/CloudSnippetsTable.tsx

@@ -1,7 +1,7 @@
 import { __ } from '@wordpress/i18n'
 import React, { useState } from 'react'
 import { getSnippetType } from '../../../utils/snippets/snippets'
-import { truncateChars } from '../../../utils/text'
+import { stripTags, truncateChars } from '../../../utils/text'
 import { Badge } from '../../common/Badge'
 import { Button } from '../../common/Button'
 import { CloudSnippetDownloadButton } from '../../common/cloud/CloudSnippetDownloadButton'
@@ -36,7 +36,7 @@ const CloudSnippetRow: React.FC<CloudSnippetRowProps> = ({ snippet }) => {
 			<td className="column-status"><CloudStatusBadge status={snippet.status} /></td>
 
 			<td className="column-desc">
-				<div className="cloud-table-description">{truncateChars(snippet.description)}</div>
+				<div className="cloud-table-description">{truncateChars(stripTags(snippet.description))}</div>
 			</td>
 
 			<td className="column-actions">

src/js/components/ManageMenu/CommunityCloud/SearchResult.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { __, _x, sprintf } from '@wordpress/i18n'
 import { getSnippetType } from '../../../utils/snippets/snippets'
-import { truncateChars } from '../../../utils/text'
+import { stripTags, truncateChars } from '../../../utils/text'
 import { Badge } from '../../common/Badge'
 import { Button } from '../../common/Button'
 import { CloudSnippetDownloadButton } from '../../common/cloud/CloudSnippetDownloadButton'
@@ -50,7 +50,7 @@ const CloudSnippetDetails: React.FC<CloudSnippetDetailsProps> = ({ snippet, setI
 
 		{snippet.description && (
 			<p className="cloud-snippet-description">
-				{truncateChars(snippet.description)}
+				{truncateChars(stripTags(snippet.description))}
 			</p>
 		)}
 

src/js/components/common/SnippetPreviewModal.tsx

@@ -1,35 +1,85 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { Modal } from '@wordpress/components'
-import { Prism } from '../../utils/Prism'
+import { __ } from '@wordpress/i18n'
+import { Badge } from './Badge'
+import type { EditorFromTextArea } from 'codemirror'
+import type { SnippetType } from '../../types/Snippet'
 
 export interface SnippetPreviewModalProps {
 	title: string
 	code: string
-	type: string
+	type: SnippetType
 	isOpen: boolean
 	setIsOpen: (isOpen: boolean) => void
 }
 
+// Mirrors the type-to-mode mapping used by the live editor in SnippetTypeInput.
+const EDITOR_MODES: Record<string, string> = {
+	css: 'text/css',
+	js: 'javascript',
+	php: 'text/x-php',
+	html: 'application/x-httpd-php'
+}
+
 /**
- * Modal for quickly viewing a snippet's code with syntax highlighting,
- * without navigating to the edit page. Shared between local snippets and
- * cloud snippet previews.
+ * Modal for quickly viewing a snippet's code in a read-only CodeMirror editor,
+ * without navigating to the edit page. Shared between local snippets and cloud
+ * snippet previews.
  */
-export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({ title, code, type, isOpen, setIsOpen }) => {
+export const SnippetPreviewModal: React.FC<SnippetPreviewModalProps> = ({
+	title,
+	code,
+	type,
+	isOpen,
+	setIsOpen
+}) => {
+	const textareaRef = useRef<HTMLTextAreaElement>(null)
+
 	useEffect(() => {
-		if (isOpen) {
-			Prism.highlightAll()
+		if (!isOpen || !textareaRef.current || !window.wp.codeEditor) {
+			return undefined
+		}
+
+		const instance = window.wp.codeEditor.initialize(textareaRef.current, {
+			codemirror: {
+				readOnly: true,
+				lineNumbers: true,
+				theme: window.CODE_SNIPPETS_MANAGE?.editorTheme ?? 'default',
+				mode: EDITOR_MODES[type] ?? EDITOR_MODES.php
+			}
+		})
+
+		// CodeMirror hides the labelled source textarea and creates an unlabelled
+		// internal input. The screenReaderLabel option only exists from CodeMirror
+		// 5.59, while WordPress 5.5 ships 5.29, so label the input directly.
+		instance.codemirror.getInputField().setAttribute(
+			'aria-label',
+			__('Snippet code preview', 'code-snippets')
+		)
+
+		return () => {
+			(instance.codemirror as EditorFromTextArea).toTextArea()
 		}
-	}, [isOpen])
+	}, [isOpen, type])
 
 	return isOpen
-		? <Modal onRequestClose={() => setIsOpen(false)} title={title}>
-			<pre className="line-numbers">
-				<code className={`language-${type}`}>
-					{'php' === type ? '<?php\n\n' : ''}
-					{code}
-				</code>
-			</pre>
+		? <Modal
+			className="code-snippets-preview-modal"
+			onRequestClose={() => setIsOpen(false)}
+			title={title}
+		>
+			{/* The minimum-supported WordPress Modal (5.5–6.3) has no headerActions
+			  * prop, so the badge renders in the content and CSS moves it into the
+			  * header area. */}
+			<div className="code-snippets-preview-modal__badge">
+				<Badge name={type} />
+			</div>
+			<textarea
+				ref={textareaRef}
+				readOnly
+				aria-label={__('Snippet code preview', 'code-snippets')}
+				defaultValue={`${'php' === type ? '<?php\n\n' : ''}${code}`}
+			/>
 		</Modal>
 		: null
 }

src/js/services/settings/editor-preview.ts

@@ -8,7 +8,7 @@ const initialiseCodeMirror = () => {
 	const { codeEditor } = window.wp
 	const textarea = document.getElementById('code_snippets_editor_preview')
 
-	if (textarea) {
+	if (textarea && codeEditor) {
 		window.code_snippets_editor_preview = codeEditor.initialize(textarea)
 		return window.code_snippets_editor_preview.codemirror
 	}

src/js/types/SnippetView.ts

@@ -2,4 +2,4 @@ export const SNIPPET_VIEWS = <const> ['card', 'table']
 
 export type SnippetView = typeof SNIPPET_VIEWS[number]
 
-export const DEFAULT_SNIPPET_VIEW: SnippetView = 'card'
+export const DEFAULT_SNIPPET_VIEW: SnippetView = 'table'

src/js/types/Window.ts

@@ -11,7 +11,7 @@ declare global {
 	interface Window {
 		readonly wp: {
 			readonly editor?: WordPressEditor
-			readonly codeEditor: WordPressCodeEditor
+			readonly codeEditor?: WordPressCodeEditor
 		}
 		readonly pagenow: string
 		readonly ajaxurl: string
@@ -70,6 +70,7 @@ declare global {
 			isSafeModeActive: boolean
 			bulkDownloadNonce: string
 			supportsZipDownloads: boolean
+			editorTheme: string
 		}
 		readonly CODE_SNIPPETS_EDIT?: {
 			snippet: SnippetSchema