fix: UI review bugs by imantsk · Pull Request #414 · codesnippetspro/code-snippets

imantsk · 2026-07-13T17:35:27Z

Changes

Cloud snippet descriptions render as plain text

Community Cloud snippet descriptions are stripped of HTML tags before display, in both the card and table views.

Foreign admin notices hidden on plugin screens

On Code Snippets admin screens, admin notices that do not originate from the plugin are removed server-side and hidden via a CSS fallback, so core/third-party notices no longer break the plugin layout. Behaviour is gated by the code_snippets/admin/filter_foreign_notices filter (default enabled). Adds Admin\Notice_Filter and a unit test.

Snippet preview modal

Minimum and maximum dimensions with internal scrolling for small and large snippets.
Renders a read-only editor that honours the configured editor theme.

Verification

lint:js, lint:styles, lint:php and the webpack build pass.
Notice filtering, modal sizing, and preview theming confirmed in wp-admin.

code-snippets-bot · 2026-07-16T21:40:45Z

Two actionable issues remain in this PR's exact diff:

High — TypeScript regression in the preview modal. src/js/components/common/SnippetPreviewModal.tsx:61-66 passes a JSX <span> to the WordPress Modal title prop, which is declared as title?: string. tsc --noEmit reports TS2322: Type 'Element' is not assignable to type 'string'. Keep title as the snippet-name string and render the badge separately, or provide an accessible custom header without weakening the type.
Medium — Avoid loading the full editable-editor stack for a read-only preview. src/php/Admin/Menus/Manage_Menu.php:222 calls enqueue_code_editor('php'), which also enqueues HTMLHint, CSSLint, JSHint, and the plugin's editable-editor bundle. These load on every Manage screen even when the preview never opens. Enqueue only the core CodeMirror assets/settings and selected theme required by the read-only modal.

imantsk · 2026-07-17T00:01:53Z

Fixed the modal title contract and limited the manage screen to preview-only CodeMirror assets. Verified with lint, PHPUnit, build, and targeted E2E checks.

code-snippets-bot · 2026-07-17T05:40:53Z

One preview regression remains for users who disable syntax highlighting. enqueue_code_preview_editor() relies on wp_enqueue_code_editor() (src/php/Utils/editor.php:115-123), but WordPress returns false and does not enqueue code-editor when the current user's syntax_highlighting preference is disabled. SnippetPreviewModal.tsx:43 then unconditionally calls window.wp.codeEditor.initialize(...), so opening Preview throws instead of displaying the code. Please guard initialization and retain the read-only textarea as a functional fallback when wp.codeEditor is unavailable, and add coverage for the disabled-preference path.

…ilable

imantsk · 2026-07-17T07:07:37Z

Guarded the editor bootstrap so the read-only textarea remains a functional fallback when wp.codeEditor is unavailable, and added E2E coverage for the disabled syntax-highlighting preference.

code-snippets-bot · 2026-07-17T08:02:05Z

Follow-up adversarial re-audit found two remaining issues:

The fallback E2E test depends on a view it does not establish. tests/e2e/code-snippets-preview.spec.ts:43-49 uses the helper and selector for .wp-list-table, but this PR still defaults an unset snippet-view preference to card in Preferences_REST_Controller.php:42. On a clean test user, the test can time out before opening Preview; Playwright is also skipped in the current checks. Please explicitly set the preference to table in setup, or exercise the card UI, so the fallback path is actually covered.
The notice ownership check accepts similarly prefixed sibling directories. Notice_Filter.php:155 uses 0 === strpos( $file, dirname( PLUGIN_FILE ) ). A callback file under a sibling such as code-snippets-extra/ therefore passes as plugin-owned and its notice survives filtering. Please compare normalized paths with a trailing directory-separator boundary and add a sibling-prefix regression case.

imantsk · 2026-07-18T00:45:03Z

Resolved both follow-ups. The fallback E2E setup now explicitly establishes table view before using table selectors, and notice ownership compares normalized plugin-root paths with a directory-separator boundary, including a sibling-prefix regression case. The relevant tests, lint, and build pass.

