Add testing guidelines as Claude rules, fix .gitignore

- Add .claude/rules/testing.md with Playwright + WP Playground
  guidelines (path-scoped to tests/). Auto-loads when working on tests.
- Update .gitignore to selectively track .claude/rules/ and
  settings.json while ignoring user-specific files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: KevinBatdorf

.claude/rules/testing.md

@@ -0,0 +1,44 @@
+---
+path: tests/**
+---
+
+# Playwright + WP Playground Testing Guidelines
+
+## Architecture
+
+- Each test subdirectory has its own `blueprint.json` + `setup.php` and gets a fresh WP Playground instance.
+- `playwright.config.ts` auto-discovers specs by finding `*.spec.ts` files with a `blueprint.json` in the same directory.
+- Each spec = one Playwright project = one CI matrix job = one WP Playground instance.
+
+## Editor Canvas vs Page
+
+- Use `editor.canvas` (or `page.locator('iframe[name="editor-canvas"]').contentFrame()`) for anything inside the block editor — blocks, text, styles. WordPress renders the editor in an iframe.
+- Use `page` for sidebar panels, buttons, settings, and toolbar.
+
+## Things That Break
+
+- **Never use `page.goBack()`.** WP Playground crashes. Split into separate tests instead.
+- **No `retries` in playwright config.** Retries mask real failures. Use `retries: 0`.
+- **Tests share state within a spec.** Settings persist between tests in the same spec file. Explicitly reset anything a previous test might have changed.
+- **Isolate heavy tests.** Complex tests (WASM compilation, multi-step workflows) should get their own directory with a `blueprint.json` so they run in a fresh Playground instance.
+
+## WASM-Specific
+
+- Always wait for the WASM module to load before filling CSS: poll `window.patternCss?.transform` until truthy.
+- After filling CSS, poll `pcssAdditionalCssCompiled` to confirm compilation finished before asserting styles.
+- Use `expect(...).toPass({ timeout })` for WASM compilation checks, not `waitForTimeout`.
+
+## Assertions
+
+- Use `toBeInViewport()` not `toBeVisible()` for elements hidden by `max-height` + `overflow: hidden`.
+- Use `button#id` not `#id` when IDs may be duplicated (loading placeholders).
+- When checking compiled CSS on the element, use `{ timeout: 10000 }` on `toHaveCSS` to allow for style injection delay.
+
+## Preview
+
+- `admin.createNewPost()` creates a post. Preview URL is `/?p=${postId}&preview=true`, not `/?page_id=`.
+
+## Config
+
+- Use `fast-glob` not `node:fs` `globSync` in config files — `@types/node` is pinned to v20 by `@wordpress/e2e-test-utils-playwright`.
+- Use `.filter((s): s is { ... } => s !== null)` instead of `.filter(Boolean)` for proper type narrowing.

.gitignore

@@ -9,4 +9,7 @@ test-results/
 /vendor/
 tsconfig.tsbuildinfo
 
-.claude
+# Claude Code — commit rules and settings, ignore user-specific files
+.claude/*
+!.claude/rules/
+!.claude/settings.json

tests/default/pattern-css.spec.ts

@@ -260,24 +260,26 @@ test.describe('Pattern CSS (Block)', () => {
 	}) => {
 		await admin.createNewPost({ title: 'Test post' });
 		await editor.insertBlock({
-			name: 'core/paragraph',
-			attributes: { content: 'Hello' },
+			name: 'core/group',
+			innerBlocks: [
+				{ name: 'core/paragraph', attributes: { content: 'Hello' } },
+			],
 		});
 
 		const editorCanvas = page
 			.locator('iframe[name="editor-canvas"]')
 			.contentFrame();
 
 		await editor.selectBlocks(
-			editorCanvas.locator('p[role=document]').first(),
+			editorCanvas.locator('.wp-block-group').first(),
 		);
 		await page.getByRole('button', { name: 'Pattern CSS' }).click();
 		await waitForWasm(page);
 
 		const cssEditor = page.locator(
 			'[data-cy="pcss-editor-block"] textarea',
 		);
-		await cssEditor.fill('[block] { color: rgb(155, 200, 130); }');
+		await cssEditor.fill('p { color: rgb(155, 200, 130); }');
 
 		// No error line should exist
 		await expect(
@@ -302,22 +304,22 @@ test.describe('Pattern CSS (Block)', () => {
 			return blocks[0]?.attributes?.pcssClassId;
 		});
 
-		await expect(editorCanvas.locator(`.${className}`)).toHaveCSS(
+		await expect(editorCanvas.locator(`.${className} > p`)).toHaveCSS(
 			'color',
 			'rgb(155, 200, 130)',
 			{ timeout: 10000 },
 		);
 
 		// Add invalid CSS
-		await cssEditor.fill('[block] { color: rgb(155, 200, 130); } ??');
+		await cssEditor.fill('p { color: rgb(155, 200, 130); } ??');
 
 		// Error line should appear
 		await expect(
 			page.locator('[data-cy="pcss-editor-block"] pre .line-error'),
 		).toBeVisible({ timeout: 10000 });
 
 		// Color should still be the valid one, not changed
-		await expect(editorCanvas.locator(`.${className}`)).toHaveCSS(
+		await expect(editorCanvas.locator(`.${className} > p`)).toHaveCSS(
 			'color',
 			'rgb(155, 200, 130)',
 		);