Twenty Twenty-Four blog template ignores main query and breaks navigation

[flixos90]

While recently testing the new TT4 default theme, I ran into a problem (reported in ​this GitHub comment) from which I then noticed a more severe bug (also see ​another GitHub comment specific to this ticket): The TT4 blog template is broken in an essential way that prevents using the blog as expected.

• It always displays the 3 latest posts. This ignores the "Blog pages show at most" setting under Settings > Reading.
• It always displays the 3 latest posts. In other words, if your site has more posts than configured to show per blog page and you navigate to e.g. /page/2/, you will still see the 3 latest posts, instead of the next page of posts.

Reason for the bug:
Both of these problems are happening because TT4 uses inherit: false in its core/query block used in the home.html template (via the included posts-grid-2-col.php pattern), which means the main query is ignored. While custom core/query blocks are of course fine to use, there should be at least one core/query block in every template that displays the expected content based on the URL (e.g. the specific page or post or list of posts). While there can be exceptions to that rule (e.g. a page with very custom layout), the main query should be respected especially for an essential WordPress feature like the blog.

Proposed solution:
It appears the custom query approach was taken to nicely split the 3 posts displayed into two columns. While that is a creative design decision, unfortunately the way it's implemented doesn't work per the above, and most likely we won't be able to accomplish the same layout while using the current capabilities of the core/query block. However, given the breakage, I think we'll have to find another solution.

I think we should reuse the same core/query and layout approach that is being applied in the TT4 index.html template (more specifically the posts-3-col.php pattern), since that template correctly relies on the main query to display posts in multiple columns. We may need to make a few adjustments while integrating that layout into the relevant section within the home.html template (potentially requires a slightly modified version of the existing pattern), but trying to use the existing posts-3-col.php pattern instead of the posts-grid-2-col.php pattern would be a good start.

Alternatively, we could try to update posts-grid-2-col.php to make that layout work while relying on the main query, but we may get stuck in that effort by the current core/query block not supporting that, so it would be more risky especially given we are this late in the 6.4 release cycle.

A note on severity:
If we ship TT4 in this state, we will effectively ship a default theme which in its default configuration comes with a broken blog - and next to pages, posts are still the essence of WordPress content. So I think this needs to be prioritized for 6.4.

[flixos90]

Testing instructions:

To replicate (use TT4 theme in its default configuration):

1. Ensure pretty permalinks are enabled
2. Ensure there are at least 5 posts on your website (content doesn't matter).
3. On Settings > Reading, configure "Your homepage displays" to a static page (choose any page) and also set a "Posts page" (e.g. to an empty page called "Blog" with /blog/ slug).
4. Set "Blog pages show at most" to 4.
5. Navigate to /blog/. You'll immediately notice that this page looks like a home page. Instead of focusing on the blog, it starts with the demo content "A commitment to innovation and sustainability". That's the problem reported in ​https://github.com/WordPress/twentytwentyfour/issues/404 though and shouldn't be covered in this ticket here.
6. Scroll down to where it says "Watch, Read, Listen". You'll see the 3 latest posts, even though your site is configured to show 4 posts per page (which should be the case here since your site has 5+ posts).
7. Navigate to /blog/page/2/.
8. Scroll down to "Watch, Read, Listen" again. You'll still see the 3 latest posts, even though you would expect the next set of posts to be displayed on this URL.

[huzaifaalmesbah]

I followed your test instructions. I got the same issue @flixos90

[flixos90]

Thanks for confirming @huzaifaalmesbah.

For tracking within the TT4 GitHub repository, I've opened ​an issue there. Let's centralize the discussion here though, to avoid talking in two places.

[luminuu]

I've created a PR in Github with the requested changes, please go check it out: ​https://github.com/WordPress/twentytwentyfour/pull/706

[rajinsharwar]

The PR seems to solve the issue mentioned. But, maybe we might need more testers on this to check for more edge cases.

[huzaifaalmesbah]

Thanks For PR @luminuu
Looks good. I think need more opinions and testing.

[shailu25]

​PR Looks good to me.

Blog Template main query and navigation Issue will Resolved with this PR.

Before:

• ​https://prnt.sc/kfRauSAbz3Tp
• ​https://prnt.sc/6CfOWhsJUujr

After Patch :

• ​https://prnt.sc/YcLMXc7tB0T9
• ​https://prnt.sc/nNLWrBMHtfBV

[flixos90]

This will be addressed via #59770 / ​https://github.com/WordPress/wordpress-develop/pull/5593. cc @onemaggie

[hellofromTonya]

In 57036:

Twenty Twenty-Four: Bugfixes for 6.4 RC2.

This update includes the following bugfixes:

• Fix: Added a new block pattern for the home template that inherits the page query and fits the design of the home page. (more context on the theme repo: ​https://github.com/WordPress/twentytwentyfour/pull/706)
• Fix: Rely on parent theme data for block style.
• Fix: Categories for some patterns.
• Fix: Minor labeling issues

Follow-up to [56999], [56951], [56813], [56764], [56716].

Props anlino, beafialho, desrosj, devmuhib, didierjm, fabiorubioglio, flixos90, hanneslsm, hellofromTonya, huzaifaalmesbah, ktaron, luminuu, mshowes, onemaggie, phillsav, poena, rajinsharwar, richtabor, shailu25.
Fixes #59770, #59759.

[hellofromTonya]

In 57037:

Twenty Twenty-Four: Bugfixes for 6.4 RC3.

This update includes the following bugfixes:

• Fix: Added a new block pattern for the home template that inherits the page query and fits the design of the home page. (more context on the theme repo: ​https://github.com/WordPress/twentytwentyfour/pull/706)
• Fix: Rely on parent theme data for block style.
• Fix: Categories for some patterns.
• Fix: Minor labeling issues

Follow-up to [56999], [56951], [56813], [56764], [56716].

Reviewed by flixos90, jorbin.
Merges [57036] to the 6.4 branch.

Props anlino, beafialho, desrosj, devmuhib, didierjm, fabiorubioglio, flixos90, hanneslsm, hellofromTonya, huzaifaalmesbah, ktaron, luminuu, mshowes, onemaggie, phillsav, poena, rajinsharwar, richtabor, shailu25.
Fixes #59770, #59759.