Home.html displays title from query loop instead of post-title

[Humanify-nl]

Description

As I am aware, assigning any page as the 'blog page' in WP reading settings, this will load home.php / home.html in the template hierarchy. This is the specific use case here.

In the home.html template, we want to add a post-title to the blogpage template, or in a template-part assigned to the home.html.

Problem: The title displays the title of first post in the loop. Not the page title (which is 'blog' in my case). The featured image block also displays the first posts' featured image, and the not the blogs (or none if it isnt assigned).

Expectation: It should display the title of the current page, not a post in the query loop.

I remember in the 'old days' this was a bug that occured when 'wp_reset_postdata' wasn't used correctly to close the loop. But i assume it works a little different in a block theme.

@everyone: this can be solved with manually placing a heading block, but the purpose of issues here is that we want this to work as expected or intended.

Step-by-step reproduction instructions

1. Create a new page with title 'blog', in a fresh TT2 install (needs some demo content: a couple of posts).
2. Go to WordPress settings / reading settings and set this page as 'blog-page'.
3. Go to Site Editor, and open the Home.html template.
4. In this template, add 'post-title' block and place it above the query loop (not in the query).
5. Update, open front-end display and see that the title block displays the first title in the loop, instead of the title of the blog-page (blog).

Screenshots, screen recording, code snippet

Testing with post title in the 'header-dark-small' template-part:

Testing with post-title in the template itself:

Environment info

