[stooit]

Two polish fixes from the WordPress film review, plus the docs for theming the search page.

Admin: form spacing

On current WordPress (7.x) the core form controls have no bottom margin. The search settings, the search page form and the first-run credentials form stacked their fields, checkboxes and toggles with no space between them, and the next label ("Manual filters", "Results per page", "Summary source") sat directly on the last row.

• New FormStack component (core Flex, column) with the block editor spacing: 16px between fields, 12px between the rows of a group, 24px around a group.
• "Content types to search", "Indexed content types", "Display" and "Facets" are fieldsets whose legend matches the core control label. The "(none selected = all indexed types)" note is now help text under the label.
• The Remove link in a facet row lines up with the inputs; Edit and Delete in the search pages table get a gap.
• Checked and unchanged: the Settings page (it already spaced its controls), Cache, Content, Dashboard, Diagnostics, Migration, and the block sidebar (core spaces the panel; wrapping it doubled the gaps, so it stays as it was).

Search page: default styles

Keeps the theme's fonts and text colour, every class name and the markup.

• One spacing scale. Checkbox, label and count each have a gap; counts are quiet right-aligned badges.
• Facet headings are small capitals with a rule under them. A facet with no values is hidden with its heading.
• The result title (1.25em, semibold) is now clearly above the summary (0.9375em, muted). Tags are quiet outlined pills.
• "Clear refinements" is an outline button in the text colour. The InstantSearch theme drew white text on pale blue, below WCAG AA.
• Every link, button and field has a visible focus outline (2px, accent colour).
• The InstantSearch theme forced navy (#3a4570) text and icons on every widget; they now follow the theme. Measured on Twenty Twenty-Five: summary, counts and tags 8:1 or better, titles and labels 18.9:1.
• Below a 37.5rem container (phones, narrow columns) the facets go above the results, side by side when there is room.
• The no-JavaScript form is styled; without JavaScript the empty facet column is gone; one page of results shows no pagination.
• Every value is a --quant-search-* custom property. The defaults are in :where(.quant-search), so a theme rule on .quant-search wins in any stylesheet order.

Docs

New readme section "Styling the search page": what the page inherits, every custom property with its default, the narrow layout, and the stable class names. A test fails if a property is not documented. Changelog entries are under 2.0.5; no version bump.

Screenshots (described)

Taken on WordPress 7.1.4 with Twenty Twenty-Five, from the e2e environment with Algolia answered by a fixture (two facets, "Topic" and "Type", four results with tags and thumbnails), at 1400px and 390px wide.

• Search page form, before: the Posts/Pages/Books checkboxes touch each other and "MANUAL FILTERS" sits on the Books row; the four Display toggles touch and "RESULTS PER PAGE" sits on the Pagination toggle; help text touches the next label. After: 12px between rows, 24px around each group, 16px between fields, group labels in the same style as the field labels.
• Search Records card, before: the same stacking for "Indexed content types", and the image size help text touches the next toggle. After: evenly spaced.
• First-run form, before: the four credential fields stack with the help text on the next label. After: evenly spaced, with one 16px gap around the login block.
• Public search page, before: a pale blue "Clear refinements" button, checkboxes touching their labels, count badges touching the text, navy text, a hit title the same size as the summary, and an empty "Type" heading when a facet has no values. After: neutral outline button, aligned rows with gaps and right-aligned quiet counts, small-caps facet headings, a bold larger title, muted summary, pill tags, pagination buttons in the text colour with the current page outlined.
• Mobile (390px), after: facets above the results in two columns (Topic, Type), full-width search box, smaller thumbnails.
• A dark theme simulation (light text on near-black) and the readme's override example (blue accent, larger gap, wider facets) both render as expected.

Not changed

• The space above the page title is the theme's page template (Twenty Twenty-Five puts spacing--60 margin and padding above the title). The stylesheet stays inside .quant-search, so it does not change that.

Tests

• PHPUnit 411 tests OK (6 new in SearchStylesTest), PHPStan no errors, PHPMD clean
• npm run lint:js, npm run lint:css, npm run test:unit (17) pass; npm run build committed
• E2E: 46 passed