feat: add optional ID column to snippets table and implement visibility toggle

src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx

@@ -180,6 +180,12 @@ const baseTableColumns: ListTableColumn<Snippet>[] = [
 		title: <span className="screen-reader-text">{__('Activate', 'code-snippets')}</span>,
 		render: snippet => <ActivateColumn snippet={snippet} />
 	},
+	{
+		id: 'id',
+		title: __('ID', 'code-snippets'),
+		sortedValue: snippet => snippet.id,
+		render: snippet => snippet.id
+	},
 	{
 		id: 'name',
 		title: __('Name', 'code-snippets'),

src/js/components/ManageMenu/SnippetsTable/WithFilteredSnippetsContext.tsx

@@ -71,7 +71,7 @@ export const WithFilteredSnippetsContext: React.FC<PropsWithChildren> = ({ child
 			if (sanitizedSearchQueryText) {
 				return searchLineNumber !== undefined
 					? snippet.code.split('\n')[searchLineNumber]?.includes(sanitizedSearchQueryText)
-					: searchFields.some(field =>
+					: String(snippet.id) === sanitizedSearchQueryText || searchFields.some(field =>
 						('tags' === field ? snippet.tags.join(' ') : snippet[field])
 							.toLowerCase().includes(sanitizedSearchQueryText))
 			}

src/php/Admin/Menus/Manage/Manage_Menu_Screen_Options.php

@@ -34,6 +34,7 @@ public function load() {
 
 		if ( $screen && ! $this->is_cloud_community_view() ) {
 			add_filter( "manage_{$screen->id}_columns", [ $this, 'get_columns' ] );
+			add_filter( 'default_hidden_columns', [ $this, 'get_default_hidden_columns' ], 10, 2 );
 			add_filter( 'screen_settings', [ $this, 'render' ] );
 		}
 
@@ -60,6 +61,7 @@ public function get_columns( array $columns = [] ): array {
 			[
 				'_title'   => __( 'Columns', 'code-snippets' ),
 				'activate' => __( 'Active', 'code-snippets' ),
+				'id'       => __( 'ID', 'code-snippets' ),
 				'name'     => __( 'Name', 'code-snippets' ),
 				'type'     => __( 'Type', 'code-snippets' ),
 				'desc'     => __( 'Description', 'code-snippets' ),
@@ -70,6 +72,20 @@ public function get_columns( array $columns = [] ): array {
 		);
 	}
 
+	/**
+	 * Hide the optional ID column until a user enables it.
+	 *
+	 * @param string[]   $hidden_columns Column identifiers hidden by default.
+	 * @param \WP_Screen $screen Current admin screen.
+	 *
+	 * @return string[]
+	 */
+	public function get_default_hidden_columns( array $hidden_columns, \WP_Screen $screen ): array {
+		return get_current_screen() === $screen
+			? array_merge( $hidden_columns, [ 'id' ] )
+			: $hidden_columns;
+	}
+
 	/**
 	 * Get the columns hidden for the current user.
 	 *

tests/e2e/code-snippets-list.spec.ts

@@ -443,10 +443,12 @@ test.describe('Code Snippets List Page Actions', () => {
 test.describe('Manage table Screen Options', () => {
 	let helper: SnippetsTestHelper
 	let snippetName: string
+	let unrelatedSnippetName: string | undefined
 
 	test.beforeEach(async ({ page }) => {
 		helper = new SnippetsTestHelper(page)
 		snippetName = SnippetsTestHelper.makeUniqueSnippetName('E2E Screen Options')
+		unrelatedSnippetName = undefined
 		await SnippetsTestHelper.cleanupSnippetsByPrefix(DEFAULT_E2E_SNIPPET_BASE_NAME)
 		await helper.createAndActivateSnippet({
 			name: snippetName,
@@ -457,6 +459,9 @@ test.describe('Manage table Screen Options', () => {
 
 	test.afterEach(async () => {
 		await helper.cleanupSnippet(snippetName)
+		if (unrelatedSnippetName) {
+			await helper.cleanupSnippet(unrelatedSnippetName)
+		}
 	})
 
 	const openScreenOptions = async (page: Page) => {
@@ -488,6 +493,49 @@ test.describe('Manage table Screen Options', () => {
 		await expect(page.locator('.wp-list-table th.column-desc').first()).not.toHaveClass(/\bhidden\b/)
 	})
 
+	test('ID column visibility persists when enabled and supports ID search', async ({ page }) => {
+		const snippetRow = snippetRowByName(page, snippetName)
+		const editUrl = await snippetRow.locator('.snippet-name').getAttribute('href')
+		const snippetId = new URL(editUrl ?? '', page.url()).searchParams.get('id')
+
+		if (!snippetId) {
+			throw new Error('Created snippet does not have an edit URL with an ID')
+		}
+
+		unrelatedSnippetName = SnippetsTestHelper.makeUniqueSnippetName('E2E ID Search')
+		const unrelatedSnippetId = await SnippetsTestHelper.createSnippetViaCli({
+			name: unrelatedSnippetName,
+			active: false
+		})
+		expect(unrelatedSnippetId).not.toBe(Number(snippetId))
+
+		await openScreenOptions(page)
+
+		const idToggle = page.locator('#adv-settings input.hide-column-tog[value="id"]')
+		await expect(idToggle).toBeVisible()
+		await idToggle.uncheck()
+		await expect(page.locator('.wp-list-table th.column-id').first()).toHaveClass(/\bhidden\b/)
+
+		await idToggle.check()
+		await page.locator('#screen-options-apply').click()
+		await page.waitForLoadState('networkidle')
+
+		await helper.navigateToSnippetsAdmin()
+		await openScreenOptions(page)
+		await expect(idToggle).toBeChecked()
+		await expect(page.locator('.wp-list-table th.column-id').first()).not.toHaveClass(/\bhidden\b/)
+		await expect(snippetRowByName(page, snippetName).locator('.column-id')).toHaveText(snippetId)
+		await expect(snippetRowByName(page, unrelatedSnippetName)).toBeVisible()
+
+		await page.getByRole('searchbox', { name: 'Search Snippets:' }).fill(snippetId)
+		await expect(snippetRowByName(page, snippetName)).toBeVisible()
+		await expect(snippetRowByName(page, unrelatedSnippetName)).toBeHidden()
+
+		await idToggle.uncheck()
+		await page.locator('#screen-options-apply').click()
+		await page.waitForLoadState('networkidle')
+	})
+
 	test('Truncation toggle applies and removes the truncation class in real time', async ({ page }) => {
 		await openScreenOptions(page)
 

tests/unit/Admin/Menus/Manage/Manage_Menu_Screen_Options_Test.php

@@ -46,6 +46,20 @@ public function test_get_columns_adds_snippet_columns(): void {
 		$this->assertSame( 'Modified', $columns['date'] );
 	}
 
+	/**
+	 * The optional ID column stays hidden until a user enables it.
+	 *
+	 * @return void
+	 */
+	public function test_default_hidden_columns_include_id(): void {
+		$options = new Manage_Menu_Screen_Options();
+		$screen  = get_current_screen();
+
+		$this->assertSame( [ 'id' ], $options->get_default_hidden_columns( [], $screen ) );
+		$this->assertSame( [ 'type', 'id' ], $options->get_default_hidden_columns( [ 'type' ], $screen ) );
+		$this->assertSame( [ 'type' ], $options->get_default_hidden_columns( [ 'type' ], \WP_Screen::get( 'dashboard' ) ) );
+	}
+
 	/**
 	 * The manage screen renders a truncation toggle.
 	 *