diff --git a/CHANGELOG.md b/CHANGELOG.md index 24801d75b..f9ddef3d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -68,6 +68,8 @@ * Fixed bulk actions in Community Cloud running against an empty selection, so selected snippets were never downloaded. (PRO) * Fixed a fatal error in the Elementor editor on Elementor versions older than 3.19. +* Fixed snippet descriptions staying truncated after the "Truncate long snippet names and descriptions" screen option + was switched off. ## [3.10.2] (2026-09-01) diff --git a/src/css/manage/_snippets-table.scss b/src/css/manage/_snippets-table.scss index 259fbeb60..6a39d5901 100644 --- a/src/css/manage/_snippets-table.scss +++ b/src/css/manage/_snippets-table.scss @@ -362,9 +362,11 @@ gap: 1em; } -// Keep every table row the same height by clamping the description cell -// to two lines, matching the two-line name + row-actions column. -.snippets-list-view .wp-list-table td.column-desc .snippet-description-content { +// Rows are kept to a common height by clamping the description to two lines, +// matching the two-line name + row-actions column. Descriptions are governed by +// the "Truncate long snippet names and descriptions" Screen Option along with +// names, so nothing is clamped once that option is switched off. +.snippets-list-view .wp-list-table.truncate-row-values td.column-desc .snippet-description-content { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; diff --git a/tests/e2e/code-snippets-list.spec.ts b/tests/e2e/code-snippets-list.spec.ts index 00b89b21d..c01bba87f 100644 --- a/tests/e2e/code-snippets-list.spec.ts +++ b/tests/e2e/code-snippets-list.spec.ts @@ -620,6 +620,43 @@ test.describe('Manage table Screen Options', () => { await expect(page.locator('.wp-list-table.truncate-row-values')).toBeVisible() }) + test('Descriptions are only clamped while truncation is enabled', async ({ page }) => { + const longDescription = + 'This description is deliberately long enough to wrap well past the two lines ' + + 'that the table clamps it to while the truncation option is enabled, so that ' + + 'switching the option off has something visible to reveal. ' + + unrelatedSnippetName = SnippetsTestHelper.makeUniqueSnippetName('E2E Long Description') + await SnippetsTestHelper.createSnippetViaCli({ + name: unrelatedSnippetName, + active: false, + desc: longDescription.repeat(3) + }) + + await helper.navigateToSnippetsAdmin() + + const description = snippetRowByName(page, unrelatedSnippetName).locator('.snippet-description-content') + await expect(description).toBeVisible() + + await openScreenOptions(page) + const truncationToggle = page.locator('#snippets-table-truncate-row-values') + + await truncationToggle.check() + await expect(description).toHaveCSS('-webkit-line-clamp', '2') + + await truncationToggle.uncheck() + await expect(description).toHaveCSS('-webkit-line-clamp', 'none') + + // The clamp is what hid the rest of the description, so without it the + // element has to be tall enough for all of its own content. One pixel of + // tolerance covers sub-pixel rounding in the browser's layout. + const hiddenOverflow = await description.evaluate(el => el.scrollHeight - el.clientHeight) + expect(hiddenOverflow).toBeLessThanOrEqual(1) + + // Restore the default so later tests and the dev site are unaffected. + await truncationToggle.check() + }) + test('Truncation preference survives Apply and a page reload', async ({ page }) => { await openScreenOptions(page) await page.locator('#snippets-table-truncate-row-values').uncheck() diff --git a/tests/e2e/helpers/SnippetsTestHelper.ts b/tests/e2e/helpers/SnippetsTestHelper.ts index f6d14e4a4..c279bea47 100644 --- a/tests/e2e/helpers/SnippetsTestHelper.ts +++ b/tests/e2e/helpers/SnippetsTestHelper.ts @@ -31,6 +31,7 @@ export interface CreateSnippetCliOptions { name: string; active: boolean; conditionId?: number; + desc?: string; tags?: readonly string[]; type?: 'php' | 'html' | 'css' | 'js' | 'cond'; } @@ -100,7 +101,7 @@ export class SnippetsTestHelper { const php = ` $snippet = new \\Code_Snippets\\Model\\Snippet([ 'name' => ${JSON.stringify(options.name)}, - 'desc' => '', + 'desc' => ${JSON.stringify(options.desc ?? '')}, 'code' => ${JSON.stringify(code)}, 'scope' => ${JSON.stringify(scope)}, 'active' => ${options.active ? 'true' : 'false'},