Add server-side rendered preview for unselected query loop blocks#11
Open
roborourke wants to merge 6 commits intomainfrom
Open
Add server-side rendered preview for unselected query loop blocks#11roborourke wants to merge 6 commits intomainfrom
roborourke wants to merge 6 commits intomainfrom
Conversation
Pages with many query loops (e.g. magazine homepages) trigger a large number of API requests as each block loads its content previews. This replaces the full editor rendering with a server-side rendered preview when the query loop block is not selected, switching to the full editor when the user clicks on it. Registers a hidden hm-query-loop/preview block whose render_callback runs do_blocks() on the serialized block markup. The editor uses ServerSideRender with httpMethod="POST" to send the full inner blocks content to this endpoint, wrapped in the Disabled component to prevent interaction until the block is selected. https://claude.ai/code/session_01LSHcKsEAo3tV17kuSFHTaj
Playwright test results
Details
Failed testschromium › posts-per-page.spec.js › Posts Per Page Override › should reflect posts per page override in editor |
The ServerSideRender component uses __experimentalSanitizeBlockAttributes internally which requires the block to be registered in the JS block registry. Add a minimal registerBlockType call for hm-query-loop/preview with inserter: false so it resolves during attribute sanitization. Remove the Disabled wrapper since ServerSideRender already renders static HTML that doesn't need interaction prevention. https://claude.ai/code/session_01LSHcKsEAo3tV17kuSFHTaj
Adds two GitHub Actions workflows adapted from hm-url-tabs: - pr-playground-preview.yml: On PR open/sync, builds the plugin, pushes built assets to a pr-N-built branch, and appends a WordPress Playground preview button to the PR description using the official action. - pr-cleanup.yml: Deletes the pr-N-built branch when the PR is closed. https://claude.ai/code/session_01LSHcKsEAo3tV17kuSFHTaj
In the site editor, getCurrentPostId() can return a non-numeric template identifier. Sending post_id=0 or a string also fails the block-renderer endpoint's integer validation. Only include the parameter when we have a real numeric post ID. https://claude.ai/code/session_01LSHcKsEAo3tV17kuSFHTaj
The server-rendered HTML contains real anchor tags and other interactive elements that would navigate the editor iframe when clicked. Wrapping in the Disabled component prevents this. https://claude.ai/code/session_01LSHcKsEAo3tV17kuSFHTaj
Two problems with the Disabled component wrapper: - It changes the DOM structure so the query loop block can't be selected via click (the Disabled wrapper intercepts the event) - Reverting to SSR preview on deselection triggers unnecessary re-fetches Fix both by: - Adding the inert attribute to top-level elements in the rendered HTML server-side using WP_HTML_Tag_Processor, preserving the original DOM structure so block selection works naturally - Using useState to latch blocks as "activated" once first selected, keeping them in full edit mode permanently for the session https://claude.ai/code/session_01LSHcKsEAo3tV17kuSFHTaj
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
2 participants
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.
Pages with many query loops (e.g. magazine homepages) trigger a large
number of API requests as each block loads its content previews. This
replaces the full editor rendering with a server-side rendered preview
when the query loop block is not selected, switching to the full editor
when the user clicks on it.
Registers a hidden hm-query-loop/preview block whose render_callback
runs do_blocks() on the serialized block markup. The editor uses
ServerSideRender with httpMethod="POST" to send the full inner blocks
content to this endpoint, wrapped in the Disabled component to prevent
interaction until the block is selected.
https://claude.ai/code/session_01LSHcKsEAo3tV17kuSFHTaj