FSE: Append new blocks inside post content block

[mmtr]

Changes proposed in this Pull Request

This PR replaces the block inserter in the header toolbar with a custom one that ensures that new blocks are appended inside the post content block.

Since the default inserter in the header toolbar rendered by Gutenberg doesn't set any rootClientId (#), we cannot define which block should contain any new inserted block.

This PR aims to solve that by rendering a replica of the same header inserter but using the client id of the post content block as rootClientId. The same client id is also used now when inserting a starter page template to avoid that content being appended after the footer (#34330).

In order to don't display the default header inserter, we lock the template making impossible to insert new blocks in the root (thus the header doesn't show the default block inserter). But this also prevents the user from removing existing blocks, which solves the issue of having the post content block removable (#34331).

Testing instructions

• Apply this branch to your FSE dev environment.
• Make sure the FSE plugin is activated.
• Create a new page.
• Select the blank template.
• Insert a block.
• Check the block has been inserted inside the post content block.
• Make sure you cannot insert any block in the root document.
• Verify root blocks (template parts and post content) cannot be moved.
• Create a new page again.
• Select a starter page template such as Portfolio or Services.
• Confirm the template content has been inserted inside the post content block.
• Go to Templates (/wp-admin/edit.php?post_type=wp_template).
• Trash all the templates (you also need to delete them permanently due to FSE: Trashed templates are applied to pages #34424).
• Create one more page.
• Select any template.
• Make sure blocks are inserted in the root document now.

Fixes #34327.
Fixes #34330.
Fixes #34331.

[matticbot]

Test live: https://calypso.live/?branch=fix/34327-fse-post-content-block-inserter

[mmtr]

Hmm, noted these warnings while loading an existing page with content:

Not sure if that's a bug in core Gutenberg or if maybe we need to define a new template passed to the editor settings when there is content. Will keep investigating.

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[mmtr]

Hmm, noted these warnings while loading an existing page with content:

Not sure if that's a bug in core Gutenberg or if maybe we need to define a new template passed to the editor settings when there is content. Will keep investigating.

Seems to be a core bug caused by having a parent block with a locked template and a nested block with an unlocked template: WordPress/gutenberg#11681

Will try to manually override the template validity by dispatching a setTemplateValidity action.

[mmtr]

Will try to manually override the template validity by dispatching a setTemplateValidity action.

Fixed in 0443021

[glendaviesnz]

Nice work figuring out a solution to this! I ran through all the suggested testing steps quickly and it works as specified for me so far, but will do some more rigorous testing in the morning.

[vindl]

Great work @mmtr! This PR nails multiple rough edges with interactions that were previously possible. Went though the testing instructions and everything worked as expected.

I was suspecting that we'll have to handle the case of "inline" inserters (the + one that appear between blocks) separately:

It looks like we got that for free with template locking, while still preserving it inside of content slot. ✨
On top of that the template blocks can't be moved around anymore.

[vindl]

Dang, I found an error in further testing. Everything works fine with existing pages, but when I try to add a new page I'm running into the blank screen with the following error:

Uncaught TypeError: Cannot read property 'insertBefore' of null

Dismissing the approval to make sure we investigate the Uncaught TypeError: Cannot read property 'insertBefore' of null error before merging

[mmtr]

Thanks for the reviews @vindl @rodrigoi!

The last commit should fix the Uncaught TypeError: Cannot read property 'insertBefore' of null error and I also moved the appender component to a separate file, so this should be ready for another pass.

[rodrigoi]

Excellent work @mmtr!!

[vindl]

Thanks for the update @mmtr! Not sure if it's just me, but when testing locally I'm still running into an error when trying to create a new page, although a different one this time (likely not related with this PR but it gets in the way of testing):

factory.js:45 Uncaught (in promise) TypeError: Cannot read property 'attributes' of undefined

I logged this one here #34481 along with the PR that might have introduced it.

I also noticed that the inserter now appears before the back button, not sure if that was the case previously:

But that can be handled in follow-up PRs as long as we log an issue to keep track of it.

[vindl]

Created another follow up issue to track incorrect inserter button position here: #34544