Initial block inserter is missing when adding a new page

[Andrew-Starr]

Description

When adding a new page, the block inserter is missing - or it's present but not visible, not sure which - until you find some empty white space to click on, and the inserter then appears.

This only seems to affect themes that don't ~~provide page starter content~~ have another empty block (empty paragraph, featured image, spacer etc) in addition to the post content block on the page template, so the Twenty Twenty-Five theme is unaffected the page template contains an empty featured image block, but other themes may be seeing this issue.

The intuitive thing to do is write your page title into the title block and then hit enter to begin adding some content, but nothing happens when doing this, and the cursor remains in the page title block. If you have written your page title, and then use the blue inserter button in the top left, try to add a paragraph this also doesn't work and you are presented with the Block "Paragraph" can't be inserted. error, because the cursor is still inside the page title block.

It is not at all obvious that we need to find the exact empty white space where the post content block is located, to then click here and you can then begin adding content. This is even made even more confusing if the theme does not provide any bottom padding to the parent group containing the post content block, as there is very little white space to find and click. Some themes also do not put a page title block in the default page template, making it even more confusing where to find how to begin adding content as you are just presented with an empty white space.

Step-by-step reproduction instructions

Use a theme that does not contain any other empty blocks in the page.html template, other than the post-content block. (post-title, template-part, and group blocks either wrapping the post-content or not have no effect)

Alternatively, use the Twenty Twenty-Five theme and remove the post-featured-image block from the page.html template.

Go to Pages > Add new

Notice there is nowhere obvious to begin adding content, and "Type / to choose a block" is missing or not visible.

Toggle on "Always open List View" in Preferences > General > Interface, and either exit the page editor and add new page, or refresh the page editor and the block inserter "Type / to choose a block" is now visible.

Updated reproduction instructions in WP 6.8-RC3 with or without Gutenberg plugin active

Use a theme that does not contain an empty block such as post-featured-image in the default page.html template, or alternatively remove the post-featured-image block from Twenty Twenty-Five page.html template.

Go to Pages > Add Page

If the "Show Template" option is not enabled, enable it in the "Page" sidebar at "Template" > "Pages" > "Show template".

Exit the page editor, and go back to Pages > Add Page, and now notice the initial block inserter Type / to choose a block is missing or not visible.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

• [x] Yes

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

• [x] Yes

Please confirm which theme type you used for testing.

• [x] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [ ] Not sure

[Andrew-Starr]

Block inserter is not visible or is missing

Unable to insert paragraph when cursor in page title

Need to find some empty space to click to bring up the block inserter

[Mamaduka]

@Andrew-Starr, do you mind sharing more details to reproduce the issue? WordPress and Gutenberg versions. Is there anything specific about the theme you're testing?

[jegbagus]

Hi @Mamaduka, I think this issue is related to my PR here: https://github.com/WordPress/gutenberg/pull/69768.

The default rendering mode when opening a page is template-locked, which prevents any other plugin from having an initial sectionRootClientId unless it’s core/post-content. This is why the inserter point is always empty, and blocks cannot be inserted, resulting in the notice: "Block Blockname cannot be inserted."

Many plugins extend the functionality of core/post-content, but they are unable to achieve the same behavior as core/post-content. This change will affect many themes unless WordPress provides a way for other plugins to have the same functionality as core/post-content.

Please scroll down in the PR to take a look at the issue. I’ve added a video to make it easier to understand

[Mamaduka]

It looks like the Pages template is missing the core/post-content block, which is a required block if you want to add content to a post/page in the template-locked more.

P.S. If you try removing that block from the Pages template in TT5 or any other core block themes, you'll get a confirmation dialog with a warning.

[Andrew-Starr]

After some more testing it seems the issue happens when the page template does not contain a Featured Image block <!-- wp:post-featured-image /-->, and is unrelated to the existence of starter content patterns.

For example, this is the default Twenty Twenty-Five page.html template:

<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
		<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|60"}}}} /-->
		<!-- wp:post-title {"level":1} /-->
		<!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /-->
	</div>
	<!-- /wp:group -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->

Remove the featured image block, as below, and the issue appears:

<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
	<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
	<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
		<!-- wp:post-title {"level":1} /-->
		<!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /-->
	</div>
	<!-- /wp:group -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer"} /-->

[Andrew-Starr]

@Andrew-Starr, do you mind sharing more details to reproduce the issue? WordPress and Gutenberg versions. Is there anything specific about the theme you're testing?

Latest versions of WordPress, Gutenberg, and the Twenty Twenty-Five theme.

I've amended the description to remove reference to starter content patterns, as I've now discovered this is unrelated. The issue occurs when a page.html template does not contain a featured image block.

