Content CSS Phase 9: share the block spacing between the Public UI and the editor

[sneridagh]

Phase 9 of #200: blocks are now spaced the same in the editor as in the public view. The public view doesn't change. The editor does, on purpose: this is the "view/edit drift" phase, and the accepted diffs are listed below.

Stacked on #216 (Phase 8). The base is b8-structural. This PR's own change is only the last commit.

Changes

The block model's spatial relationships move out of @plone/layout/styles/content-area.css. That file only loads in the Public UI, in the custom layer. They go into the new @plone/layout/styles/content.css, which the styles loader puts in the plone-content layer of both UIs.

The moved rules:

• .content-area > .block: centering, background and color;
• category widths: text, heading, and the layout / default / narrow width classes;
• spacing between blocks: --block-bottom-spacing per category, and none before or at a separator;
• nested blocks filling their container;
• the inner container's layout: max-width, padding-bottom, margin, justify-items, and so on.

content-area.css keeps the container query setup and .documentDescription. @plone/layout gets the same content.css Stylelint rules as plate and blocks. The selectors are inside :where().

Why the public view doesn't change: the loader imports content.css files in add-on order (plate, blocks, layout, agave). So layout's rules still win over plate's node rules on ties, as they did from the custom layer. Since Phase 8, no Tailwind utilities are left on the content's inner containers to interfere. That interference is why this phase had to wait.

This is the first version, parked during Phase 1b, unchanged except for comments.

Accepted diffs (editor only)

All 6 changed screenshots are editor screenshots; every public-view screenshot is pixel-identical.

Screenshot	Change
native-blocks-edit	The editor gets the public view's vertical rhythm: 12px after each block, more space around headings, the separator and the TOC. The callout's and code block's outer margins follow the public view. Height goes from 1627px to 1983px.
inline-marks-edit	Same block spacing, 191px to 227px.
image-block-edit (floated image selected)	The list after the left-floated image now starts below the image, as it does in the public view (the image's bottom spacing). Before, it wrapped beside the image in the editor only.
add-form (cmsui)	The title block moves a few pixels with its new spacing; its placeholder still lines up with the title.
edit-form-block-sidebar (cmsui)	The paragraph and the selected image block below the title move down with the block spacing; the selection outline and the sidebar are unchanged.
floating-toolbar	The toolbar sits slightly differently over the shifted text (36px).

Remaining editor/view differences are typography: Agave's heading styles only apply in the public view, for instance. Those aren't part of the block spacing.

Baselines: once this is merged, the CI baselines for these 6 screenshots need the "Update VRT Screenshots" workflow.

Tests

• New: plate/acceptance/tests/block-spacing.test.ts compares the inner container's max-width, padding-bottom, margins and justify-items between the public view and the editor, for:

  • a heading, a paragraph, the block before a separator, a callout, a table, and a paragraph nested in a blockquote.

  It would have failed before this change.

• Docs: packages/layout/AGENTS.md describes styles/content.css. The comment on plate's base .block-inner-container rule is updated.

Validation

• CI=1 pnpm visual-test --retries=0: 18 identical, and the 6 editor diffs above.
• pnpm acceptance-test: 179 passed.
• pnpm --filter @plone/layout test --run: 9 passed. check:ts (layout, plate), stylelint and prettier: clean.

Part of #200.