Notes: Draw the canvas divider from body so it uses the theme text color

[Mamaduka]

What?

Closes #84157

Moves the divider between the canvas and floating notes from :root::after to body::before, and removes the now redundant border-left on .editor-collab-sidebar-panel added in #83330. In dark themes, the divider was dark on dark and effectively invisible.

Why?

The divider mixes currentColor with transparency, but global styles set the theme text color on body, not html, so a pseudo-element on :root never received it. The panel border from #83330 was already overridden in the floating notes, and the "All notes" sidebar has its own divider from the interface skeleton.

How?

body::after is taken by the padding appender (use-padding-appender.js), whose height: 40vh overrides inset-block: 0, so the divider uses ::before.

Testing Instructions

1. Activate a block theme with a dark style variation, e.g., Twenty Twenty-Five "Evening".
2. Open a post and add a note to a block.
3. With floating notes shown, the divider between content and notes is visible and spans the full canvas height.
4. Switch to a light style variation. The divider is still visible.
5. Open "All notes". The sidebar shows a single left divider.

Testing Instructions for Keyboard

Same as above; the change is visual only.

Screenshots or screencast

Sorry, bad screenshot; the border is faint on dark backgrounds.

Use of AI Tools

Assisted by Claude.

[github-actions]

🤖 PR meta 🤖

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: -45 B (0%)

Total Size: 8.3 MB

📦 View Changed

Filename	Size	Change
build/scripts/editor/index.min.js	622 kB	+14 B (0%)
build/styles/editor/style-rtl.css	32.6 kB	-11 B (-0.03%)
build/styles/editor/style-rtl.min.css	27.7 kB	-16 B (-0.06%)
build/styles/editor/style.css	32.7 kB	-13 B (-0.04%)
build/styles/editor/style.min.css	27.6 kB	-19 B (-0.07%)