code-snippets-bot · 2026-07-18T10:11:53Z

Round 4 found two issues in this PR's own head:

Notice_Filter::is_code_snippets_screen() checks only each menu's primary hookname (src/php/Admin/Notice_Filter.php:114-121). The editor's separate Add New hook is therefore not recognized, so foreign notices remain visible on that Code Snippets screen. Please include every hook registered by a menu and add behavioral coverage for Add New. The later foundation branch already contains this repair, so the smallest fix is to bring that implementation and test back here.
SnippetPreviewModal.tsx uses CodeMirror's readOnly: 'nocursor'. In CodeMirror 5 that mode disallows focusing the editor, which prevents keyboard users from reaching and selecting the preview text. Use readOnly: true instead; the later preview-actions branch already contains the canonical fix and keyboard coverage.

…s in preview

…te orphaned Prism wrapper

… drop stale manage Prism assets

sheabunge · 2026-07-21T04:16:35Z

I believe this is still necessary for the front-end code highlighting?

sheabunge · 2026-07-21T04:17:41Z

-		.replace(/<\/?[a-z][a-z0-9]*\b[^>]*>/gi, '')
+// Tags implying a visual break become whitespace so `<p>A</p><p>B</p>`
+// yields 'A B' rather than 'AB'; inline tags are removed without separators.
+const BLOCK_TAG_NAMES = new Set([


This seems unnecessarily complex for what it is trying to do. I'm not confident that we can be clear that it is doing its job, especially when it is serving an important security role.

sheabunge · 2026-07-21T04:18:41Z

+use function Code_Snippets\code_snippets;
+use const Code_Snippets\PLUGIN_FILE;
+
+defined( 'ABSPATH' ) || exit;


Unnecessary in a PHP class file.

sheabunge · 2026-07-21T04:19:23Z

+	 */
+	public function print_fallback_styles() {
+		?>
+		<style>


Why do we need to do all of this reflection processing when we can just hide the notices with CSS?

sheabunge · 2026-07-21T04:20:17Z

 				return (bool) $value;
 			case 'description':
-				return ( null === $value ) ? '' : $value;
+				// Remote payloads occasionally carry non-string descriptions;


This sort of processing should occur when the remote payload is being decoded, not when the property is being set.

Co-authored-by: Maisy <maisy@codesnippets.pro> Co-authored-by: Shea Bunge <shea@sheabunge.com>

…petspro/code-snippets into fix/166-ui-review-fixes/core

code-snippets-bot · 2026-07-21T13:16:58Z

[High] Preserve existing local snippet descriptions — src/php/Model/Snippet.php:134
prepare_field() now runs every description through wp_kses_post(), while the same model hydrates existing local database rows. Opening and then saving a legacy snippet can permanently strip previously stored markup outside the post allowlist. Keep generic local-model hydration non-destructive; sanitize cloud descriptions at the cloud import/download boundary or escape at rendering, and add a legacy-description round-trip regression test.
[Medium] Use the cloud page-size default for featured results — src/php/REST_API/Cloud/Cloud_Snippets_REST_Controller.php:248
After the schema default was removed, each endpoint callback owns its fallback. Search uses Manage_Menu::get_cloud_search_per_page(), but featured results use get_snippets_per_page(), so the initial featured page ignores the documented code_snippets/cloud_search/per_page filter and can return a different count from searches. Use the cloud-search default here and cover the featured endpoint default/filter behavior.
[Medium] Restore per-row selection in cloud table view — src/js/manage/cloud/CloudSnippetsTable.tsx:20
The cloud table is now the default view and its toolbar exposes bulk Download plus Select all, but table rows render no selection control; only cards receive the per-item selection handler. Table users therefore cannot download an arbitrary subset. Pass the selection state/handler into the table and render row and header checkboxes, or remove bulk selection from table view.

ramiy · 2026-07-22T08:11:51Z

+
+.active-snippet {
+	td, th {
+		background-color: rgba(#78c8e6, 0.06);


use modern syntax, rgb() instead of rgba().

Suggested change

background-color: rgba(#78c8e6, 0.06);

background-color: rgb(120 200 230 / 0.06);

ramiy · 2026-07-22T08:18:23Z

+		border: none;
+		background: none;
+		font: inherit;
+		color: #2271b1;


All #2271b1 colors can be replaced with sass theme.$accent. there are multiple instances that can be changed.

ramiy · 2026-07-22T08:28:33Z

+		inline-size: 20px;
+		block-size: 20px;
+		margin: 0;
+		border: 1px solid #c3c4c7;


replace #c3c4c7 with theme.$control-border. Do that in other places too where the corder color is hardcoded.

ramiy · 2026-07-22T08:38:32Z

+ul.cloud-search-results.code-snippets-cards {
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+
+	@media screen and (width <= 1100px) {


Remove screen and from the media query.

ramiy · 2026-07-22T08:44:30Z

+			<PagingInput which={which} totalPages={totalPages} {...inputProps} />
+			<span className="tablenav-paging-text">
+				{/* translators: 1: Current page. */
+					_x(' of ', 'paging', 'code-snippets')}


Not sure how, but the string should be %1$s of %2$s.

and use sprintf).

ramiy · 2026-07-22T08:52:25Z

+const TAB_LABELS: Record<CommunityTab, string> = {
+	snippets: __('Snippets', 'code-snippets'),
+	bundles: __('Bundles', 'code-snippets')
+}
+


Don't see the advantage of this change.

ramiy · 2026-07-22T08:54:46Z

+				/* translators: %s: cloud library author name. */
+				_x('By %s', 'snippet author', 'code-snippets'),


No need to use both context and translators comment.

Suggested change

/* translators: %s: cloud library author name. */

_x('By %s', 'snippet author', 'code-snippets'),

/* translators: %s: cloud library author name. */

__('By %s', 'code-snippets'),

when using context function _x() it creates a separate string, inflating the amount of strings to translate.

ramiy · 2026-07-22T08:58:46Z

+				id="snippets-tag-filter"
+				name="tag"
+				value={currentTag}
+				aria-label={__('Filter snippets by tag', 'code-snippets')}


aria-label is not required, it has a <label> pointing to this <select> element.

ramiy · 2026-07-22T09:04:43Z

-		echo '<div class="error fade"><p><strong>';
+		// The code-snippets-notice class exempts this notice from the plugin's
+		// own admin notice filtering on Code Snippets screens.
+		echo '<div class="code-snippets-notice error fade"><p><strong>';


add role=region and aria-label.

ramiy · 2026-07-22T09:04:51Z


 	if ( defined( 'CODE_SNIPPETS_FILE' ) ) {
-		echo '<div class="error fade"><p>';
+		echo '<div class="code-snippets-notice error fade"><p>';


add role=region and aria-label.

imantsk added 3 commits July 14, 2026 13:14

fix: strip html tags from cloud snippet descriptions

56fc6bd

fix: filter foreign admin notices on code snippets screens

fb378a7

fix: improve snippet preview modal sizing and theme

d3b8440

imantsk force-pushed the fix/166-ui-review-fixes branch from 871c3da to d3b8440 Compare July 14, 2026 10:15

feat: show line numbers and language badge in snippet preview

1d26a35

imantsk changed the title ~~fix: UI review bugs (#166) — core~~ fix: UI review bugs (#166) Jul 14, 2026

Merge branch 'core-beta' into fix/166-ui-review-fixes

d5b9a60

imantsk marked this pull request as ready for review July 14, 2026 12:52

imantsk added 4 commits July 14, 2026 18:19

fix: use full-size badge in snippet preview modal title

db95f8d

fix: register rest collection args with named keys

ae62c8c

fix: convert zero-based cloud api page numbers for display

3a5ddfe

fix: report one-based page number for featured cloud results

d7625fc

imantsk added 2 commits July 17, 2026 01:10

fix: preserve the preview modal title contract

9c67039

fix: load only preview editor assets

cade6de

imantsk added 2 commits July 17, 2026 09:04

fix: degrade snippet preview gracefully when the code editor is unava…

69ba8cb

…ilable

fix: cover preview fallback without the code editor

c2ca74e

code-snippets-bot mentioned this pull request Jul 17, 2026

feat: new admin UI foundation #415

Merged

fix: harden preview fallback and notice ownership

af3a8ef

Maisy added 5 commits July 18, 2026 10:51

fix: include Add New hook in notice filtering and allow keyboard focu…

2187066

…s in preview

fix: wrap long lines in preview E2E spec to respect 100-char limit

e352952

fix: include compact-menu hookname in notice filter screen check

88c517b

fix: restore notice separator spacing rule for filter-disable path

5a56b14

fix: handle invokable-object reflection, narrow modal type prop, dele…

0cd08d8

…te orphaned Prism wrapper

Maisy added 2 commits July 18, 2026 14:32

fix: restore table view as default

1bf989f

fix: make preview modal 5.5-compatible, normalize cloud descriptions,…

c7c5930

… drop stale manage Prism assets

code-snippets-bot changed the title ~~fix: UI review bugs (#166)~~ fix: UI review bugs Jul 18, 2026

fix: correct cloud snippet preview output

c7ba43d

codesnippetspro deleted a comment from code-snippets-bot Jul 18, 2026

Maisy added 4 commits July 18, 2026 17:38

fix: strip malformed tags with unbalanced quotes in stripTags

5cc1582

fix: raise locked badge contrast to WCAG AA

87467c3

fix: preserve plain comparison text in stripTags fallback

790f741

fix: make stripTags fallback linear

eac9b35

github-advanced-security AI found potential problems Jul 18, 2026

View reviewed changes

Comment thread src/js/utils/text.ts Fixed

Maisy added 5 commits July 18, 2026 18:49

fix: make stripTags comment removal linear

308dc5e

fix: strengthen stripTags performance regression test

1013055

fix: remove historical test comment

12acf12

fix: decode cloud description entities

fa2d4e7

fix: correct entity decoding comment

346d28e

code-snippets-bot added the run-tests Trigger automated tests label Jul 19, 2026

fix: resolve cloud per-page default at request time

3264d44

code-snippets-bot added build Adding this label will trigger the zip build action and removed build Adding this label will trigger the zip build action run-tests Trigger automated tests labels Jul 19, 2026

sheabunge reviewed Jul 21, 2026

View reviewed changes

imantsk and others added 3 commits July 21, 2026 15:12

feat: new admin UI foundation (#415)

ebf92d8

Co-authored-by: Maisy <maisy@codesnippets.pro> Co-authored-by: Shea Bunge <shea@sheabunge.com>

Merge branch 'core-beta' into fix/166-ui-review-fixes/core

3f7f6c3

Merge branch 'fix/166-ui-review-fixes' of https://github.com/codesnip…

d94d2c4

…petspro/code-snippets into fix/166-ui-review-fixes/core

sheabunge self-assigned this Jul 21, 2026

Remove unnecessary ListTable fragmentation.

c623fdc

ramiy requested changes Jul 22, 2026

View reviewed changes

	background-color: rgba(#78c8e6, 0.06);
	background-color: rgb(120 200 230 / 0.06);

		/* translators: %s: cloud library author name. */
		_x('By %s', 'snippet author', 'code-snippets'),

Uh oh!

Conversation

imantsk commented Jul 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Cloud snippet descriptions render as plain text

Foreign admin notices hidden on plugin screens

Snippet preview modal

Verification

Uh oh!

code-snippets-bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

imantsk commented Jul 17, 2026

Uh oh!

code-snippets-bot commented Jul 17, 2026

Uh oh!

imantsk commented Jul 17, 2026

Uh oh!

code-snippets-bot commented Jul 17, 2026

Uh oh!

imantsk commented Jul 18, 2026

Uh oh!

code-snippets-bot commented Jul 18, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

code-snippets-bot commented Jul 21, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

imantsk commented Jul 13, 2026 •

edited

Loading

code-snippets-bot commented Jul 16, 2026 •

edited

Loading