FlexPlat logoFlx Modernize

Step 5: Post lists

The blog home page, archives and search results are one query loop with different headings. Twenty Twenty-Five draws each post as a large title, the text, and the date, with generous spacing; card-style lists look nothing like it.

Method

  1. Cut the <main> element out of the native blog home page and search results captures.
  2. Let the route supply its own <main>. The generic layout wraps content in a narrow Tailwind container, which constrains the theme's full-width rows. Pass ownMain: true to renderLayout and emit the theme's <main class="wp-block-group has-global-padding is-layout-constrained …"> yourself.
  3. Rebuild each item with the theme's classes (src/platforms/wp/twentytwentyfive/archive/index.ts): wp-block-post-title has-x-large-font-size → wp-block-post-content → wp-block-post-date, each item in a group with the theme's spacing--60 padding.
  4. Match the details that differ by route: plain heading on the blog home page; wp-block-query-title and the theme search form on search; "Search results for: “…”"; the theme's pagination block.
  5. Escape visitor input carefully. The search words appear in the heading and the form's value. Decode WordPress entities first (they arrive encoded), then escape, including < and > in the attribute. Test it with a hostile query ("><script>…).

Known difference: the theme shows each post's full content in the list; the payload carries the excerpt. Matching it means adding a field to the payload (plugin and renderer together).

Check: blog home page fidelity. On Twenty Twenty-Five it went from 61.6% / 74.9% to 98.0% / 92.0%; search results from 53.9% to 70.3% on desktop. Search lacks the theme's "More posts" section, which needs extra payload data.

Published from rickey29/twenty-twenty-five at commit 2541c1d · Flx Modernize 1.0.0 · Flx Render 1.0.0