_{8bb3977 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	34320bb	trunk	% Change
timeToFirstByte	57.7 ms +10.57% -3.03%	57.5 ms +10.43% -5.65%	0.35%
largestContentfulPaint	100 ms +6% -10%	94 ms +4.26% -6.38%	6.38%
lcpMinusTtfb	40.3 ms +12.03% -15.01%	34 ms +7.35% -3.82%	18.53%
wpBeforeTemplate	28.51 ms +10.52% -2.03%	28.27 ms +13.72% -3.68%	0.85%
wpTemplate	24.85 ms +4.59% -2.74%	23.99 ms +5.5% -3.58%	3.58%
wpTotal	53.74 ms +10.63% -2.79%	53.76 ms +10.25% -5.78%	-0.04%
wpMemoryUsage	7.67 MB +0% -0%	7.63 MB +0% -0%	0.45%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	34320bb	trunk	% Change
timeToFirstByte	43.75 ms +6.74% -2.97%	42.9 ms +5.48% -1.52%	1.98%
largestContentfulPaint	92 ms +4.35% -2.17%	92 ms +0% -4.35%	0%
lcpMinusTtfb	48.1 ms +1.46% -3.53%	48.3 ms +1.76% -4.55%	-0.41%
wpBeforeTemplate	26.4 ms +8.6% -2.05%	26.42 ms +2.54% -1.93%	-0.08%
wpTemplate	13.66 ms +2.42% -1.32%	13.7 ms +2.04% -1.46%	-0.29%
wpTotal	40.89 ms +6.65% -3.18%	39.99 ms +5.4% -1.15%	2.25%
wpMemoryUsage	6.15 MB +0% -0%	6.11 MB +0% -0%	0.58%
wpDbQueries	10 +0% -0%	10 +0% -0%	0%

media-processing

Metric	34320bb	trunk	% Change
mediaProcessingJpeg	401.91 ms +0.27% -0.85%	398.35 ms +2.4% -1.18%	0.89%
mediaProcessingAvif	6049.13 ms +0.28% -0.46%	6076.69 ms +0.14% -0.22%	-0.45%
mediaProcessingJpegToAvif	4189.82 ms +0.07% -0.14%	4189.03 ms +0.57% -0.3%	0.02%

media-upload

Metric	34320bb	trunk	% Change
jpegUploadProcessing	1442.95 ms +35.93% -2.88%	1412.62 ms +0.77% -0.86%	2.15%
pngUploadProcessing	182.63 ms +6.5% -3.54%	185.87 ms +11.28% -5.54%	-1.74%
largeJpegUploadProcessing	1403.19 ms +0.6% -0.74%	1413.39 ms +0.52% -1.07%	-0.72%
multipleImageUploadProcessing	1541.28 ms +1.31% -1.26%	1551.55 ms +1.29% -1.4%	-0.66%

post-editor

Metric	34320bb	trunk	% Change
serverResponse	521.09 ms +3.38% -4.78%	491.34 ms +5.73% -1.32%	6.05%
firstPaint	285.31 ms +11.41% -16.65%	252.05 ms +11.08% -7.64%	13.2%
domContentLoaded	1144.56 ms +1.47% -1.06%	1161.45 ms +2.54% -1%	-1.45%
loaded	1147.24 ms +1.35% -1.17%	1162.85 ms +2.55% -0.98%	-1.34%
firstContentfulPaint	485.21 ms +1.96% -1.05%	483.83 ms +3.16% -3.1%	0.29%
firstBlock	3481.31 ms +0.88% -0.28%	3514.03 ms +0.25% -0.88%	-0.93%
type	20.39 ms +4.32% -4.81%	20.63 ms +2.18% -4.27%	-1.16%
typeWithoutInspector	19.81 ms +14.03% -2.37%	21.26 ms +6.11% -6.96%	-6.82%
typeWithTopToolbar	26.84 ms +10.39% -7.45%	27.24 ms +6.98% -2.94%	-1.47%
typeContainer	9.46 ms +7.19% -6.13%	9.9 ms +1.62% -14.75%	-4.44%
focus	123.42 ms +2.98% -6.66%	120.44 ms +5.13% -8.65%	2.47%
firstFocus	250.61 ms +0% -0%	255.77 ms +0% -0%	-2.02%
selectAll	627.25 ms +1.01% -8.11%	585.9 ms +5.17% -4.72%	7.06%
listViewOpen	87.06 ms +7.7% -2.49%	86.55 ms +9.1% -12.25%	0.59%
inserterOpen	44.65 ms +3.43% -2.44%	44.41 ms +3.17% -7.39%	0.54%
inserterHover	14.33 ms +11.86% -11.58%	13.21 ms +6.28% -8.78%	8.48%
inserterSearch	9.84 ms +5.39% -5.28%	9.19 ms +3.05% -6.86%	7.07%
loadPatterns	702.94 ms +1.19% -4.85%	692.2 ms +7.66% -5%	1.55%
wpTotal	510.86 ms +3.24% -4.86%	481.71 ms +5.79% -1.35%	6.05%
wpMemoryUsage	13.23 MB +0% -0%	13.19 MB +0% -0%	0.25%
wpDbQueries	53.5 +0.93% -0.93%	54 +0% -1.85%	-0.93%

site-editor

Metric	34320bb	trunk	% Change
serverResponse	391.43 ms +5.35% -3.99%	409.28 ms +3.77% -5.82%	-4.36%
firstPaint	239.38 ms +29.62% -16.82%	281.54 ms +19.06% -12.39%	-14.97%
domContentLoaded	1086.22 ms +0.67% -2.05%	1087.59 ms +1.37% -3.2%	-0.13%
loaded	1087.43 ms +0.67% -2.05%	1088.72 ms +1.37% -3.19%	-0.12%
firstContentfulPaint	437.02 ms +1.46% -2.23%	445.51 ms +2.74% -2.97%	-1.91%
firstBlock	3922.02 ms +0.46% -0.18%	3918.43 ms +0.15% -0.4%	0.09%
type	18.42 ms +1.68% -2.99%	18.19 ms +2.03% -5.44%	1.26%
navigate	113.97 ms +9.74% -1.96%	114.55 ms +7.66% -4.16%	-0.51%
loadPatterns	1271.61 ms +14.21% -6.86%	1262.4 ms +10.11% -8.28%	0.73%
loadPages	992.02 ms +3.09% -2.04%	1026.45 ms +5.03% -4.49%	-3.35%
wpTotal	381.34 ms +5.55% -4.1%	399.29 ms +3.8% -5.88%	-4.5%
wpMemoryUsage	12.27 MB +0% -0%	12.23 MB +0% -0%	0.3%
wpDbQueries	43 +2.33% -0%	43 +2.33% -0%	0%

_{8bb3977 Run}

🏁 Flaky tests

Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

Navigates the items list via UP/DOWN arrow keys in /test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js, passed after 1 failed attempt.

Error: expect(locator).toBeFocused() failed

Locator:  getByLabel('Page Two')
Expected: focused
Received: inactive
Timeout:  5000ms

Call log:
  - Expect "toBeFocused" getByLabel('Page Two') with timeout 5000ms
  - waiting for getByLabel('Page Two')
    14 × locator resolved to <button type="button" tabindex="-1" aria-pressed="false" id="view-list-0-336-item-wrapper" class="dataviews-view-list__item" aria-labelledby="view-list-0-336-label" aria-describedby="view-list-0-336-description"></button>
       - unexpected value "inactive"

    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js:146:49

_{8bb3977 Run}

[jasmussen]

Magic!