• WP 5.9.1
• Gutenberg 12.6.1 (problem occurs with and without, didn't test 12.7 yet).

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[paaljoachim]

@ntsekouras Nik perhaps you can take a look at this issue?
Thanks!

[DHWP]

I have the same issue. Following a theme creation tutorial found at fullsiteediting dot com.

Very, very blank theme. No dependencies, all plugins on or off same result. (there only is query monitor, gutenberg and woo)

In my case this is in page.html

<!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
<main class="wp-block-group">
   
        <!-- wp:post-template -->
            <!-- wp:post-featured-image /-->
                <!-- wp:post-title /-->
                <!-- wp:post-author {"showAvatar":true} /-->
                <!-- wp:post-date /-->
                <!-- wp:post-content /-->
        <!-- /wp:post-template -->

I get 'Hello World' instead of the single page title when viewing siteurl.local/pagetitle

[AdsonCicilioti]

If you want this to work just create a page template named page-blog.html and don't put it as a posts page in Reading Settings.

Just go to the edit or quick edit page and choose your page-blog template as it now appears in the page template selector, thanks to the nomenclature page-blog.html.

It is worth remembering that you will need a query Loop block.

[Humanify-nl]

Thanks for the tip. I'm aware that this is possible, we can put query loops on every page and call it a blog page.

But I've put this issue up to help make sure new WordPress adheres to its own template hierarchy in a consistent (and familiar) manner.

[AdsonCicilioti]

Sure.
The naming doesn't have to be strictly page-blog but page-{{any name}}, define which blocks this template will have and reuse it as a page template. This at least solves the page title issue.

[yanceyk]

@Humanify-nl Thank you for opening this again. I saw your other one that was closed and then found this one. This will be helpful for those of us writing hybrid themes or updating a classic theme to play more nicely with WP 5.9 features. I've made page and archive header patterns for my theme and this issue affects their use. I insert the block pattern with the post title in the page that displays blog posts and it looks fine. But when I go to the front end, it displays the title of the first post in the loop.

[ntsekouras]

I did some testing right now and it seems that the results are the same even without a Query Loop block. Also noting that if you set the same page as Homepage and not Posts page in reading settings, the title is correct..

It might be something with the Post Title block and or Posts page setting..

[t-hamano]

I have tested this issue again and it appears that this problem occurs with the post-title block alone.

The simplest procedure to reproduce the issue is described below.

1. Activate block theme (Twenty Twenty Two).
2. Create a page for the posts page.
3. From Settings > Reading, set that page as Posts page.
4. Open the site editor.
5. Open Home template.
6. Switch to the code editor and enter the following code:

<!-- wp:post-title /-->

7. Open the page specified as Posts page.
8. The title displayed should be that of the post, not of the page.

[t-hamano]

I have looked into this issue more deeply and expect the problem to be due to the context (postId).
Of the blocks that use postId as context, the following blocks are affected by this issue, as far as I can tell.

• core/avatar (Avatar)
• core/comments-title (Comments Title)
• core/comments-pagination-next (Next Page): Not displayed
• core/comments-pagination-numbers (Page Numbers): Not displayed
• core/comments-pagination-previous (Previous Page): Not displayed
• core/cover (Cover)
• core/post-author (Post Author)
• core/post-author-name (Post Author Name)
• core/post-author-biography (Post Author Biography)
• core/post-comments-count (Post Comments Count)
• core/post-comments-form (Post Comments Form): Comments are registered on the post
• core/post-comments-link (Post Comments Link): Linked to the post
• core/post-content (Post Content)
• core/post-date (Post Date)
• core/post-excerpt (Post Excerpt)
• core/post-featured-image (Post Featured Image)
• core/post-title (Post Title)

[t-hamano]

I believe this is a core issue.

In the block theme, the page IDs do not appear to be set correctly in the following locations:
https://github.com/WordPress/wordpress-develop/blob/002ca62974f289b9490dbf6de2601847413a17c8/src/wp-includes/blocks.php#L880

[Humanify-nl]

Great investigation!

As far as I can remember it is hard to get post ID on the site editor side in the template screen. This might be why this is not (yet) working as intended.

This might be related to issue: #42810, as this is a similar case where not being able to get post_id is mentioned. See comment there, third paragraph

[erikjoling]

I workaround this by adding an heading-block which mimics the post-title-block to the index.html-template:

<!-- wp:heading {"level":1,"className":"wp-block-post-title"} -->
    <h1 class="wp-block-post-title">Blog</h1>
<!-- /wp:heading -->

Then in the Site Editor users can change "Blog" to another name.

[Humanify-nl]

I workaround this by adding an heading-block which mimics the post-title-block to the index.html-template:

<!-- wp:heading {"level":1,"className":"wp-block-post-title"} -->
    <h1 class="wp-block-post-title">Blog</h1>
<!-- /wp:heading -->

Then in the Site Editor users can change "Blog" to another name.

This fails when using add_filter( 'should_load_separate_core_block_assets', '__return_true' ); because styles for a heading are used. I know because I built a custom query block that uses mimiced elements (post-except, post-title, etc.).

When assets are loaded per block on the page, heading styles will be applied instead of post-title. Which is something to be aware of when these differ in your project.

[simkuns]

Ran into same issue today.

My workaround:

// functions.php
register_block_type( "custom/page-title", [
  "render_callback" => function () {
    return get_the_title( get_option("page_for_posts") );
  },
] );

<!-- home.html -->

<!-- wp:custom/page-title /-->

[simkuns]

Similarly you can create custom block for blog page content:

// functions.php
register_block_type( "custom/page-content", [
  "render_callback" => function () {
    return get_the_content( null, false, get_option("page_for_posts") );
  },
] );

<!-- home.html -->

<!-- wp:custom/page-content /-->

[verytwisty]

This is another possible solution:

function namespace_query_title( $attributes ) {
	// if not on home page, use default rendering function
	if ( ! is_home() ) {
		return render_block_core_query_title( $attributes );
	}

	$title = get_the_title( get_option( 'page_for_posts' ) );
	$tag_name = isset( $attributes['level'] ) ? 'h' . (int) $attributes['level'] : 'h1';
	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );

	return sprintf(
		'<%1$s %2$s>%3$s</%1$s>',
		$tag_name,
		$wrapper_attributes,
		$title
	);
}

function namespace_filter_query_title_block( $settings, $name ) {
	if ( 'core/query-title' === $name ) {
		$settings['render_callback'] = 'namespace_query_title';
	}

	return $settings;
}

add_filter( 'register_block_type_args', 'namespace_filter_query_title_block', 10, 2 );

This is using the Query Title (or archive title)

It makes it possible to get all the alignments font sizes etc goodies from the query tite block, (without re-writing the entire block) and also means you can use the same template.html for the archive pages as the blog page if you wish.