Conversation
Phase 4 of #200. Lists, to-do items and the read-only to-do checkbox of the rendered content are styled by plain CSS in @plone/plate's styles/content.css instead of Tailwind utilities. Checked to-do items get a data-checked attribute. The editor's interactive checkbox stays a Tailwind editor control. A new acceptance test checks lists render the same under any public theme reset, and the reset tests share their measuring helpers.
This was referenced Oct 3, 2026
* b3-leaves-inlines: 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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Phase 4 of #200: lists are styled by plain CSS instead of Tailwind utilities, with zero visual change.
Changes
@plone/plate/styles/content.cssnow styles lists in both the public renderer and the editor. It uses the list hooks added in Phase 1a:data-list-style-typeon the block, and theblock-p__list/block-p__itemparts.ul/ol.block-p__listrelative m-0 p-0[data-list-style-type='todo'] .block-p__itemlist-none.block-p__item[data-checked](new attribute)text-muted-foreground line-through.block-p__checkbox,[data-state='checked'](new part)peer pointer-events-none absolute top-1 -left-6 size-4 shrink-0 rounded-sm border border-primary bg-background …,data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground.block-p__checkmark,.block-p__checkmark svg(new part)flex items-center justify-center text-current,size-4<button>, so its rule also neutralizes the browser's button styling (appearance,padding,margin,font,color). That comes from Tailwind's reset today, and a public theme might not have one.peerandring-offset-background;focus-visible:ring variants: the button haspointer-events: none, and the public view never shows keyboard focus on it in practice.Checkbox), so it stays Tailwind. Both renderers setdata-checkedon checked items.Tests
plate/acceptance/tests/lists-content-css.test.tscompares the computed values of every property these rules set (list margins and padding, to-do item style, both checkbox states, the check icon size), in the public view. It runs them under Agave's preflight, with no reset, and under@plone/theming's simple reset.measureOwnedStyles()andSIMPLE_RESETfromtooling/playwright/resets.ts. The Phase 2 and 3 tests no longer carry their own copies.PENDINGloses the wholepentry, which was all list markup.Validation
CI=1 pnpm visual-test --retries=0: 24/24 pixel-identical. The native-blocks screenshots include bulleted, nested, numbered and to-do lists in both states, in the public view and the editor.pnpm acceptance-test: 174 passed.pnpm --filter @plone/plate test --run: 75 passed.check:ts,eslintandstylelint: clean.Part of #200.