Skip to content

Add REST preload paths for query loop blocks in the editor#14

Open
roborourke wants to merge 1 commit into
mainfrom
feat/preload-query-loop-rest
Open

Add REST preload paths for query loop blocks in the editor#14
roborourke wants to merge 1 commit into
mainfrom
feat/preload-query-loop-rest

Conversation

@roborourke

Copy link
Copy Markdown
Collaborator

Summary

  • Hooks block_editor_rest_api_preload_paths to parse post_content for core/query blocks with parse_blocks()
  • For each non-inherited loop, derives the exact REST URL core/post-template's getEntityRecords() will request (mirrors per_page/offset/order/orderby/sticky shape from Gutenberg's post-template/edit.js)
  • apiFetch's preloading middleware then serves first-paint posts from cache — no HTTP round-trip per loop
  • Skips loops with taxQuery (taxonomy rest_base mapping is non-trivial for v1) and excludeDisplayed (depends on runtime render order)
  • Capped at 10 loops per post to avoid payload bloat
  • Zero JS changes — pure PHP hook

Context

This is Track B in a two-track exploration of reducing editor API load on magazine-style pages with many Query Loop blocks. See also PR #11 (Track A: explicit Preview/Edit toolbar toggle using ServerSideRender).

How to choose between the two approaches after both land:

Track A (SSR toolbar) Track B (preload paths, this PR)
First-paint REST requests Still fires on initial load (editor=default, preview=on-demand) Zero for preloaded loops
UX surface Toolbar toggle visible on every loop Invisible — transparent optimization
Editing experience Preview mode → stable SSR HTML, no refetch storms Native editor throughout
Attribute change Re-snap when toggling back to preview Cache miss → normal REST request
LOC / complexity ~90 lines JS ~130 lines PHP
Gotchas Doesn't help unless user puts loops in Preview mode One-shot cache consumption; misses loops with taxQuery

If preload gives 80%+ of the win with no UX surface area, ship this PR and close #11.

Test plan

  • Start npm run wp-env start, run npm run build
  • Create a page with 3+ non-inherited Query Loop blocks, publish, reopen in editor
  • Open Network tab: /wp/v2/posts requests on editor load should be 0 (served from preload)
  • Change a loop's perPage → editor re-fetches for that loop (expected cache miss)
  • Verify page source contains wp-api-fetch inline script with preloaded REST responses
  • npm run test:e2e — all existing tests pass + new preload-paths.spec.js test

🤖 Generated with Claude Code

Hooks block_editor_rest_api_preload_paths to parse the post's block
content for core/query blocks and derive the exact REST URL that
core/post-template's getEntityRecords() will request, so the apiFetch
preloading middleware can serve the first-paint posts response from cache
without an HTTP round-trip.

Mirrors the query-arg shape from packages/block-library/src/post-template/
edit.js: offset (always passed, default 0), order/orderby, per_page when
set, author, search, and sticky/ignore_sticky. Skips loops with taxQuery
(taxonomy rest_base mapping complexity) and excludeDisplayed (depends on
runtime render order). Capped at 10 loops per post to avoid payload bloat.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown

Playwright test results

failed  2 failed
passed  16 passed

Details

stats  18 tests across 6 suites
duration  1 minute, 9 seconds
commit  459fdd4

Failed tests

chromium › preload-paths.spec.js › Query Loop REST Preloading › should preload /wp/v2/posts REST path for query loop blocks
chromium › preload-paths.spec.js › Query Loop REST Preloading › should still fetch posts after query attributes change

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