[Andrew-Starr]

It looks like the Pages template is missing the core/post-content block, which is a required block if you want to add content to a post/page in the template-locked more.

P.S. If you try removing that block from the Pages template in TT5 or any other core block themes, you'll get a confirmation dialog with a warning.

The confirmation dialog with warning is when focus is on the page title block, as you quite rightly cannot add another block inside the page title. But the issue is that because the block inserter is not visible, it is intuitive to select the page title as there is nothing else to select.

I suppose this is a different issue, and it would be more ideal if hitting enter while in the page title block would move focus onto the post content block, rather than doing nothing.

[Andrew-Starr]

TT5 theme with the featured image block removed from page.html template, block inserter is missing

TT5 theme with the featured image block in page.html template, block inserter is visible

[Mamaduka]

Thanks for the additional details, @Andrew-Starr!

Unfortunately, I'm having trouble reproducing the issue with just the Featured Image block removed. Tested with TT4 and TT5, using WP 6.8-RC2, Gutenberg latest, and Chrome.

I can only reproduce the mentioned issue if I remove the Content block from the singular template. As I mentioned above, this is currently a requirement for editing content in template-locked mode.

Here's my page's template after removing the featured image block.

Pages

<!-- wp:template-part {"slug":"header","theme":"twentytwentyfour","tagName":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:spacer {"height":"var:preset|spacing|50"} -->
<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:post-title {"textAlign":"center","level":1} /-->

<!-- wp:spacer {"height":"var:preset|spacing|30","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}}} -->
<div style="margin-top:0;margin-bottom:0;height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

<!-- wp:post-content {"lock":{"move":false,"remove":true},"layout":{"type":"constrained"}} /--></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","theme":"twentytwentyfour","tagName":"footer","area":"footer"} /-->

[Andrew-Starr]

Thanks @Mamaduka, the markup above in the TT4 page template works without any issues, so I removed the two spacer blocks, keeping the post title block, and the issue re-appeared.

It looks like if the template contains only the post title block inside the main wrapper group, then the issue is present.

Adding any other empty block such as featured image, spacer etc fixes the issue and the block inserter is present like it should be.

With this page template, the issue is present (notice the spacer blocks have been removed):

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">

<!-- wp:post-title {"textAlign":"center","level":1} /-->

</div>
<!-- /wp:group -->

<!-- wp:post-content {"lock":{"move":false,"remove":true},"layout":{"type":"constrained"}} /--></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer","area":"footer"} /-->

With an added paragraph block after the post title, and the issue is still present:

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">

<!-- wp:post-title {"textAlign":"center","level":1} /-->

<!-- wp:paragraph -->
<p>Just testing</p>
<!-- /wp:paragraph -->

</div>
<!-- /wp:group -->

<!-- wp:post-content {"lock":{"move":false,"remove":true},"layout":{"type":"constrained"}} /--></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer","area":"footer"} /-->

But, with an empty paragraph block, the issue is fixed and the block inserter appears:

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">

<!-- wp:post-title {"textAlign":"center","level":1} /-->

<!-- wp:paragraph /-->

</div>
<!-- /wp:group -->

<!-- wp:post-content {"lock":{"move":false,"remove":true},"layout":{"type":"constrained"}} /--></main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer","area":"footer"} /-->

The location of the extra empty block seems to make no difference. I've tried moving the empty block (paragraph, spacer or featured image) around in different positions, and the block inserter is present and correct, but removing it causes the issue to appear.

[Andrew-Starr]

Taking it right back to basics, with this page template containing only the post content block, the block inserter is missing.

<!-- wp:post-content {layout":{"type":"constrained"}} /-->

Adding another empty block anywhere in the template, and the issue is gone, with the block inserter visible like it should be. The following three page templates work OK.

<!-- wp:post-content {layout":{"type":"constrained"}} /-->

<!-- wp:paragraph /-->

<!-- wp:post-content {layout":{"type":"constrained"}} /-->

<!-- wp:post-featured-image /-->

<!-- wp:post-content {layout":{"type":"constrained"}} /-->

<!-- wp:spacer {"height":"var:preset|spacing|50"} -->
<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

[Andrew-Starr]

Toggling on "Always open List View" in Preferences > General > Interface fixes the issue, but that is not ideal as it is not the default setting.

[Mamaduka]

Toggling on "Always open List View" in Preferences > General > Interface fixes the issue, but that is not ideal as it is not the default setting.

It's definitely not ideal.

I'm having trouble reproducing the issue consistently. I can only do it once out of 20/30, but it seems like there is an issue with the Content block's default appender. I'll post an update as soon as I've something more concrete.

@Andrew-Starr, do you mind updating the PR description with the latest testing instructions and details? I'm going to hide some of the replies to make the issue easier to scan. Thank you!

[t-hamano]

I can't reproduce this issue.

@Andrew-Starr Can you replicate on Playground? The following link launches WordPress 6.8 RC2 with the latest Gutenberg Plugin:

https://playground.wordpress.net/?php=8.0&wp=beta&plugin=gutenberg

Testing Instruction

• Tools > Theme File Editor
• Open templates/page.html file
• Remove the following line and update file:

  <!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|60"}}}} /-->
  

• Pages > Add Page
• Confirm that an empty paragraph block exists inside the Post Content block

https://github.com/user-attachments/assets/6bf06b5d-332c-43ff-9f67-7c43309c89a2

[Andrew-Starr]

I can't reproduce this issue.

@Andrew-Starr Can you replicate on Playground? The following link launches WordPress 6.8 RC2 with the latest Gutenberg Plugin:

https://playground.wordpress.net/?php=8.0&wp=beta&plugin=gutenberg Testing Instruction

731d6fabf95baf8f85a11b7d1f1f30dc.mp4

Yes, I can reproduce the issue on Playground with the link you provided.

[Andrew-Starr]

https://github.com/user-attachments/assets/03eb8618-2c06-4246-a3ed-76d68c3ceb9c

[karthikeya-io]

After trying multiple times and reproducing the issue inconsistently, I found one way to reproduce it: when the template doesn't have a featured image, do not keep the sidebar open while creating the post.

https://github.com/user-attachments/assets/5fb30d84-d860-46b8-9d8d-867880c89a04

[t-hamano]

do not keep the sidebar open while creating the post.

@karthikeya-io That's a great find! I finally managed to reproduce the problem.

[t-hamano]

do not keep the sidebar open while creating the post.

Since I can no longer reproduce the problem consistently, this doesn't seem to be the direct cause.

I suspect that there is something to enhance in the EditableContent component?

[karthikeya-io]

Yes, and there's been some discussion in PR #50623. The issue #50984 might be the same one.

Updating this https://github.com/WordPress/gutenberg/blob/7fd64e396358fc5c3a2ba8ad264f2983661b1dc4/packages/block-library/src/post-content/edit.js#L93-L107

to this

const hasInnerBlocks = !! entityRecord?.content?.raw || blocks?.length;

if ( ! hasInnerBlocks ) {
    blocks.push( createBlock( 'core/paragraph' ) );
}

const props = useInnerBlocksProps(
    useBlockProps( { className: 'entry-content' } ),
    {
        value: blocks,
        onInput,
        onChange,
    }
);
return <div { ...props } />;

fixes the issue. I will test this and raise a PR. Please share if there are any suggestions on this snippet.

[Mamaduka]

I don't think mutating blocks value, as suggested in the example, is a good idea; when there are no inner blocks, the code should fall back to the template.

We should try to debug why this isn't happening because the issue might affect other blocks that use useInnerBlocksProps but be less visible.

[Andrew-Starr]

Not sure if this is relevant or helpful, but there is no issue when adding a page via the site editor.

https://github.com/user-attachments/assets/35c50ee7-8b0b-484e-a367-42036ae2c582

[Andrew-Starr]

I guess now that the template rendering mode for Pages has been reverted in 20.6, this issue is no longer applicable and can be closed.

[t-hamano]

I can still reproduce this issue in Gutenberg trunk. I don't think #69680 is directly related to this issue.

[Andrew-Starr]

I can still reproduce this issue in Gutenberg trunk. I don't think #69680 is directly related to this issue.

Yes, my mistake. The issue still persists in WP 6.8-RC3 when "Show Template" is enabled, and without the Gutenberg plugin being active.

[t-hamano]

With the planned release of WordPress 6.8.2, I would like to see if we can move this issue forward. Unfortunately, I may not have enough technical knowledge to solve this problem. Hopefully, someone will take an interest in this issue.

[karthikeya-io]

I can reproduce the issue by following https://github.com/WordPress/gutenberg/issues/69786#issuecomment-2772202873 in WP 6.8, but I'm unable to reproduce it with the latest Gutenberg plugin active.

[Andrew-Starr]

I can reproduce the issue by following #69786 (comment) in WP 6.8, but I'm unable to reproduce it with the latest Gutenberg plugin active.

I can confirm that this appears to be fixed with the latest Gutenberg 21.1.0

[t-hamano]

Indeed, this issue can no longer be reproduced in the latest Gutenberg. If I disable the Gutenberg plugin, the issue can be reproduced:

https://github.com/user-attachments/assets/2f1d73a1-6b95-42d3-9559-0e7ddaedf048

Let's close this issue.