Skip to content

Add h1 and hr to the Plate block anatomy (#200 Phase 1b) - #208

Open
sneridagh wants to merge 3 commits into
b1a-content-contract-foundationfrom
b1b-anatomy-gaps
Open

sneridagh wants to merge 3 commits into
b1a-content-contract-foundationfrom
b1b-anatomy-gaps

Conversation

@sneridagh

@sneridagh sneridagh commented Oct 2, 2026 •

Copy link
Copy Markdown
Member

Phase 1b of #200: the last Plate-native blocks without block anatomy classnames, h1 and hr, get them.

Stacked on #206 (Phase 1a). The base is b1a-content-contract-foundation. This PR's own change is the commit "Add h1 and hr to the Plate block anatomy"; the merge commits bring the stack up to date.

The stack now includes main with #207, which fixes the server-side translations that made React discard the server-rendered page on every load. With it, A3's widthRatio() retry in image-block-style-fields.test.ts is gone again (see #205).

Changes

config.blocks.plateBlocksConfig (packages/blocks/index.ts) gets two entries:

  • h1: category text, with the same narrow block width as the other headings. The title block usually takes the place of an h1.
  • hr: category separator.

Both now render block block-<type> category-<category> and the data-block-* attributes, like every other native block.

Visual result: one accepted diff, public view only

In the public view, the separator now gets the category spacing that @plone/layout's content-area.css already defines for .category-separator: no bottom spacing on the separator, nor on the block before it. "After the separator" moves up 12px in the native blocks view, desktop and mobile. Those are the only 2 changed screenshots; the other 20 are pixel-identical. The editor is unchanged, because content-area.css isn't loaded there yet.

Baselines: after merging, update with grep set to Native blocks in the public view.

Reordered plan

Moving the shared spacing rules from content-area.css into the shared content styles was planned for Phase 1. It's now a later phase, after the node conversions, and #200 is updated accordingly.

I tried it here first. The editor changes were the intended unification, but the public view changed too, from the blockquote down. Nodes like blockquote (my-1), table of contents (mb-1 p-0) and columns (mb-2) still put Tailwind utilities on their inner containers. Today content-area.css beats them from the custom layer. In plone-content it would sit below utilities and lose. Once those nodes are converted, the move only brings the intended editor changes. The work is kept on a local branch for that phase.

Validation

Part of #200.

Phase 1b of #200. h1 (category text) and hr (category separator) were the
Plate-native blocks without anatomy classnames. In the public view, the
separator now gets the existing separator category spacing.
@sneridagh
sneridagh requested a review from pnicolli October 2, 2026 21:57
… into b1b-anatomy-gaps

* origin/b1a-content-contract-foundation:
  Measure the image block width once again in the style fields test
  Fix the server not loading translations, which broke hydration (#207)
* b1a-content-contract-foundation:
  Move the table drag handle fragment to @plone/quanta
  Releasing @plone/aurora 1.0.0-alpha.16
  Release @plone/contents 1.0.0-alpha.3
  Release @plone/publicui 1.0.0-alpha.8
  Release @plone/cmsui 1.0.0-alpha.11
  Release @plone/agave 1.0.0-alpha.8
  Release @plone/theming 1.0.0-alpha.8
  Release @plone/layout 1.0.0-alpha.13
  Release @plone/blocks 1.0.0-alpha.17
  Release @plone/plate 1.0.0-alpha.22
  Release @plone/react-router 2.0.0-alpha.7
  Release @plone/helpers 2.0.0-alpha.9
  Release @plone/registry 4.0.0-alpha.4
  Release @plone/quanta 1.0.0-alpha.1
  Release @plone/components 5.0.0-alpha.5
  Release @plone/client 2.0.0-alpha.8
  Release @plone/icons 1.0.0-alpha.1
  Release @plone/types 3.0.0-alpha.7
  Split Quanta and icons out of @plone/components into @plone/quanta and @plone/icons (#212)

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant