List View: Collapse off-window placeholder rows into a single spacer row

[Mamaduka]

What?

Related #80935 and #80929.

Off-window blocks in the List View each rendered their own <tr><td class="…placeholder">. This coalesces consecutive off-window blocks into a single spacer row sized to the run (count × 32px).

Why?

On a 1000-block post, the placeholders were 962 rows / ~1900 elements — ~60% of the List View's DOM and ~48% of the whole document. Every style recalculated in the open frame, so they dominated the cost of opening the List View.

How?

ListViewBranch accumulates off-window blocks and flushes them as one row, before any real row and before a nested branch (children of an off-window parent can still be in view). Spacer height is set inline, so BLOCK_LIST_ITEM_HEIGHT moved from index.js to utils.js (both already import from it — no cycle). Also drops a stale comment claiming rows are 36px; they are 32px.

No change to the windowing math, windowOverscan, or treegrid semantics: spacers carry no role, TreeGrid navigates [role="row"], the drop zone uses [data-block], and the first/last/selected/dragged rows still always render.

Testing Instructions

1. Post with 1000 paragraphs → open the List View. Scroll top to bottom: no blank rows, scrollbar height unchanged (total height is still exactly blocks × 32px).
2. Post with ~15 blocks → no spacer rows are rendered at all; DOM unchanged.
3. Home/End jump to the true first/last block; arrow keys, expand/collapse, and drag and drop behave as before.

Testing Instructions for Keyboard

Same.

Screenshots or screencast

Use of AI Tools

Assisted by Claude.

[github-actions]

Size Change: +26 B (0%)

Total Size: 7.76 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-editor/index.min.js	428 kB	+26 B (+0.01%)

_{compressed-size-action}

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

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: andrewserong <andrewserong@git.wordpress.org>

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

[github-actions]

Flaky tests detected in 32f29c9.
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.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/30540580972
📝 Reported issues:

• [Flaky Test] Should insert content using the global inserter #78924 in /test/e2e/specs/widgets/editing-widgets.spec.js

[andrewserong]

I've run out of time this week, but just a drive-by comment to say that this is awesome! Such a good idea to use a single spacer row instead. I was wondering a while back how web apps like iCloud photos feel so smooth when navigating tens of thousands of items and they seem to use a similar approach (in that case it's height set on the container instead of a placeholder row but the effect is much the same). It could be cool to try out an approach like this for DataViews infinite scroll too, if we know how tall things are going to be 🤔

In any case, keen to give this a review next week if it's still open!

[Mamaduka]

Thanks, Andrew!

It looks like many popular virtualization libraries use something similar, but the List View has some specific requirements, so drop-in replacements aren't possible. Adopting some of their approaches seems like a good middle ground.